Jump to content

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

Go to solution Solved by KellyHeard,

Recommended Posts

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

 

Link to comment
  • Replies 25
  • Views 3.5k
  • Created
  • Last Reply

Top Posters In This Topic

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

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

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 7 months later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Screenshot 2023-03-16 at 5.14.01 PM.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Link to comment
  • 1 month later...
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;
}
}

image.png.b41bc6149c07aa436e41aabea3a22e0f.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 11 months later...
Posted (edited)

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

Edited by MegaKen27
Link to comment
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;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!

Screenshot 2024-05-09 at 3.34.40 PM copy.jpg

Link to comment
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...

 

Screenshot_20240509-155652.png

Link to comment
28 minutes ago, MegaKen27 said:

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

 

Screenshot_20240509-155652.png

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

 

 

Screenshot_20240509-162806.png

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.