Jump to content

CSS Reduce Height of Banner — Mobile

Recommended Posts

1 hour ago, spalal said:

Site URL: https://thehenleygroup.com/covid-news

The banner looks fine in desktop, but it is too high on mobile. It needs to match the height of the other pages like this one:  

https://thehenleygroup.squarespace.com/solutions

Using Inspect Elements, I can't figure out how to assign CSS to this. Thanks for your help. 

This may help

Add the code into Settings->Design->Custom Css

@media only screen and (max-width: 640px) {
  .banner-thumbnail-wrapper {
    padding: 80px 0 55px !important;
  }
}

image.thumb.png.5f78a8f4aa537d539d1050571b185801.png

Edited by bangank36
change

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

If you notice, on the other pages, the banner image shrinks and so does the size of the type.

I want the same effect for this new page that was just added.

The existing CSS

.footer-inner {
    padding: 0px 32px;
}
#footerBlocks p {
   font-size: 13px;
 }

 #preFooter {
   display: none;
 }

.collection-type-index.transparent-header.view-list .index-section:not(:first-of-type) .banner-thumbnail-wrapper, .collection-type-index.transparent-header.collection-type-page .index-section:not(:first-of-type) .banner-thumbnail-wrapper {
    padding: 20px 0;
}

#page-5cf539102abda6000194c061 p {
  font-size: 18px;
}

body a {
   text-decoration: underline !important;
 }
a {
  text-decoration-color: #134a5d !important;
 }
nav a {
     text-decoration: none !important;
}
.sqs-block-button-container--center a {
  text-decoration: none !important;
}
#intro a {
  text-decoration: none !important;
}
#bottom-hero-image a {
    text-decoration: none !important;

}

.summary-title a {
  text-decoration: none !important;
}

.image-slide-title {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #134a5d !important;
}
.summary-thumbnail-container, .summary-title-link {pointer-events: none !important;}

#our-mission .desc-wrapper p > strong {
  font-size: 20px;
  font-weight: 700;
  text-align: left;
  color: #a1bb5c !important;
  letter-spacing: .03em;
}

#our-mission .desc-wrapper p {
  font-size: 18px;
  text-align: left;
  letter-spacing: .02em;
}

.sqs-block-content a, .sqs-block-content a:visited {border: none !important;}

.back-to-top-nav{display: none;}
.collection-type-index .page-content {
    max-width: 1020px;
    margin: 0 auto;
    padding: 96px 32px 20px 32px;
}
#page {
    padding: 32px 32px 20px 32px;
}
.collection-type-index.transparent-header.view-list .index-section:not(:first-of-type) .banner-thumbnail-wrapper, 
.collection-type-index.transparent-header.collection-type-page .index-section:not(:first-of-type) .banner-thumbnail-wrapper {
    padding: 0;
}
.collection-type-index .page-content {
    max-width: 1020px;
    margin: 0 auto;
    padding: 32px 32px;
}
.homepage #testimonial .desc-wrapper p > strong{
font-size: 96px; 
  line-height: 1em;
}
  #block-yui_3_17_2_1_1559320967760_20092
{
padding-top: 0; 
}
#block-yui_3_17_2_1_1559246057539_3760
{
padding-bottom: 0; 
}
.homepage #footerBlocks:not(.empty) {
    margin-top: 0;
}
#footer .footer-inner .sqs-block-content.sqs-intrinsic
{
padding-bottom: 0 !important;
}
#footer .footer-inner .sqs-layout:not(.sqs-editing)>.sqs-row:first-child>[class*=sqs-col]:first-child>.sqs-block:last-child, 
#footer .footer-inner.sqs-layout:not(.sqs-editing) .sqs-block+.sqs-row .sqs-block:not(.float):last-child {
    padding-bottom: 0;
}
#footer #block-yui_3_17_2_1_1559158104048_14962 .sqs-block-content,
#footer #block-yui_3_17_2_1_1572528983610_8771 .sqs-block-content
{
padding-top: 17px; 
}
.social-icon-alignment-center .sqs-svg-icon--list {
    text-align: center;
}
#block-yui_3_17_2_1_1572528983610_10705 .sqs-block-content
{
padding-bottom: 35px;
}
div.footer-inner 
div.sqs-layout 
div.row.sqs-row:nth-child(2)
{
background: transparent; 
}
div.footer-inner div.sqs-layout div.row.sqs-row:nth-child(2) div:nth-child(2)
{
  width: 45%;
  text-align: right;
}

