Streaming live at 10am (PST)

Content unresponsive to sizing


#1

Hi,

After spending the day trying to figure out how to fix my content where I want it while trying to get it to resize to become responsive when changing device views i’ve decided to give in and ask for some help.

Attached is how I would like it to stay looking or there abouts when scaling, any advice would be greatly appreciated.

Issue on products page
Here is my site Read-Only: https://preview.webflow.com/preview/bates-health-site?preview=d1e396926132bddda5de83d5c555d170
([how to share your site Read-Only link][2])

Cheers
D.M


#2

HI @Dominicgm

Welcome to the Webflow Community. :+1:

In short, you’ve given your elements a pixel width. If you’re categorically telling an element to be 800pixels, it’s going to be 800 pixels no matter what the screen size is. It’ll be like telling a 10 inch piece of wood to fit into an 8 inch hole, there’s going to be problems. )There’s a joke there somewhere) :speak_no_evil:

This is where %'s and VW measurements can come in really useful. If you tell an element to be 60VW, this means it will be displayed at 60% of the viewport screen it is on (no matter what it’s size) so, 60% of an iPhone screen, or 60% of a 27" desktop. 60% is a relative measurement.

This can make things fit in proportion better thus creating a responsive site.

The layout you have on desktop, just isn’t going to work on mobile, so flex box can come in really useful. www.flexboxgame.com is a worthy investment of your time! (I’ve said this a lot this evening on the forum, but it really is!) Flexbox can really help you layout elements, then switch them around easily for different breakpoints. It’s a very powerful tool to learn.

Take a look at this article on the University too, to help you better understand responsiveness with Webflow…

Hope that helps!