Jump to content

Videos & Images The Exact Height of Sections - Clean Up Gaps?

Go to solution Solved by VisualNotes,

Recommended Posts

Is there any way to size images and videos to be the exact height of a section? I'm trying to make the website look cleaner and more responsive by removing the gaps between the content and the edge of its respective section. 

I input some custom code I found on the forums to re-size videos, however, I'm still getting gaps between sections.  Especially across browsers and device sizes. I've attached screenshots below. 

Website link: https://mj-photo.squarespace.com/ Password: Madeline

The issue is very noticeable among images and videos on the home page. 

Any insight is appreciated!! 

Screenshot 2023-04-10 at 12.38.06 PM.png

Screenshot 2023-04-10 at 12.38.13 PM.png

Screenshot 2023-04-10 at 12.38.56 PM.png

Edited by Izabellabuzogany
Link to comment
  • Replies 6
  • Views 438
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

I was able to place images in multiple sections with background colors with no gap at all. 
However, this only works if you have disabled the "Fill screen" option for these sections. This is because the minimum value for fill screen height is always 1 and not 0. In your case this might be the cause for that small gap that is visible between the edge of the image and the edge of the section. If not, I suppose it's a custom CSS issue.

image.thumb.png.029b24bfbf0db0ac961aba1d1ccec17d.png

I just saw that you can set the height value to 0 by typing, then even with the fill screen option enabled the gaps are gone.

image.thumb.png.27fcbf099debbfa8e7dbf7df3ce2b6e4.png

 

Edited by VisualNotes
Sceenshot added.
Link to comment

Upon further investigation, I saw that the reason for the remaining gap below the video is an inline style that SQ puts in here which is inexplicable to me. 
It even needs the !important property for the custom CSS rule to eliminate the issue:

.embed-block-wrapper {padding-bottom: 0 !important;}

image.thumb.png.0f8a880c0813c2cc22d173464b746db5.png

 

image.thumb.png.4b1307f0c4ce6c8216bdfb86d785e2f6.png

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.