Jump to content

Change Page Banner height in Mobile View - smaller

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://grey-sapphire-9lfk.squarespace.com

I thought this was going to be easier than it's turning out to be...

On the desktop and tablet view - the banner image is a good height and the content fits well and works. 

However, on the mobile view, the banner is essentially the same height and therefore cuts a significant amount of the picture out. What I'm wanting is for the mobile view to respond and display at a height that is similar to the site in desktop view. 

Please see below for current desktop and mobile view and *desired* mobile view.

@tuanphan

Desktop view:

1180736730_MobileBannerView-Desktop.thumb.jpg.4257b51a019d745627c78eaeace2f155.jpg

Current Mobile view:

121221852_MobileBannerView-Mobile-Current.jpg.97ece41a1c77f365ef3796da0d2629c5.jpg

 

*DESIRED* mobile view:

1805604850_MobileBannerView-Mobile-Ideal.jpg.d8ec2c6cf4c93a67bf82733b3d837152.jpg

Password for site: summary

 

Thank you! 

Link to comment
1 hour ago, Creativore said:

Message me when you get a chance, @tuanphan - I have changed the password temporarily. Stay safe.

What is password?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution
On 5/8/2020 at 6:11 AM, Creativore said:

Commenting to bump post.

Try adding to Home  > Design > Custom CSS

@media screen and (max-width:640px) {
	body#collection-5e8ac321776c472b726bea8f {
      figure.Intro-image.loaded img {
          width: 100% !important;
          left: 0 !important;
          top: 0 !important;
          height: auto !important;
      }
      section.Intro.Intro--has-image .spacer-block {
          display: none;
      }
  }
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
13 hours ago, tuanphan said:

Try adding to Home  > Design > Custom CSS


@media screen and (max-width:640px) {
	body#collection-5e8ac321776c472b726bea8f {
      figure.Intro-image.loaded img {
          width: 100% !important;
          left: 0 !important;
          top: 0 !important;
          height: auto !important;
      }
      section.Intro.Intro--has-image .spacer-block {
          display: none;
      }
  }
}

 

Thank you @tuanphan! That works great for that page! Thank you. To apply it across the whole site, how would I add the extra collection id's to the code?

 

Thank you so much! You are a champ.

Link to comment

@tuanphan Thank you so much! I amended the code to this:

@media screen and (max-width:640px) { 
      figure.Intro-image.loaded img { 
          width: 100% !important;
          left: 0 !important;
          top: 0 !important;
          height: auto !important;
      }
      section.Intro.Intro--has-image .spacer-block {
          display: none;
      }
  }

 

Link to comment
17 hours ago, tuanphan said:

Try adding to Home  > Design > Custom CSS


@media screen and (max-width:640px) {
	body#collection-5e8ac321776c472b726bea8f {
      figure.Intro-image.loaded img {
          width: 100% !important;
          left: 0 !important;
          top: 0 !important;
          height: auto !important;
      }
      section.Intro.Intro--has-image .spacer-block {
          display: none;
      }
  }
}

 

Hey @tuanphan,

I'm trying to do the same thing on the Home page and I can't get rid of the spaces... This is the code I wrote, can you see what I'm doing wrong with this?

@media screen and (max-width:640px) { 
      figure.Index-gallery-item-image img { 
          width: 100% !important;
          left: 0 !important;
          top: 0 !important;
          height: auto !important;
      }
      section#project-gallery.Index-gallery.loaded.sqs-frontend-overlay-editor-widget-host .spacer-block {
          display: none !important;
      }
  }

Link to comment
  • 4 months later...
  • 5 months later...
  • 8 months later...
On 11/13/2021 at 3:35 AM, SSong said:

Could anyone help me to make the top banner of my home page taller with custom css? Thank you!

Desktop only or all devices?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 11/16/2021 at 10:40 PM, SSong said:

just on mobile, thank you!

Add to Design > Custom CSS

@media screen and (max-width:640px) {
section#hero-image-1 {
    min-height: 90vh !important;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 9 months later...
On 9/12/2022 at 4:09 PM, ambermadden03 said:

@tuanphan can you please help me do this on my 7.1 site? 

thebartenders.squarespace.com

PW: RosePetalMartini

Hi,

Add to Design > Custom CSS

/* resize mobile slideshow */
@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 30vh !important;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.