Reduce the size of image blocks on one page for mobile

Site URL: https://www.debbiemarkswellness.com/

Hi, All...

I've reduced the size of my image blocks site-wide for mobile using this CSS: 

@media only screen and (max-width: 640px) {.sqs-block-image {
width: 80%;
margin: 0 auto;
  }}

I want to further reduce the size of image blocks on the following sub-pages under RESOURCES; 1. Health & Wellness, 2. Yoga Teachers, 3. Parents. 

Is there a way to reduce the size of image blocks on those 3 specific pages without disrupting the CSS that reduces image blocks site wide?

Thanks!

28 minutes ago, StoriedCorey said:

Site URL: https://www.debbiemarkswellness.com/

Hi, All...

I've reduced the size of my image blocks site-wide for mobile using this CSS: 

@media only screen and (max-width: 640px) {.sqs-block-image {
width: 80%;
margin: 0 auto;
  }}

I want to further reduce the size of image blocks on the following sub-pages under RESOURCES; 1. Health & Wellness, 2. Yoga Teachers, 3. Parents. 

 

Is there a way to reduce the size of image blocks on those 3 specific pages without disrupting the CSS that reduces image blocks site wide?

 

Thanks!

You can use this extension to get the subpage id to make the style specific for them: "Find Squarespace Ids"

@media only screen and (max-width: 640px) {
  #collection-5fba9bfd8aa7f2271d97c313 .sqs-block-image {
    width: 80%;
    margin: 0 auto;
  }
}

OR, you can add the custom css snippet in individual page code injection, WITHOUT knowing the page id

Pages -> Gear Icon next to the page -> Advanced

<style>
@media only screen and (max-width: 640px) {
  .sqs-block-image {
    width: 80%;
    margin: 0 auto;
  }
}
</style>

Details with video instruction can be found

Squarespace 101: How to inject custom code – BeyondSpace

That's a GREAT fix. Thank you, @bangank36! 

I added the custom css snippet in the individual page code injection. Works perfectly!