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 richard Jucewicz
richard Jucewicz
1,313 Points

automatically resize images in flexbox.

does anyone know how to have the images automatically resize in dimension just like with text?

i'm building a website: http://weweavewebsites.org/rm/

the image doesnt get smaller when the window is resized. not like the text columns.

i tried with max width. and height:auto; but only the width is resized.

4 Answers

Liam English
Liam English
3,837 Points
Liam English
Liam English
3,837 Points

Hi, I've just looked at your website and the code (via the browsers developer tools).

This CSS snippet seems to fix your problem:

.image {
    max-width: 100%;
}
richard Jucewicz
richard Jucewicz
1,313 Points

Hi Liam,

thx for having a look at it. I ha tried thatt option already. but it only resizes the width. adding height: auto; doesnt make a difference. :/

Liam English
Liam English
3,837 Points
Liam English
Liam English
3,837 Points

No problem :) ..

I did not add a height to the image selector earlier and it scaled perfectly.

You could also try this:

.image {
       max-width: 100%;
       display: flex;
       min-height: 207px;
}

Also, you are using an H3 heading in the first two columns, and a H2 heading in the third column. This will effect the space shown between the first and second headings & images below them in comparison to the third heading & image below it.

Without changing the H2 into a H3 heading, after making the CSS changes above - your third column will still display slightly higher than column 1 and 2.

If the above does not work (It does for me in developer tools), here is a good article that may help you solve the problem:

Equal Height Images with FlexBox

richard Jucewicz
richard Jucewicz
1,313 Points
richard Jucewicz
richard Jucewicz
1,313 Points

maybethere's smth with my chrome setup. but some solutions dont seem to work. the info in the article did the trick! thx a lot!

dya happen to know why the pics move to the side when the menu is folded out? (on small sreens) and how to fix that? in case of text it's just pushed under as it should be.

richard Jucewicz
richard Jucewicz
1,313 Points

btw, i already found a workaround for the latest issue. although its definitely not best practice. just wondered if you happened to know what the cause is of the pics being pushed to the side.

Liam English
Liam English
3,837 Points
Liam English
Liam English
3,837 Points

Try this:

[id^="drop"]:checked + ul {
    display: inline-block;
    z-index: 1;
}

Its not ideal, as it will not push the content down below it - but it will display your menu over the top of the content, rather than pushing it to the right.

I assume that the menu is taking up space on the page, on small devices when it is activated, pushing the content to the right and out of the container.