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

CSS Reduce Height of Banner — Mobile


spalal

Question

  • Answers 14
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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;

Posted Images

14 answers to this question

Recommended Posts

  • 0
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 BaNgan from 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, Advanced Product Delivery Date Time PickerGeolocation Automatic Currency Converter, Sortable Table from GSheet
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 post
  • 0

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 post
  • 0
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 BaNgan from 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, Advanced Product Delivery Date Time PickerGeolocation Automatic Currency Converter, Sortable Table from GSheet
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 post
  • 0

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.

Link to post
  • 0

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?

Link to post
  • 0
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 BaNgan from 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, Advanced Product Delivery Date Time PickerGeolocation Automatic Currency Converter, Sortable Table from GSheet
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 post
  • 0

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

Link to post
  • 0
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 BaNgan from 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, Advanced Product Delivery Date Time PickerGeolocation Automatic Currency Converter, Sortable Table from GSheet
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 post
  • 0

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

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 BaNgan from 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, Advanced Product Delivery Date Time PickerGeolocation Automatic Currency Converter, Sortable Table from GSheet
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 post
  • 0

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

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 BaNgan from 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, Advanced Product Delivery Date Time PickerGeolocation Automatic Currency Converter, Sortable Table from GSheet
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 post

Create an account or sign in to comment

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


×
×
  • Create New...