Banner Images are not painting properly on mobile

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

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

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

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

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

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