Jump to content

Reduce the size of image blocks on one page for mobile

Recommended Posts

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!

Link to comment
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

image.thumb.png.f49455703e71aeff142d1461d61a121a.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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.