Jump to content

Adjust padding/margins on sections

Recommended Posts

Site URL: https://star-harbour-sq.squarespace.com/

Password: pass

I was trying to remove the padding on the first two sections of the home page so that the "star" and "anchor" meet. Basically I'm trying to recreate what you see here: http://starandharbour.com/ (This is my current Joomla site, and I'm attempting to more or less recreate it on Squarespace.)

I have following code in the Custom CSS. This helped (I'm not sure it's the best solution).

The star and anchor are svg files placed as urls with a code block, each it its own section. I've adjusted the bottom padding on these sections to lift the pieces up to where I want them to be.

However, two things:

1. in the mobile view, the star and anchor shift down a few pixels, and I'm not sure how to fix that.

2. in the mobile view, I want the banner image to be less than 100% vh of the screen because currently, on a phone view, the controls hide the star.

 

/*HOME SECTION STAR*/

[data-section-id="5f0caf24192e11063c70177e"] 
.content-wrapper {
    padding-top: 0px !important;
    padding-bottom: 165px !important;
}

[data-section-id="5f0caf24192e11063c70177e"] {
	min-height: 120px !important;
	height: 120px !important;
}

/*HOME SECTION ANCHOR*/

[data-section-id="5f0caf6130005d2344dd262c"] 
.content-wrapper {
    padding-top: 0px !important;
    padding-bottom: 260px !important;
}

[data-section-id="5f0caf6130005d2344dd262c"] {
	min-height: 120px !important;
	height: 120px !important;
}

 

 

 

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

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.