Resize Index Images for Mobile

Site URL: https://www.davidwilson-brown.com/1288-productions

Hello,

I'm trying to resize the images on my index pages for mobile screens.  I've tried a few pieces of code in this thread, but I'm not sure if I'm grabbing the correct id.  Here's the code that I'm using and images for reference.  Thanks for the help.

Using Find Squarespace IDs and this is what I get:  #collection-62112bb786cd8c28fd38ee6f.  Am I supposed to include everything from this below, or just the id number itself?

@media screen and (max-width:767px) {
  [data-section-id=-62112bb786cd8c28fd38ee6f]{
    width: 100% !important;
    height: auto !important;
  }
}

Add to Design > Custom CSS

@media screen and (max-width:640px) {
div#index-section-1288-about img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
div#index-section-1288-about {
    height: 190px !important;
}
}

@tuanphan Thank you so much.  I found out how to target that photo directly.  I am doing the same with other index photos on various pages.  

Now, I am ending up with gray space underneath similar to this post:

I used the suggestion you gave another user (code snippet is below)

/* resize home top mobile banner */

@media screen and (max-width:767px) {

  [data-section-id="60ce060627e9d9469bf70cc3"] { min-height:      unset !important; height: 60vh;

  }

}

but changed the data-section-ids to: 

#block-yui_3_17_2_1_1645499556465_11423

#block-yui_3_17_2_1_1645499556465_14164

which now reads:

@media screen and (max-width:767px) {

  [data-section-id="block-yui_3_17_2_1_1645499556465_11423"] { min-height:      unset !important; height: 60vh;

  }

[data-section-id="block-yui_3_17_2_1_1645499556465_14164"] { min-height:      unset !important; height: 60vh;

  }

}

This of course is not working.  I was wondering where you were getting the id from the dev tools.

Thanks again for your help.  I really appreciate it.

14 hours ago, 1288webDevelopment said:

@tuanphan Thank you so much.  I found out how to target that photo directly.  I am doing the same with other index photos on various pages.  

Now, I am ending up with gray space underneath similar to this post:

 

I used the suggestion you gave another user (code snippet is below)

/* resize home top mobile banner */

@media screen and (max-width:767px) {

  [data-section-id="60ce060627e9d9469bf70cc3"] { min-height:      unset !important; height: 60vh;

  }

}

but changed the data-section-ids to: 

#block-yui_3_17_2_1_1645499556465_11423

#block-yui_3_17_2_1_1645499556465_14164

which now reads:

@media screen and (max-width:767px) {

  [data-section-id="block-yui_3_17_2_1_1645499556465_11423"] { min-height:      unset !important; height: 60vh;

  }

 

[data-section-id="block-yui_3_17_2_1_1645499556465_14164"] { min-height:      unset !important; height: 60vh;

  }

}

This of course is not working.  I was wondering where you were getting the id from the dev tools.

Thanks again for your help.  I really appreciate it.

Use this tool to find data section id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

@tuanphan  Thank you so much.  I use that tool also, but I think I'm calling the wrong ID then.  There's still gray space underneath the footer.

Here's the code I'm using:

@media screen and (max-width:640px) {
div#index-section-1288-about img {
width: 100% !important;
left: 0 !important;
height: auto !important;
}
div#index-section-1288-about {
height: 190px !important;
}
div#index-section-paper-on-audio img {
width: 100% !important;
left: 0 !important;
height: auto !important;
}
div#index-section-paper-on-audio {
height: 190px !important;
}
  div#block-yui_3_17_2_1_1645499556465_14164{
    min-height: unset !important;
    height: 60vh;
}
}

On 8/7/2022 at 1:16 PM, 1288webDevelopment said:

@tuanphan  Thank you so much.  I use that tool also, but I think I'm calling the wrong ID then.  There's still gray space underneath the footer.

Here's the code I'm using:

@media screen and (max-width:640px) {
div#index-section-1288-about img {
width: 100% !important;
left: 0 !important;
height: auto !important;
}
div#index-section-1288-about {
height: 190px !important;
}
div#index-section-paper-on-audio img {
width: 100% !important;
left: 0 !important;
height: auto !important;
}
div#index-section-paper-on-audio {
height: 190px !important;
}
  div#block-yui_3_17_2_1_1645499556465_14164{
    min-height: unset !important;
    height: 60vh;
}
}

Try this new code

@media screen and (max-width: 640px) {
    div#index-section-1288-about img, div#index-section-paper-on-audio img {
        width: 100% !important;
        left: 0 !important;
        height: auto !important;
    }

    div#index-section-1288-about {
        height: 190px !important;
    }

    div#index-section-paper-on-audio {
        height: 200px;
    }
    div#index-section-paper-on-audio .index-item-text-wrapper.reveal-index-title {
    justify-content: flex-start;
}

body#collection-62112bb786cd8c28fd38ee6f, .index-section article {
    background-color: white !important;
}
}

On 8/10/2022 at 7:59 AM, tuanphan said:

Try this new code

@media screen and (max-width: 640px) {
    div#index-section-1288-about img, div#index-section-paper-on-audio img {
        width: 100% !important;
        left: 0 !important;
        height: auto !important;
    }

    div#index-section-1288-about {
        height: 190px !important;
    }

    div#index-section-paper-on-audio {
        height: 200px;
    }
    div#index-section-paper-on-audio .index-item-text-wrapper.reveal-index-title {
    justify-content: flex-start;
}

body#collection-62112bb786cd8c28fd38ee6f, .index-section article {
    background-color: white !important;
}
}

 

@tuanphan  Thank you so much for your help.