Jump to content

Help to Remove Margin from under Code Blocks & Auto-Resizing Issues

Recommended Posts

Posted

Hello all!

I'm new to the community but I'm in desperate need for a bit of help, I have searched thru old posts and I've yet to find a fix but I see others with similar issues. I'm hoping just a bit of CSS will be the trick to fix these issues but what I've tried so far has yet to work. My apologies for the long post and I truly appreciate any help you might be able to provide!!

Im facing a major issue at the moment while in the process of finally re-designing my ugly old website, it has to do with Squarespace automatically adding margin to my sections and under all of my code blocks, and sometimes even adding padding to my images(?) by expanding them to the point that it throws my design off. The biggest issue to be honest is the margin under the code blocks, it is very noticeable and the code blocks are a necessity for the time being.

Summary: Squarespace seems to like to add a large margin under code blocks and my images will resize and appear different from the published page vs the actual live page, please see the 4 examples below.
-The before screenshots are what the design looks like when I publish/save the page.
-The after screenshots are the outcome of what they look like live and includes the added margin, sometimes changing the layout drastically in some sections.

*Ex 1 - Before:

image.thumb.png.c0642e435ff381fb90d4cd0bb3d8c9f9.png

*Ex 1 - After: The middle text is an image block, and it likes to resize itself automatically upon publishing which throws off the alignment of the entire section.

image.thumb.png.cb9e5e705f62a3c85450570412ce6633.png

 

*Ex 2 - Before

image.thumb.png.4a9bf01e895df48b42db4ab3616a5957.png

*Ex 2 - After - Somehow automatically adds a small amount of margin above my images in this example.

image.thumb.png.741ac92a517e26dce838154556d9edb0.png

*Ex 3 - Before

image.thumb.png.0c67a8bbb55ae958c3557b633a243263.png

*Ex 3 - After - The margin above testimonials at the top of the section should be 1 row in height, while it has increased margin and moved the text. 

image.thumb.png.358754268bc64239265ceab1020a3b25.png

 

Now here is the one that is really bothering me. The HUGE MARGIN UNDER CODE BLOCKS!!

Its throwing off the design way worse than the above examples and I'm desperate for a solution.

*Example 4.1 Before - The bottom of the code block is as close as I can make it, and I leave one row of space between that and the section divider.

image.thumb.png.bb1f0a4c12e31a59e80840279b090803.png

 

*Example 4.2 After - Squarespace seems to add a margin block underneath the code-block (see purple in last image)

image.thumb.png.00aa0468389c1eb576886888735ce35f.png

*Example 4.3 These margin blocks or spacers, which is highlighted in purple, appears under every single one of my code blocks. 🥲

image.thumb.png.1d438358c0c143996df868dba496d815.png

 

!Question 1: Is there any way with CSS or otherwise that I can remove these unwanted margin blocks? I have tried multiple times using css setting margin to zero which were posted on this forum but none of them seemed to do the trick, I'm not really knowledgable with CSS yet.

!Question 2: Is there any way that I can stop Squarespace from automatically resizing image and other blocks from their size at time of publishing vs. the outcome on the live website?

Thank you in advance for any assistance!😊

  • Replies 1
  • Views 492
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.