Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Reid Larson
Reid Larson
12,711 Points

Flexbox scaling with images?

I am working with flexbox right now and like that a lot better than other forms of formatting. My question however is how to adjust my media queries. I have 4 images in a div that wrap after 2. So i have two images on top of two others. When my browser window starts collapsing the images don't really scale and drop to a column rather than stay two on top/two on bottom. Any ideas on what to add so that my images resize?

1 Answer

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hi Reid,

I'd be happy to help! Do you think you can post your code on CodePen for me to look at? It would be much easier to just see the code than for us to go back and forth trying to describe it to each other. :)

Once you post the code on CodePen, post the link to the Pen as a reply to this thread.

Reid Larson
Reid Larson
12,711 Points

you can just go to www.theli5t.com to see. This is just a site i will eventually transform but for now just working with the layout, etc. you will see the same placeholder I have everywhere.

Nick Pettit
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Awesome. The solution I posted should work exactly as described then. You'll need to close your .container element, add in the item you want to span the full width, and then open a 2nd .container below it.

Reid Larson
Reid Larson
12,711 Points

Not sure i'm following...

Nick Pettit
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hey Reid,

Not your fault! It looks like a previous solution I posted was somehow deleted? Strange.

Anyway, you need to have 2 containers. If you want an element towards the middle of the page to span the full width, you'll need to close your first .container element, add the full width, and then open a new .container element. See the pseudo-code below:

<div class="container"></div>
<div class="full-width-element"></div>
<div class="container"></div>

Does that make more sense? :)