▼
Streaming live at 10am (PST)

Can't use radius tool with tablet image

Design help General
#1

I’m completely new to designing websites, so trying to grapple with everything is a bit overwhelming at the moment.

On the “The Crew” section of the website, the picture on desktop is nicely rounded with the radius tool, but on the tablet, it’s just a sharp rectangle.

Also, I’m not sure if there’s a way for me to change the grid so that it only changes for the tablet and not for the desktop, but whenever I try to drag a heading or move the text/pictures around on the tablet version, it completely messes it up for desktop.

Here’s a read-only version of my website so far: Webflow - Breakin' Boundaries 2

Thank you!

#2

Hi @conwayxu, the 50px of padding on each side of the image is what is cutting off the rounded corners. To keep the rounded corners and the space on each side, remove the padding then set the image width to 80%, then set the right and left margin to auto.

Changes made in the navigator alter the HTML of your website and this effects all breakpoints. Instead, give a class to the element you want to change, then adjust that class for each view. You can use Display: None to hide an element on a particular breakpoint, then set it back to Block when you want it to show up. The same goes for grids - simply give the grid a class, then you can adjust its properties (columns, rows, gap, etc.) for each breakpoint.

Hope that helps!

1 Like
#3

Thank you so much for the help @Tye!

I’m still stuck on trying to assign an additional class to the “about grid” - I tried to give a class named “tablet” for the about grid in the tablet breakpoint, but this class affects all of the breakpoints.

#4

Adding or removing a class from one breakpoint will add or remove it from all other breakpoints too. The smaller screen sizes inherit styling properties from their nearest styled parent. So, make sure you style desktop view first, then work your way down in screen size. If a property in the style panel has an orange background, that means it is inheriting that style, whereas blue backgrounds mean a property has been overwritten for that particular breakpoint.

I’d recommend watching some of the free courses on Webflow University. It’s a great resource for learning about classes and responsive design in Webflow. Maybe start with the Webflow 101 crash course.

Good luck!

1 Like