Streaming live at 10am (PST)

Best way to layout images on a page in a 2x2 style?


#1

I want to display 4 images in my portfolio, and was wondering if there is a specific layout I should go with. I want a 2 rows and 2 images per row, all equal in size. So far, I made a div block and put 2 image blocks next to each other inside, and then added my images. Then maybe for the sub headers make another div block under the first one? Is there a better way to do this? I also want to make sure that it looks right on mobile as well. Thanks!


#2

You can use one of the 3 most evident methods:

Display:inline block DIVs, with a percentage width value for each breakpoint.

Using the ROW widget, where you can set the number of columns and how it behave for devices (use one ROW element per row of images)

Using Flexbox: Learn how to use at www.flexboxgame.com


#3

How exactly do I use the ROW widget, that you mention in method 2? I can't seem to find it


#4

#5

Wow you made a video, thank you so much!


#6

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