Banner Image Won't Resize for Mobile View

Site URL: https://bozoo.it/

Site URL: https://bozoo.it/

Password:  Bozooimilioni

Hello, 

I am trying resize the header image for the mobile and tablet. I've tried several custom code published in the forum but nothing works for my website.
Also the shopping icon is cut on the right, how can i fix that?

Thank in advance for the help! 

Hi @claudiafrat, I'm assuming that what you want is the image text (BOOZO) to be visible and readable on mobile. What you need to do is to adjust the section height  to be responsive to the viewport width, this guide should be exactly what you need:

https://www.will-myers.com/articles/prevent-background-images-from-cropping-in-squarespace-71

This would be how you might adjust the code to suit your page:

[data-section-id="62d2c41f3af73060d646c0d5"] {
  min-height:clamp(0px, 56.25vw, 50vh) !important;
}

For the shopping icon getting cut off, you may want to adjust the mobile logo to be a little smaller in the sytle settings.

Hi @Ziggy

thank you for the help! I've solved the shopping icon problem. 
However I've tried to adapt the Aspect ratio value as the video suggested but nothing is changing 🤔.

I'm using this code 

section[data-section-id="62d2c41f3af73060d646c0d5"] {
  min-height:clamp(0px, 75vw, 100vh) !important;
}

24 minutes ago, claudiafrat said:

Hi @Ziggy

thank you for the help! I've solved the shopping icon problem. 
However I've tried to adapt the Aspect ratio value as the video suggested but nothing is changing 🤔.

I'm using this code 

section[data-section-id="62d2c41f3af73060d646c0d5"] {
  min-height:clamp(0px, 75vw, 100vh) !important;
}

You need to remove "section", try using exactly this in to your Custom CSS and make sure there's no other code targeting the section:

[data-section-id="62d2c41f3af73060d646c0d5"] {
  min-height:clamp(0px, 56.25vw, 50vh) !important;
}

I think the only efficient way to help you would be to edit your site directly, would you be able/willing to send a contributor invitation?

@Ziggy

thank you for the support and the help!

No problem for the contribution invitation, the only thing i need you email to send you the invitation. 
 

Please have a look now, I've solved the problem, it seems that it wasn't working because of the empty rows of "content" in the section, not only on desktop, but with Fluid Engine, I had to remove all (but one) of the rows so that they didn't interfere with the CSS.

I might suggest that you alter your image to have more blank purple wall at the top so that on mobile the image can be taller and the flower won't go behind the header logo. If you do this you can adjust the 56.25vw to be a larger value.

Please upvote if this was helpful!