Jump to content

Can An Image Block Be Treated Like This?

Recommended Posts

Hi Friends,

I would like to make this page ...

1.thumb.jpg.ec3b54d67ef4421d6432c983de5e6e01.jpg

... look like this:

2.thumb.jpg.2a136ab0683506b6e2dfd4ec75d8eee8.jpg

Is there a way to do that? (Please also note the inset-style thick, white border around.)

This must be a very easy feature to implement into the Squarespace interface, but I'm tired of waiting for that to happen 🙂

Any help would be greatly appreciated! 🙂

Thank you in advance,
Ozan

Link to comment
  • Replies 5
  • Views 577
  • Created
  • Last Reply

I can help you create the specific custom css for that block to make image expand 100% width

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Thank you so much for your kind message @bangank36.

My page is here and the password is test.

I assume that there will be a specific section ID involved in this. Would you mind explaining to me (and others who might be interested) how to repeat the same action for other image blocks?

Thank you again in advance for your help.

Link to comment

I will answer you shortly

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Hi ItsOK

1. I use chrome extension named "Find Squarespace Ids" that helps indentify blocks id to apply the css

2. Copy the section id and replace with ones in this snippet below, location Settings->Design->Custom Css

In this case it is 

section[data-section-id="5f9a10ff325d596dd6c66894"]

image.thumb.png.45c99c04f71a3f7c360d196ed8a5787c.png

section[data-section-id="5f9a10ff325d596dd6c66894"] .content-wrapper {
  padding: 0 !important;
  margin: 0 !important;
}
section[data-section-id="5f9a10ff325d596dd6c66894"] .sqs-block-image {
  padding: 0 !important;
}
section[data-section-id="5f9a10ff325d596dd6c66894"] .image-card-wrapper {
  padding-top: 6.6vw;
  padding-right: 6.6vw;
  padding-bottom: 6.6vw;
}
section[data-section-id="5f9a10ff325d596dd6c66894"] .design-layout-card .intrinsic img {
  height: 100% !important;
}
section[data-section-id="5f9a10ff325d596dd6c66894"] .design-layout-card .image-inset {
  height: 100% !important;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.