Jump to content

Banner Images are not painting properly on mobile

Recommended Posts

Site URL: http://www.cielolodge.com

Hi there -

My banner images are not displaying properly on mobile.  Only the top part of the image is displayed - not the whole image. On the laptop/desktop the images are fine.  I am using the Maple template in the Brine family.  Examples are attached. Is there a way to dynamically resize images for mobile?  If yes, what is the code and where exactly would I put it?

Thank you so much for your help!!

181604646_Squarespace-desktop.thumb.png.90714ec871891592943537e640714351.png

Squarespace - mobile.png

Link to comment
13 hours ago, CieloLodge said:

Site URL: http://www.cielolodge.com

Hi there -

My banner images are not displaying properly on mobile.  Only the top part of the image is displayed - not the whole image. On the laptop/desktop the images are fine.  I am using the Maple template in the Brine family.  Examples are attached. Is there a way to dynamically resize images for mobile?  If yes, what is the code and where exactly would I put it?

Thank you so much for your help!!

181604646_Squarespace-desktop.thumb.png.90714ec871891592943537e640714351.png

Squarespace - mobile.png

Add to Design > Custom CSS

/* Press page mobile */
@media screen and (max-width:767px) {
body#collection-5fcfccc45dba994a4884cba4 .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
}

 

Edited by tuanphan
enter wrong code for question

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

Thank you so much - that worked!  Now I am wondering how to do that for all of my pages.

Would the code look like what is below?

Or do I have to add some kind of <start >  <stop> tag between the code sections?

I tried to do it for my Gallery page and the image is still getting cut off on mobile.

Thank you so much for your help!!

 

/* Press page mobile */
@media screen and (max-width:767px) {
body#collection-5fcfccc45dba994a4884cba4 .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
}
/* Gallery */
@media screen and (max-width:767px) {
body#collection-#collection-5ce2e3bea7bed400017e55d3 .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
}

Link to comment

Ignore what I just wrote - I see they typo (2 #collection) - so now it looks like this and it is working.

Thank you so much!!!  This is such a huge help!!

 

/* Press page mobile */
@media screen and (max-width:767px) {
body#collection-5fcfccc45dba994a4884cba4 .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
}
/* Gallery */
@media screen and (max-width:767px) {
body#collection-5ce2e3bea7bed400017e55d3 .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
}

Link to comment
16 hours ago, CieloLodge said:

Ignore what I just wrote - I see they typo (2 #collection) - so now it looks like this and it is working.

Thank you so much!!!  This is such a huge help!!

 

/* Press page mobile */
@media screen and (max-width:767px) {
body#collection-5fcfccc45dba994a4884cba4 .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
}
/* Gallery */
@media screen and (max-width:767px) {
body#collection-5ce2e3bea7bed400017e55d3 .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
}

You can also combine 2 code to make code shorter

/* Press gallery pages mobile */
@media screen and (max-width:767px) {
body#collection-5fcfccc45dba994a4884cba4, body#collection-5ce2e3bea7bed400017e55d3 {
.Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !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

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.