CSS Reduce Height of Banner — Mobile

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. 

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

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

}

The other pages that were already in existence are:

https://www.thehenleygroup.com/testimonials

https://www.thehenleygroup.com/solutions

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

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

Thank you. I was looking for that everywhere, where to use Page Injection.

I used the code, though, and it did not change the height of the image.

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?

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>

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?

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?

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

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?

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

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

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

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

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

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

On 12/11/2020 at 11:41 PM, bangank36 said:

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

Can you provide the custom CSS please?

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

On 1/2/2021 at 7:51 AM, tuanphan said:

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

 

Thanks! Worked great