Jump to content

Added an image border, now I have odd spacing

Recommended Posts

Posted

I used the following code to add a border around an image: #block-yui_3_17_2_1_1691679759960_14887
{border: solid 25px #A55A04 !important;
}

I got the border, but I also got some odd spacing and offset when I view the site in the code editor and in the browser: image.thumb.png.9b57081a9803c5bebf62453fee1877ab.png

I also tried padding: o and margin: 0 to no avail. When I go to the section editor, the spacing appears to have shifted and there's an offset:
image.thumb.png.01e8ad90dbf33cdaa66d53776e2e3142.png

The screen shots are redacted. 

Thanks for any help you can provide!

  • Replies 7
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Posted

I would need to see and inspect the website to be able to identify the cause of this padding. Can you share that?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted

Things generally look quite different from the editor to browsers. Text size is much larger than it appears in the editor, images move, it's been an issue since the update to fluid. 

Posted
4 hours ago, Ziggy said:

I would need to see and inspect the website to be able to identify the cause of this padding. Can you share that?

Hi Ziggy, any luck? Thanks.

Posted

Try the following.

#block-yui_3_17_2_1_1691679759960_14887 img {

  --size : 25px;
  
  border : var( --size ) solid #A55A04;
  height : calc( 100% - ( var( --size ) * 2 ) );
  width : calc( 100% - ( var( --size ) * 3 ) );
  
  }

Adding borders to elements can be tricky depending on how they are encapsulated by other elements. I have found that in general you want to get the border on the element itself, in this case the image, or as close to up the hierarchy as possible. I have not always been successful getting a border where wanted without spacing issues.

Also putting a border on something, again depending on circumstances doesn't automatically adjust everything around it. In many cases you have to account for the space taken up by the border and make adjustments to other elements to accommodate the new border.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted
10 hours ago, creedon said:

Try the following.

#block-yui_3_17_2_1_1691679759960_14887 img {

  --size : 25px;
  
  border : var( --size ) solid #A55A04;
  height : calc( 100% - ( var( --size ) * 2 ) );
  width : calc( 100% - ( var( --size ) * 3 ) );
  
  }

Adding borders to elements can be tricky depending on how they are encapsulated by other elements. I have found that in general you want to get the border on the element itself, in this case the image, or as close to up the hierarchy as possible. I have not always been successful getting a border where wanted without spacing issues.

Also putting a border on something, again depending on circumstances doesn't automatically adjust everything around it. In many cases you have to account for the space taken up by the border and make adjustments to other elements to accommodate the new border.

Let us know how it goes.

No luck, but thanks for trying. I'm going to have to abandon the effort. It's frustrating that something so simple is made so difficult by SS. Thanks again, Creedon.

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.