Join the Webstudio community

Updated last month

Logo sizes for different breakpoints.

At a glance
Hello nice people!
Since the logo has a fixed width, which works well on desktop but appears too large on mobile, and given that the clamp() function is not supported and different @media sizes cannot be used, how can I make the logo adapt to different breakpoints? Link: https://p-7e2b1640-ccea-4844-ad92-259f02b0e8f1.apps.webstudio.is/?authToken=6e7acaf1-5b6e-4d90-9530-24791c90ee36&mode=preview
R
J
O
5 comments
Heyy Jesus!

What do you mean clamp() not supported?
In webstudio you can set the size of fonts or images using clamp
Plain Text
clamp(50px, 8vw, 100px)
And here you can set different breakpoints. Default you're working in is the star breakpoint, then you have 991, 767, 479. If you need more breakpoints, you can add them on the top left and Edit Breakpoints.

Now when you select a different breakpoint, the blue changes you've made to your main breakpoint with the star will turn into orange, knowing that you can overwrite them specifically for that new breakpoint.
Attachment
image.png
Hi Ronald,

I apologize if I didn’t explain myself clearly earlier—that’s on me. Here’s the issue I’m facing: When I set the logo width to 70px for the base layout, and then adjust it to 60px for the iPad breakpoint (767px), the logo doesn’t retain the 70px width for the base layout. Instead, it adopts the 60px width I set for the iPad breakpoint.
To address this, I tried using clamp(3rem, 0.956vw + 2.694rem, 4rem) instead of fixed pixel values for the logo width, but it doesn’t seem to work as intended. How do you handle logo resizing across different breakpoints?

Thanks for your help!
@Jesus Fonte lead the question with a share link to the builder
Hey Oleg, here is the link. Thank you!
Add a reply
Sign up and join the conversation on Discord