Jump to content

Manual section padding adjustment

Go to solution Solved by sanchez_77,

Recommended Posts

I have a site, with a section block set to the following:

- Fill screen
- Height = L
- Alignment = centered

On my iPad, Macbook, Surface and iMac it works perfectly but on the client's machines running the following resolutions, content in the section is cut-off at the bottom:


Clearly these screens aren't the best spec but they are large company issue so there's very little I can do about them. Using inspector in FireFox, it looks like the padding on the section when set to 'L' is 10vmax, however changing it to either 2, or 3 would probably make enough of a difference to see all the content on the screen. I know I should be able to do this via CSS but I can't get it working. I know by changing the height to either 'S', or 'M' reduces the padding however my video content then doesn't fill the screen on larger monitors.

Below is the code I have:

<div id="yui_3_17_2_1_1674730387775_310"

.page-section.vertical-alignment--middle:not(.content-collection):not(.gallery-section):not(.user-items-list-section):not(.editmode-changing-rowcount).section-height--large > .content-wrapper {
  padding-top: 3vmax;
  padding-bottom: 3vmax;


Link to comment
  • Replies 1
  • Views 163
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

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.