Streaming live at 10am (PST)

Sizing / spacing problems


#1

Hi. I’m fairly new to Webflow. I’ve set up my site but have a couple of problems, the main one being that when I narrow the width of my screen the circular icons at the top become too close together and actually overlap. When the width becomes even narrower the issue is solved as the page then changes to my ‘tablet’ design, which has smaller icons and a different layout.
The solutions I can imagine would work are:
the circles get smaller as the page gets narrower - I’ve tried setting a maximum width and height and a minimum width and height, but the circles stay the maximum size no matter how tight they become. I’ve tried putting padding between the icons so that when they get too close the size would be forced to change, but bothing happens. I’ve tried changing the sizes to percentages, but only the placeholder is affected and not the images inside them, and when I change the height to 100% percent they end up with no height at all.
the point at which the design changes to tablet style is altered - this would be a great fix but all the articles I’ve read say that the changing points are fixed.
text on the right moves to below the icons when the page is too narrow - I would love some advice on how to make this happen.
Any advice would be appreciated!!!
Michelle


Here is my site Read-Only: https://preview.webflow.com/preview/lindengraphics-website?preview=f06940e6cabee02f8c92d88a0d3dc7a1
(how to share your site Read-Only link)


#2

Thank you to anyone who has read and thought about my issue. But I think I am on the way to solving it myself.

Thank you anyway, Michelle


#3

I see that you’ve solved it, using the responsivity rules and it almost doesn’t overlap now.

To go even further, you can use a unit that’s based on the width of the viewport: VW

instead of 200px, type 16VW for width and 16 VW for height. It means 16% of the width of the viewport (=the width of the browser window). Observe how the disc change size within a breakpoint/device, and never get a chance to get too close.

(there’s also a unit for %age of the height of the biewport, that’s VH)


#4

Thanks very much Vincent. I¹ll look into the ŒVW¹. There¹s so much to learn!
: )


#5

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