How do I keep the full banner image in mobile view?

Site URL: https://conch-buttercup-ghb2.squarespace.com/config/

Hi, 

I have added an image to the top banner on the desktop view but in mobile view when it resizes to fit the screen it shows just a section of the image. Is there a way I can get the banner to resize but keep the full image?

I looked at the square space guides and they say to resize my images to betwrrn 1500 and 2500 pixels wide but this is not working. Looks great on the other image placements but not in the banner.

Many thanks, 

Kelly

Add to Home > Design > Custom CSS

/* resize home mobile banner */
@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: unset;
    height: 60vh;
}
}

Hello,

I have the same issue.  However, the banner is not on the homepage, but rather on the main blog page.  How might I find the section for this, please?  

The site runs on 7.1 if that matters.

Thank you.

On 5/2/2022 at 10:03 AM, 1288webDevelopment said:

Hello,

I have the same issue.  However, the banner is not on the homepage, but rather on the main blog page.  How might I find the section for this, please?  

The site runs on 7.1 if that matters.

Thank you.

 

With blog page, use this

/* resize home mobile banner */
@media screen and (max-width:767px) {
body[class*="type-blog"] #page section:first-child {
    min-height: unset;
    height: 60vh;
}
}

Hi - I have the same issue too on the homepage, but I had to add a section before the banner image to make it disappear from my menu bar.

This code (as above) doesn't work for this particular issue:

/* resize home mobile banner */
@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: unset;
    height: 60vh;
}
}

Would you be able to help?

https://caribou-hexahedron-bgp7.squarespace.com/

pw: doodle

5 hours ago, doodle123 said:

Hi - I have the same issue too on the homepage, but I had to add a section before the banner image to make it disappear from my menu bar.

This code (as above) doesn't work for this particular issue:

/* resize home mobile banner */
@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: unset;
    height: 60vh;
}
}

 

Would you be able to help?

 

https://caribou-hexahedron-bgp7.squarespace.com/

pw: doodle

Use this CSS

@media screen and (max-width:767px) {
[data-section-id="62c31230655ca264087fd6cb"] {
    min-height: unset !important;
    height: 35vh;
}
}

@tuanphan

Hi, I am having a similar issue with the banner ("Celebrating 65 Years") on the homepage not resizing correctly on mobile.  I have checked all the solutions on this forum (and a few others via Google) with no luck.  Any help would be great, thanks!

SITE: https://camprivercrest.squarespace.com/config/

On 3/2/2023 at 6:13 AM, jjhse11 said:

@tuanphan

Hi, I am having a similar issue with the banner ("Celebrating 65 Years") on the homepage not resizing correctly on mobile.  I have checked all the solutions on this forum (and a few others via Google) with no luck.  Any help would be great, thanks!

SITE: https://camprivercrest.squarespace.com/config/

Add to Design > Custom CSS

@media screen and (max-width:640px) {
section#welcome figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#welcome {
    min-height: unset !important;
    height: 200px;
}
}

@tuanphanThis helped, thank you so much!!

Hi!

You just helped me with a website (camprivercrest.org) and I am super grateful!  I had another question: on the homepage (linked), under our "65 Years" logo, we have 3 statements with buttons: our team is wondering if there is CSS code to move those buttons closer to the statements they are related to?

Any help would be awesome - thank you!

Jeremiah

On 3/9/2023 at 6:03 AM, jjhse11 said:

Hi!

You just helped me with a website (camprivercrest.org) and I am super grateful!  I had another question: on the homepage (linked), under our "65 Years" logo, we have 3 statements with buttons: our team is wondering if there is CSS code to move those buttons closer to the statements they are related to?

Any help would be awesome - thank you!

 

Jeremiah

Add to Design > Custom CSS

/* Buttons under 65 years logo */
div#page-5ec5e20e9c543278c936d262 .button-block {
    padding-top: 0px;
}

It didn't seem to work for me, sorry.  Do you want to look at the CSS?  Here's where I put it in the CSS.

On 3/17/2023 at 5:14 AM, jjhse11 said:

It didn't seem to work for me, sorry.  Do you want to look at the CSS?  Here's where I put it in the CSS.

Can you send all current code in CSS box? It looks like your CSS line 34 has an error

@tuanphan

Here it is - thanks so much for helping!!

p, h1, h2 {
      -webkit-hyphens: none !important;
         -moz-hyphens: none !important;
          -ms-hyphens: none !important;
              hyphens: none !important;
}

