Does the "Containers" are the good solution for a responsive website? Looking for best practice for a responsive website

Hello the Webflow community :slight_smile:

I’m Kevin a French UX/UI designer living in Korea.
I wanted to ask for your help after trying multiple times to make my layout work properly in responsive.

I’m building, for a client, my 1st website on Webflow, I made the desktop version but I’m having some issues with the responsive part.

The main problem is those kind of block:

And this what I wish to do for the tablet:

And finally, seeing the product appear one by one on mobile, which seems to work so far.

I am a designer but I also developed, in the past, some websites from scratch so I understand how it works but I am -stuck- to make it work on Webflow.

I tried 4 versions:

  • One working with “div block” as a container
  • One with the “Grid” (completely broken)
  • One with the “Container”
  • One with the “Columns”

“Columns” seems to work and is supported by Internet Explorer (Most of the Koreans use IE :cold_sweat: ) so I might end up working with it but I heard than Columns is not that great to work with on the long run(!?).

My purpose was to understand why the “div block” and “Container” versions are not working and to know the best practices to build a responsive website.

“Grid” don’t seems to work well on IE so I might pass this option.

Here is my read only website:
https://preview.webflow.com/preview/tecsen?utm_source=tecsen&preview=7e8594260c2394c0530a6021942648b4

Per advance, thank you very much for your help.

Kevin


kevin-quiec.fr

This should help you better learn the correct ways to structure your site. I noticed a few issues there that might cause problems Ultimate web design course | Webflow University

Thank you for your reply DFink.
I have watched all the tutorials but didn’t find the right answer for my issue.
I know there are few method to make it work but I just wanted to know which one will be the most effective. I guess, I will keep going with the “Columns” option.

For general responsiveness, I tend to use columns a lot. You can set how it acts on each viewport in the styles panel. Please let me know if theres something it’s not doing and I can try to help further.

1 Like

Thank you very much for your insight Dave :slight_smile:
I will keep going with the columns as it’s the most effective option that I try so far.

2 Likes