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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.