I'm having issues with FlexBox

HTML & CSS
1

Hello everyone! FlexBox is one layout I really want to know like the back of my hand I have completed some tutorials on it but I still run into few issues which makes feel bad.

Now to my problem, i have some (6) images I want to make responsive by utilizing the FlexBox layout… At desktop view, the images wraps well ( 2 by 3) and when I resize to mobile view, it stacks over one another like a column which is good… The headache comes in when I tried to adjust the width of the flex-items, using"width" or “flex-basis” properties on “image-collections”, the images become disorganized and overflow the “flex-container”…
On img{ ;} selector, when trying to resize the images width, percent% units seems to move the image apart from each other on desktop view…

Link to the codepen:
https://codepen.io/Que0/pen/ZEQRBwz

2

You are setting the figure to width:100% which with its default margins makes it overflow before you start. Remove the width or negate the margins.

.image-container figure{
    /*width: 100%;*/
}

I don’t see you have any setting in effect for the image width specifically so add width:100% on the image.

.image-collections img{width:100%;height:auto;}

The flex:0 0 500px doesn’t make much sense as you don’t want the image to be 500px or larger do you?

Remove the flex:0 0 500px and then re-test to see where you want to go from there:)

3

Thanks for your response, when I added a width of 100% of to the .image-collections, the images overflows the container and the wrapper at certain screen size (512px downwards)… I even tried to reduce the width to 50% but the images were all over each other.

4

I didn’t say add it to image collections! I said add it to the image itself as in the code I posted above.

You didn’t negate the margin in the figure element either.:slight_smile:

Here’s a fork of your pen,

1 Like
5

What of in situation where you have images with different aspect ratio, do you have any tips you want to share? Thanks btw.

6

It can be difficult to manage images with different aspect ratios although there is a new css property arriving that will help with this but not ready for prime time yet.

Even with the help of the new property there’s some questions see need to know first.

We can force the images to be the same width and height and then use object-fit cover on the image to maintain aspect ratio but this will involve the image being cropped in some way.

Or you can use object-fit:contain to avoid cropping but they won’t stay the same size as each other.

Or you could just let images do their own thing but center them vertically or indeed align top or bottom. Captions could be aligned with flexbox so they are on a line.

It all depends how you want this to look but the thing to remember is that images can only be the same size if they are cropped in some way assuming different aspect ratios. This could result in you losing the head of a person if there is a great difference in aspect ratio. :slight_smile:

1 Like
7

I’d probably do it like this where you keep the whole image contained in view rather than covering the area.

Note I simplified the html as you don’t need unnecessary divs when you have other elements you can use.

Or perhaps CSS grid would be better to keep columns aligned.

These are just rough examples to give you an idea.:slight_smile:

2 Likes
8

I’ll take my time to go through it and understand it… Thanks a bunch!!

Also, what function does -webkit-text-size-adjust perform??

9

It stops ios from increasing the font-size when you rotate the device. It’s generally not what you want when you have designed the page properly using media queries.

2 Likes
10

Understood, thanks

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.