Amazing space in media query section

https://www.codecademy.com/courses/learn-responsive-design/lessons/media-queries/exercises/breakpoints

this maybe simple… having trouble understanding the code behind 3 images in a column on a screen, 2 images in a column on an even smaller screen and ultimately 1 column on a smallest screen

any help is appreciated!!!

This is a property of flex! If you go to that lesson and have a look at the DevTools, and then go to the container with class gallery, then you’ll see the code giving this shape is

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

flex is what is giving this the ability to position dynamically on the page, and then the flex-wrap property specifies that you want the child elements (in this case the images) to wrap when it reaches the end of the page.

1 Like

Many thanks! i have spent some time trying to learn this…

having some trouble

looking back i may have mis-spoke my desire

up front, i am not well versed in Dev Tools

i used the code you kindly provided, and that lined things into 1 column… which is my ultimate goal…

again, i am after 3 images in a row on a large screen, down to 2 images in a column (the third still wherever it goes)a and ultimately 1 column of 3 images on a small device

i hope i explained what i am after clearly!!

maybe provide a codepen?

i will give you %0.0000000001 of my first million!!

Seriously, i appreciate the help : )

If I’m interpreting you correctly, then what you are looking for is this on a large screen


This on a medium screen

And then this on a small screen

is that correct? If so, then that code I put in should do what you want it to, if not then I’ll need a bit more info to help you out!

YES! the above example you provided is exactly what i am after

i lined up 3 images left to right… and added your advice… even as i close my browser smaller and smaller… still on the same line…no from 3 large device, 2 smaller device, 1 smallest device

they do shrink and expand though

kindly see https://obxhomebrewers.com/BGT_NOVA2/test.html

please ignore the main site, i have added my code to that domain for convenience

help me make it responsive? its totally wonky on my smart phone… even with a media query

BOY am i grateful to you for helping me out!

MANY THANKS!!!

I believe the issue is your img CSS. When you set the width of an img element to a percentage, then the image will always scale with the size of the page, so the img elements will never need to overflow. By setting a hardcoded width, the img elements will not resize and will overflow, thus having the desired effect. So you would want

img {
   width: 250px;
   height: auto;
}

and then you should have the wrapping. Also the exact size you want can change if you want the images bigger or smaller.

1 Like

BINGO!!!

i have what i was after!

thank you so much!

i could not have figured this out without your instruction!

follow up…

how do i make this code responsive? i understand px are not relative units

again, i thank you!

px are not, however if you want the images to also resize when the screen gets too small for them, then you need to wrap them in a <figure> tag. Then you can edit the max-width for figure to get what I think you are looking for. For example, here’s the code I used to get that functionality on your website.

HTML

<body>
   <div class="gallery">
     <figure>  
      <img src="BGT images photo shop/Morocco 645_1.jpg" class="responsive">
     </figure>
     <figure>
      <img src="BGT images photo shop/Morocco 649_1.jpg" class="responsive">
     </figure>
     <figure>
      <img src="BGT images photo shop/Morocco 659_1.jpg" class="responsive">
     </figure>
   </div>   
</body>
</html>

CSS

.gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 20px;
  }
 
figure {
  max-width: 450px;
  margin:0;
}

img {
      width: 100%;
}

By moving the max-width: 450px; to the figure tag, your images will be no bigger than 450px, however they are able to shrink when the page gets too small to hold them. The figure tag is required as flex is applied to the direct child element. Therefore what is happening is the flex-wrap is applying to the figure, which can only be at more 450px, and then the img is being forced to stay the full width of the figure tag. Therefore you’re able to get both the flex-wrap effect and the resizing effect simultaneously.

Hopefully this makes sense, try out adding the figures in the way I did above and then doing the CSS, and then play with it in DevTools to see the difference when the figure wrappers are removed.