h4 { 
  color: #FFFFFF;
  font-family: Helvetica;
  font-weight: 500;
  font-size: 30px;
}

/* CSS FOR TABLET AND MOBILE */
@mobile:          ~"only screen and (max-width: 540px)";
@tablet:   ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
  
.sqs-block-image {
width: 80%;
margin: 0 auto;
}

/* Insert Code for Mobile Above This Line */
}

@font-face {
font-family: 'Helvetica';
src: url(https://static1.squarespace.com/static/5c8bf8884d546e57d8241842/t/5ea32463a5ff753fece0571f/1587749987431/helvetica_light.ttfhttps://static1.squarespace.com/static/5c8bf8884d546e57d8241842/t/5ea32463a5ff753fece0571f/1587749987431/helvetica_light.ttfhttps://static1.squarespace.com/static/5c8bf8884d546e57d8241842/t/5ea32463a5ff753fece0571f/1587749987431/helvetica_light.ttf) ;
}
h4 {font-family: 'Helvetica', !important;
}

.scenario {
  font-style: Helvetica;
  text-aligh: left;
  font-weight: 300;
  font-size: 30px;
  line-height: 1em;
  color: #FFFFFF;
  text-align: center;
}
.sqs-block-html .sqs-block-content *:not(h1):not(h2):not(h3) {

border: none !important;

}

@media screen and (max-width:640px) {
section#welcome figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#welcome {
    min-height: unset !important;
    height: 200px;
}

/* Buttons under 65 years logo */
div#page-5ec5e20e9c543278c936d262 .button-block {
    padding-top: 0px;
}

You need 2 } }

Wow, that did it!!  Thank you!

Same issue, I am not sure how to get the banner to resize correctly on mobile. I have tried the code above. Help?

Banner photo is at bottom of page - cuts off on mobile. 

https://www.alliancenewengland.org/

On 5/24/2023 at 10:48 PM, Hollyska said:

Same issue, I am not sure how to get the banner to resize correctly on mobile. I have tried the code above. Help?

Banner photo is at bottom of page - cuts off on mobile. 

 

https://www.alliancenewengland.org/

Add to Design > Custom CSS

@media screen and (max-width:640px) {
section#closing-home figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
section#closing-home {
    min-height: unset !important;
    height: 200px;
}
}

Hello, can someone help me with a related issue (v7.0) - I have this page https://megasupplypro.com/shower-panel-sasha and I need the top banner to be visible (the whole image) on all window sizes: so small window would proportionally shrink the banner, and large window would just enlarge the image. But in all cases I need the entire image to be visible. Right now it cuts on top and bottom. And I only need this behavior for this specific page and not other pages.

Thank you

On 5/7/2024 at 3:37 AM, MegaKen27 said:

Hello, can someone help me with a related issue (v7.0) - I have this page https://megasupplypro.com/shower-panel-sasha and I need the top banner to be visible (the whole image) on all window sizes: so small window would proportionally shrink the banner, and large window would just enlarge the image. But in all cases I need the entire image to be visible. Right now it cuts on top and bottom. And I only need this behavior for this specific page and not other pages.

Thank you

You can use this code to Website > Website Tools > Custom CSS

body#collection-662706eb09ae990a9dd9f175 {
.banner-thumbnail-wrapper {
    min-height: 300px !important;
}
figure#thumbnail img {
    top: 0px !important;
}}

10 hours ago, tuanphan said:

You can use this code to Website > Website Tools > Custom CSS

body#collection-662706eb09ae990a9dd9f175 {
.banner-thumbnail-wrapper {
    min-height: 300px !important;
}
figure#thumbnail img {
    top: 0px !important;
}}

 

Hmm.. this made it better, it's showing the whole image in some window sizes, but not all...

Thank you though!

Oh the min height should be like 500px then it works. Thanks!

11 hours ago, tuanphan said:

You can use this code to Website > Website Tools > Custom CSS

body#collection-662706eb09ae990a9dd9f175 {
.banner-thumbnail-wrapper {
    min-height: 300px !important;
}
figure#thumbnail img {
    top: 0px !important;
}}

 

oh but this doesn't work with mobile...

28 minutes ago, MegaKen27 said:

oh but this doesn't work with mobile...

 

I was messing around trying to figure it out and came to this code:

@media screen and (max-width:640px) {
body#collection-662706eb09ae990a9dd9f175 figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
}

which does make the banner how I want it on mobile.... but....