div.footer-inner div.sqs-layout div.row.sqs-row:nth-child(2) div:nth-child(3)
{
  width: 10%;
  text-align: left;
}
div.footer-inner div.sqs-layout div.row.sqs-row:nth-child(2) div:nth-child(2) p {
    font-size: 15px !important;
  text-decoration: none;
}
div.footer-inner div.sqs-layout div.row.sqs-row:nth-child(2) div:nth-child(2) p a {
  text-decoration: none;
}
#footer .html-block a, #footer .html-block a:visited {
    text-decoration: none !important;
}
.form-wrapper .field-list .field .option {
    font-size: 18px;
}
.form-wrapper .field-list .field .option {
    font-size: 18px;
}
@media only screen and (max-width: 640px)
{
.sqs-block[class*=float-right] {
    float: none;
    margin-left: 0;
}
.sqs-layout [class*=sqs-col] {
    padding-top: 0;
    padding-bottom: 0;
}
.sqs-layout:not(.sqs-editing)>.sqs-row:last-child>[class*=sqs-col]:last-child>.sqs-block:last-child {
    padding-bottom: 0;
    padding-top: 0;
}
div.footer-inner div.sqs-layout div.row.sqs-row:nth-child(2) div:nth-child(2)
{
  text-align: center;
}
div.footer-inner div.sqs-layout div.row.sqs-row:nth-child(2) div:nth-child(3) *
{
  padding: 0 !important;
  margin: 0;
}

}

 

Link to comment
4 minutes ago, spalal said:

But will that apply to only the https://thehenleygroup.com/covid-news page? I don't want to change the settings of all the other pages.

 

If you only want 1 page applied, you can edit that specific page settings, using the gear icon

image.png.11c1ffbab6ceba510be209ff8e05a5ee.png

<style>
@media only screen and (max-width: 640px) {
  .banner-thumbnail-wrapper {
    padding: 80px 0 55px !important;
  }
}
</style>

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
24 minutes ago, spalal said:

I found this on another thread, and it worked. 


<style>
  @media screen and (max-width:640px) {
  .banner-thumbnail-wrapper img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
  }
</style>

But now my font is too big. Any help?

use this for text

<style>
  @media screen and (max-width:640px) {
  	.banner-thumbnail-wrapper img {
    	width: 100% !important;
    	height: auto !important;
    	left: 0 !important;
	}
    .banner-thumbnail-wrapper .desc-wrapper p {
        font-size: 27px !important;       
    }
  }
</style>

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
2 hours ago, spalal said:

On my mobile device, I see it just fine, and also on another phone. But someone just sent me a screen capture of their phone and they see what is it in the attached.

Any help?

IMG_3890.PNG

I think because you change the image height not the container padding unlike my suggestion so on some point, the image height is shrinked but the padding of the container still take place

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Hi, I went back and used this:

<style>
  @media screen and (max-width:640px) {
  	.banner-thumbnail-wrapper img {
    	width: 100% !important;
    	height: auto !important;
    	left: 0 !important;
	}
    .banner-thumbnail-wrapper .desc-wrapper p {
        font-size: 27px !important;       
    }
  }
</style>

 

But I still get the view you see in the image on some devices. Any more help you can recommend?

Also someone mentioned that my pages that work in mobile are "wrapped in a <strong> tag," which I don't understand. Do you know anything about that?

 

Screen Shot 2020-06-19 at 3.08.44 PM.png

Link to comment

Hi dear, I suggested to reduce padding of the container

@media only screen and (max-width: 640px) {
  .banner-thumbnail-wrapper {
    padding: 80px 0 55px !important;
  }
  .banner-thumbnail-wrapper .desc-wrapper p {
    font-size: 25px !important;       
  }
  .banner-thumbnail-wrapper img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
  }
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Hi @bangank36,

I did use this code above that you gave me, but it still does not solve the problem of the new page — https://www.thehenleygroup.com/covid-news — not resizing like the page that already existed. See the attached file. And see the white space. 

You'll also see a screenshot of one of the existing pages (https://www.thehenleygroup.com/solutions) for two devices. 

Do you see the difference in the heights of the banner? The placement of the text? 

That's important because: There were no problems with the mobile view on the existing pages, like Solutions. They resize fine.

Is there a tag I'm missing to put in somewhere on the new page? Isn't there a clue in the CSS I included above to solve this problem? 

Why would I need to use a lot of CSS to get a new page to resize properly on mobile, when all the other pages do not?

Help! (And thank you.)

 

COVIDNews—after-bangank36Code.png

ExistingPage — other device.png

ExistingPage1 —  SuccessStories.png

Link to comment

What is different here, is the dimension of your image

/solutions: 1500 x 1126

/testimonials: 1500 x 998

Your new page

/covid-news: 1500 x 750

I think the shorter height of the new image make it cut off on mobile, you can try to change ratio by reduce it's width to make closer ratio to the current old pages

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 5 months later...
7 hours ago, Nipper said:

Hi,

I'm having roughly the same issue but the code doesn't seem to be working for me... I want to adjust my sections, one is a video and one is an image and I need them both to fit to the width of a mobile screen. Any suggestions? 

URL: https://raspberry-coyote-6gss.squarespace.com/

Password: lngtv1

Screenshot 2020-12-11 at 16.39.02.png

Screenshot 2020-12-11 at 16.39.10.png

You can consider upload new image and use custom css to replace the current one on mobile

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 weeks later...
  • 2 weeks later...

@Nipper Add this to Design > Custom CSS to resize banner image on mobile

/* resize mobile banner */
@media screen and (max-width:767px) {
[data-section-id="5fd37a0b26fa4758b5b58e07"] {
    min-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.