Streaming live at 10am (PST)

Help with responsive design


#1

I absolutely do not understand how to achieve a good display of this site on different screens.

Unfortunately, webflow smoothly bypasses the lessons of creating responsiveness in complex layouts.

Please, if you have some time, could you help in achieving the best results in responsiveness? Tips, or even videos. I am in complete confusion for several days.

1920/1120px

https://warmth-48f65e.webflow.io/bashid/bring-shirt
(ready-link) https://preview.webflow.com/preview/warmth-48f65e?utm_source=warmth-48f65e&preview=df0c22743ddbfd0241f4049fb532bdb3


#2

You’re maybe skipping an important step of the design process: pen and paper. There’s a lot of complexity on your site: different panels, and a pretty large default container that needs to be handled with care for the viewport values in between it width and 960px.

Depending on what you design on paper, you’ll build an appropriate structure to address all the responsive goals.

So in order to help you build the best structure, I think we need a sketch of your page for those different viewport width:

  • what the page should look like at viewport width = 1920
  • at 960
  • for tablet portrait
  • for smartphone landscape
  • for smartphone portrait

I don’t think Webflow is overlooking advanced techniques to address responsivity: this isn’t Webflow’s role to address all the challenges here, but it’s your role to design them and make sure the structure you’re going to build allows for building your responsive strategy. But I agree, this is the challenging part. Difficulty added because you’re working on an e-comm site, where you can’t neglect any of the elements of the page.


#3

Hello, @vincent

The thing is that for me there is a difficulty because of the big gap between 1920 and 960. Here, most likely, we need a new media query (somewhere in the middle: 1450px) and the subsequent work with flexbox.

I don’t really understand how to create such a structure, but it is possible. And I’d appreciate it if you’d give me the right decision.

Design for minimum resolutions (1920 - 960 - 750 - 450 - 240)