How can I justify some images on MD breakpoint?

I Need Help
1

I’m a bit green about web design but I’m trying to learn as much as I can.

Now, my question will probably be the easiest ever for some of you but I tried a couple of things and I’m getting tired.

I made a bunch of graphic logos at the bottom of my main page.

There are 6 square graphics (each 200x200px on LG breakpoint.)

I made a row divided into 6 columns and put an image Bric in each. Then, I duplicated that row 2 times for a total of 18 square graphics.

Now, my problem is this : it looks fine on every break point except for MD.

I tried to make the graphics big enough on MD to get 4 on each row. However, the 2 last ones will get to a new “virtual” row underneath and the next row will be below that instead of following up the graphics.

IMG_0968
IMG_09682360×1640 421 KB

IMG_0969
IMG_09692360×1640 349 KB

Now my question is : is there a way to keep them at 4 columns at that breakpoint and make the next rowa below follow the next graphic at the same row level or should I just make everything bigger so that there will be 3 in each row and call it a day?

2

Do you have an offset set, on the column with the one I circled in yellow? If so remove it.

e4118b53e8dacd80e412c91708da9aedecaf3cec
e4118b53e8dacd80e412c91708da9aedecaf3cec2360×1640 261 KB

You will find building something like this using flex, much easier than columns. saves a lot of clicking. But you are pretty much there now, so keep the columns. :smile:

3

It’s normal the result you have. YOU’VE CREATED A ROW OF 6 columns and 6 images, so if you’re on a screen template, it’s bound to line up with your row. But if you put all the images in a row in the same row, you’ll see that they’ll align themselves with the flex class.

1 Like
4

I’ll look into what flex is.

5

@Alpha is correct, I missed that bit where they used multiple rows. :smile:

@DaudelinPhoto I did a video overview of flex a while back, it’s old now, but the concept is still valid.

2 Likes