Responsive scaling, rather than adaptive?

Currently, I’m using a container to hold all of my site’s content. However, if you mess with the width in the tablet preview mode, etc. the scaling will jolt suddenly at a certian point. I’m looking for the responsive design like in this gif:

http://b.fastcompany.net/multisite_files/fastcompany/inline/2014/11/3038367-inline-i-1-9-gifs-that-explain-responsive-design-brilliantly-01responsive-vs-adaptive-copy.gif

I don’t know if this is possible with containers, or if I should be using something else. Is there a way to make the content fluidly change with the window size?

This article can help you understand a little bit more.

Responsive: You design based on fixed widths
Adaptive: Is based on %

Try to use VH,VW,EM for the best design responsive practices. :wink::+1:

You can make your own ‘containers’ with a regular blank div. Really, the Webflow container’s primary styling is setting max-widths and auto left/right margins.

The webflow containers make a great big JUMP between max-width 940px on desktop down to 728px on tablet. You could try, perhaps, creating a div with auto left/right margins and a single max-width for desktop, and then NOT adding a new, smaller max-width for tablet.

Or like @VladimirVitaliyevich suggested, using viewport units to set widths.

Hope that makes sense!

The default webflow container has some extra code

1 Like

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