How can I move the first section on my home page below the header?

Site URL: https://seal-olive-mnwz.squarespace.com/

I noticed that the first section below my header on my Barbosa themed template gets overlapped by the header and I was wondering if I could make it so the image for the first section didn't start until after the header rather than being tucked behind it?

Hi. Can you setup password & share url? Your site is private.

You can also try add this code to Home > Design > Custom CSS

body.homepage #page section:first-child {
	margin-top: 20px;
}

Adjust 20 to another number

I tried this on my mobile site but it doesn't seem to move the headline (first section) down. Does anyone have a solution? My site is vibemade.com, and I have separate mobile homepage vibemade.com/mobile

I'm attaching the editor view which shows the image is much taller. It's extra annoying because on device when I scroll down and quickly come back up, I can see on iOS that there's part of the image that's getting hidden under the top nav.

On 5/12/2021 at 10:21 AM, vibemade said:

I tried this on my mobile site but it doesn't seem to move the headline (first section) down. Does anyone have a solution? My site is vibemade.com, and I have separate mobile homepage vibemade.com/mobile

I'm attaching the editor view which shows the image is much taller. It's extra annoying because on device when I scroll down and quickly come back up, I can see on iOS that there's part of the image that's getting hidden under the top nav.

Add to Design > Custom CSS

/* Move down top image */
@media screen and (max-width:767px) {
[data-section-id="609b461aebc9b414a36f72c2"] {
    margin-top: 100px;
}
}

14 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Move down top image */
@media screen and (max-width:767px) {
[data-section-id="609b461aebc9b414a36f72c2"] {
    margin-top: 100px;
}
}

 

That worked, thanks!

@tuanphan — how can I make it work for all widths of the site?

On 5/14/2021 at 10:43 PM, vibemade said:

That worked, thanks!

@tuanphan — how can I make it work for all widths of the site?

You mean all devices: desktop, tablet & mobile?

@tuanphan Yes!

11 hours ago, vibemade said:

@tuanphan Yes!

Use this new code

/* Mobile - Move down top image */
@media screen and (max-width:767px) {
[data-section-id="609b461aebc9b414a36f72c2"] {
    margin-top: 100px;
}
}
/* tablet */
@media screen and (max-width:991px) and (min-width:768px) {
[data-section-id="609b461aebc9b414a36f72c2"] {
    margin-top: 150px;
}
}
/* desktop - Move down top image */
@media screen and (min-width:992px) {
[data-section-id="609b461aebc9b414a36f72c2"] {
    margin-top: 100px;
}
}

You can adjust values ;)

Also, do you need to fix this?

(Tablet-Blog posts) Increase content width?

6 hours ago, tuanphan said:

You can adjust values 😉

Also, do you need to fix this?

(Tablet-Blog posts) Increase content width?

@tuanphan would love to — hadn't caught that! 

On 5/18/2021 at 5:28 AM, vibemade said:

@tuanphan would love to — hadn't caught that! 

Add to Design > Custom CSS

/* Tablet blog width */
@media screen and (max-width:1024px) and (min-width:768px) {
.blog-item-inner-wrapper {
    width: 95% !important;
}
}

On 5/17/2021 at 11:37 AM, tuanphan said:

/* desktop - Move down top image */ @media screen and (min-width:992px) { [data-section-id="609b461aebc9b414a36f72c2"] { margin-top: 100px; } }

@tuanphan how do you find the data section ID? I'm trying this on desktop size and it's not working 😞 

5 hours ago, vibemade said:

@tuanphan how do you find the data section ID? I'm trying this on desktop size and it's not working 😞 

Use this tool https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

@tuanphan you're a genius! Thanks so much!