Hello,
I am trying to create a home page and the background logo doesn’t look very good on mobile vertical because the image just crops.
How can I achieve a look that displays the whole logo without adding unnecessary padding?
I appreciate your time and expertise!
Here is my site Read-Only: Webflow - Super Group
(how to share your site Read-Only link)
Normally you’d just set the height differently at each breakpoint to create a sizing you like.
In this case you have the hero section set to flex which complicates that. I’d probably change that.
If you really want to you can use custom code to set the CSS aspect-ratio of the element, but I typically reserve that for very special uses where there is no alternative.
Which elements are you talking about specifically? I thin the breakpoint solution seems the easiest to implement.
Hero section is flexxed.
Home hero banner needs a breakpoint-specific height to support your image scaling.
However it looks like you might be trying to create a 100vh layout made of up of your logo and slogan. If that’s the case you’d need a different approach to maintain the 100vh and scale the logo simultaneously.
If that’s your objective I’d focus on the logo instead.
You’d need to separate your logo from the background, set the background to cover, and then layer the logo in an image element above it, centered in that frame.
Thank you, that worked like a charm! 
