Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Reduce the size of image blocks on one page for mobile


StoriedCorey

Question

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 post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular 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-blo

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

That's a GREAT fix. Thank you, @bangank36!  I added the custom css snippet in the individual page code injection. Works perfectly!    

Posted Images

2 answers to this question

Recommended Posts

  • 1
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 BaNgan from 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, 360 degree photo blockSortable Table from GSheet
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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...