I’m having issues with making my webflow designs responsive. I’ve followed the tips from flux academy by putting 20px inner padding on my sections, and set my container max width to 1100px. But things still look funny:
1.) My images keep shrinking sizes automatically, while on the same device display, so I tried to constrain them with a min H and min W and max width to 100%.
I’ve tried to make everything responsive by using vh and vw but my images and buttons keep resizing automatically.
2.) Why does my webflow.io and preview look so different? I keep changing the canvas setting on the preview mode to 1279px to match the preview, but is there a setting that would more easily help me test what it would look like on different browsers, aside from copying the read-only link into different browsers and then manually changing the canvas setting to 1279 every time I am designing?
Hi @webflow-kl, your buttons are resizing, because you are using vw and vw values. You can do this of course but it’s not necessary to make it responsive. I use rem in my projects.
Is there a specific reason why you are using the larger breakpoints left of Desktop? This is making things more difficult for you at the moment. You could install the Finsweet Extension and remove the three larger breakpoints. This might solve your issue having to resize the canvas to 1279 px, which is the upper limit of the base breakpoint.
Thanks for the rem tip. I’m just never sure what I should be using…I thought vw and vh made sure every item would be responsive.
What would you recommend for the images that keep resizing automatically? I’ve been trying to use min. width 40 vw and max width 100% to stop it from changing. How can I stop it from automatically resizing?
What is the benefit of removing the larger breakpoints using the Finsweet extension? I’ve been designing only focusing on the desktop and mobile vertical. After deleting the larger breakpoints, the desktop changed to 1512px on preview mode. I thought the 2022 desktop breakpoint was 1920px - so is that what I should be using to test? What size should I use to design?
Have you heard about Client-first from @Finsweet ? The docs can help you get a good understanding of things surrounding units, responsiveness, etc. Webflow University is also a great resource for getting started.
I thought vw and vh made sure every item would be responsive.
Using vw and vh is totally fine, but can make things more complicated for you. Responsiveness can be achieved without using these specific units, which are related to the viewport.
What would you recommend for the images that keep resizing automatically? I’ve been trying to use min. width 40 vw and max width 100% to stop it from changing. How can I stop it from automatically resizing?
My guess would be to try a different unit than vw.
What is the benefit of removing the larger breakpoints using the Finsweet extension? I’ve been designing only focusing on the desktop and mobile vertical. After deleting the larger breakpoints, the desktop changed to 1512px on preview mode. I thought the 2022 desktop breakpoint was 1920px - so is that what I should be using to test? What size should I use to design?
Always start with the breakpoint called Desktop, which is marked with a star. After you are done designing for the base breakpoint, go to the smaller breakpoints and make your changes and adjustments there. I personally haven’t used the larger breakpoints so far. I don’t really see a usecase for them unless a specific layout comes up.