Grid or Column/Rows Set Up (?)

[mode500]

Hello, I was wondering if you could help me with a design that I would like to hopefully adopt. I have set up a basic principle and in theory, works fine in desktop view but on a smaller screen size is all over the place. I have attached some images to help you understand what it is I am trying to achieve exactly. The images show how I want the result to look in both desktop and mobile and I have added screenshots of what I have in the page builder at preseent and it looks on the front end so far.

What is the best way for me to go about this to get the best result? Thanks!

[ruenel]

Hello @mode500,

Thanks for writing in!

You can use the Grid or the Row/Column set up. Just make sure that the font size of the Texts inside in each column will adjust in the smaller screens so that it will all fit in the column. It is highly recommend that you will have to create a different layout in smaller screens to make sure that any Text contents will be readable and have enough space inside the columns.

Best Regards.

[mode500]

Okay thanks but what about the huge gap that is created between the shape symbol and the actual text area when in mobile view due to the empty column area’s to the right of the shape symbol in desktop view? And the same applies to the blank shape area also as that just separates from the rest of the layout when in mobile. Is the only way to do this by having two, possibly three, layouts for various screen sizes?

[ruenel]

Hello @mode500,

If you are using empty columns (or Cells), you can always hide that empty column or cell on smaller screens by utilizing the “Hide During Breakpoints” option.

• Hide or Show Content by Device Size | Themeco Docs

Hope this helps.