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

Question

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 :

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 :

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

charles · Accepted Answer · 2020-07-23 13:38:35Z

2

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 */
}

answered Jul 23, 2020 at 13:38

charles

1,9042 gold badges13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kiyubi · Accepted Answer · 2020-07-23 12:47:47Z

1

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>

answered Jul 23, 2020 at 12:47

Kiyubi

558 bronze badges

4 Comments

Vasilis Skentos Over a year ago

I did but the result is the same

Kiyubi Over a year ago

okay, try putting those 2 sections inside two different div and then do display:flex on each of the divs. I can't really say because your image isn't visible, on running the code I can't see any image because the images are stored in your pc

Kiyubi Over a year ago

Dude I figured out your mistake, damn, you are a total newbie. Need a lot of work. First of all your divs are all messed up

Vasilis Skentos Over a year ago

What was it then ?Could you provide an example ?

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related