Jump to content

Fixing my header on mobile

Recommended Posts

Site URL: http://mustard-clover-z2bx.squarespace.com%20%3Chttps/mustard-clover-z2bx.squarespace.com/%3E

Hi, I'm struggling with my header background image on my mobile.

I added this code to fix the cropping

@media screen and (max-width:640px) {
.homepage .section-background img {
    width: 150% !important;
    height: auto!important;

It worked to get my image looking right but left a grey space. How do I fill in the grey space below with the same background color as the image?

Thanks so much for any help

Site: https://mustard-clover-z2bx.squarespace.com <https://mustard-clover-z2bx.squarespace.com/>

The site password is Stephanie

Screen Shot 2021-02-10 at 3.02.42 PM.png

Link to comment
  • Replies 1
  • Views 360
  • Created
  • Last Reply

Hi. Remove above code & try this new code

/* resize home mobile banner */
@media screen and (max-width:767px) {
body.homepage #page section:first-child {
	min-height: unset !important;
	height: 30vh !important;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment


This topic is now archived and is closed to further replies.

  • 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.