CODEWITHSUNDEEP
htmlcssflexbox
Vasilis Skentos
Vasilis Skentos

Reputation: 566

unable to display elements of same width and height correctly with flexbox

I'm a beginner in html and css and I have created a flexbox container where I want an image and a description as two div elements to cover my whole screen width with equal width and height and then go a row down and do the same for the next image and description . The picture below represents the display I am trying to make perfectly : enter image description here

As seen in the picture above the image and description are of same width and height something that I cannot do perfectly using my code below with flexbox :

 <div class="services-container">
        <div><img src = "IMAGES/flexwing.png"></div> 
        <div><h1>Commited to the highest international standards</h1><br/>
             <div class = "line">
             <p>Our clients trust as and love us . We are the best airline force . <br/> Salute !</p> 
             </div>        
        </div>
        <div>
          <h1>Play our game to get a discount ticket <br/> for a flight to the Dodecanese !</h1>
          <button class = "play-btn">Play here</button>
        </div>
        <div><img src = "IMAGES/dodecanese.jpg"></div>
    </div>

.services-container{
    display: flex;
    flex-flow:row wrap;
    position: relative;
    bottom:32px;
    width:100%;
}

.services-container div{
    margin:0;
    width:50%;
    background-color: white;
    height:auto;
}

.services-container h1 {
    font-size:40px;
    text-align:center;
}

.line{
    border-top:1px solid rgb(217, 0, 217);
    width:10%;
    
}

.services-container p{
    font-size:30px;
    text-align: center;
}


.play-btn{
    border-radius:2px ;
    color:green;
}

I have added width:50% for each element so that each one covers half page width so I can have 2 elements on each row but after my first 2 elements I have assymetry in all my elements like below :

enter image description here

enter image description here

I would appreciate your help with this . Thank you in advance .

Upvotes: 0

Views: 70

Answers (2)

charles
charles

Reputation: 1874

The intrinsic widths of your images are smaller than their containing blocks. Add the following declarations to your image selector:

img {
  width: 100%; /* ensure width is equal to containing block's content area */
  display: block; /* remove any white-space */
}

Upvotes: 2

Kiyubi
Kiyubi

Reputation: 57

It's because your second row picture have less width than the picture in the first row. And you can't change the width of picture by applying width:x% or xpx to the div containing the image. But you can achieve that by giving a width to this<img src = "IMAGES/dodecanese.jpg"> and the first image. Give the same width. e.g:<img src = "IMAGES/dodecanese.jpg" width=500px>

Upvotes: 1

Related Questions