Issues with responsive grid

Design help General
1

Hi,

I’m having trouble getting my homepage grid (Homepage section 2) to look correct across all devices. I need the tablet and phones (landscape and portrait) to reflect the same grid layout on the desktop site. Adequate amount of white space on all sides of the grid is important - the desktop version has about 100px.

How do I get my grid to scale in size across devices? Is there a better solution?

Thank you so much!

Here is my public share link: https://preview.webflow.com/preview/manals-fresh-site?preview=c2e0397b07e2d6ab0b54182984fc5dd3

2

Yes there is a better solution. It is called VW/VH/EM measurements. You can find more about it in the Webflow blog or PM me so I could help you out further. :wink::+1:

3

Never mind, we talked about in over PM and It was not what you were looking for. Webflow Forum friends, do you guys have any ideas?

4

Hi @fullstackdesigner,

I would start from set background images on thumbnails size: contain instead of cover. Then you will need to adjust font size on text, that appear on hover.

Cheers,
Anna

5

Hey @sabanna,

Thanks for that. It looks like the thumbnails are really small when I set the background images to size: contain. Is there a way to switch to a 2 column layout on mobile portrait and landscape?

If not, I guess I’ll opt for stacking thumbnails in 1 column for mobile p/l.

Thank you for your help!

6

With standard 3 columns row, you can’t change it to 2 columns. For that, you would need “custom made” columns.

But I think the idea with 1 column on mobile view is pretty good.

7

Great, @sabanna - I’ll go with the 1 column layout then.

Except that it leads me to another problem: on mobile portrait and landscape, the thumbnails now overlap with my nav. Tried adjusting just the nav links to Z-Index 25 (Homepage container2 is Z-Index 20) but that didn’t work. Any idea what to do here?

I opened a new topic if you prefer to discuss there: http://forum.webflow.com/t/responsive-grid-overlapping-main-nav-on-mobile/27039?u=fullstackdesigner

Thank you!

8

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