Jump to content

Banner Image Won't Resize for Mobile View

Recommended Posts

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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;
}

Edited by claudiafrat
Link to comment
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;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.