Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Change Page Banner height in Mobile View - smaller


Go to solution Solved by tuanphan,

Question

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 post
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Can you share link to page in screenshot?

What is password?

Try adding to Home  > Design > Custom CSS @media screen and (max-width:640px) { body#collection-5e8ac321776c472b726bea8f { figure.Intro-image.loaded img { width: 100% !impor

Posted Images

11 answers to this question

Recommended Posts

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
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 post
  • 0

@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 post
  • 0
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 post

Create an account or sign in to comment

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


×
×
  • Create New...