Can't get 3 images per row to show


#1

Hi,

After running through this project twice, I still can't figure out how to get the 6 image in the body to line up properly: should be 3x2, but for some reason I get 2x1, 1x1, 2x1, 1x1.

Can someone please help me understand?

<section class="container">
  <div class="row">
    <figure class="col-sm-4">
    </figure>
    <figure class="col-sm-4">
    </figure>
    <figure class="col-sm-4">
    </figure>
  </div>
  <div class="row">
    <figure class="col-sm-4">
    </figure>
    <figure class="col-sm-4">
    </figure>
    <figure class="col-sm-4">
    </figure>
  </div>
</section>

#2

Please post a link to the exercise. Thank you.


#3

Here is the exercise: https://www.codecademy.com/en/courses/make-a-website/projects/codebrainery

Trying to understand what the final layout should be like.


#4

Tested the html/css in Chrome and displayed fine, so much be a Safari issue unfortunately.


#5

Switch to full screen view by clicking the expand button at top right of the local browser. Then you will see the three columns as they are intended. Bootstrap 'auto-wraps' when the screen width is narrow.


#6


#7

Hi! But in Safari 9.1, that's not what I see in full screen for some reason.


#8

I really cannot say what the problem may be, and have no knowledge of the Safari browser (Windows user). Try to comment out this selector rule and let Bootstrap handle the wrapping. I didn't realize that Flex was included.

/*
section.container .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
*/

This is only a test to see what happens, not a commentary on the CSS, itself.


#9

I deleted display and flex-wrap: it does make it work the 3*3 then.
It’s a safari problem I guess…