Mobile - first sections not loading content correctly

Hello. Working on a site the first section of each page (except homepage) is not loading correctly in mobile. Instead of loading at the top of the section, it is loading in the middle of the content, and pushing some of the section content down to overlap with the second section. Examples below. Rendering correctly in desktop version.

(https://hibiscus-dachshund-wk7b.squarespace.com/config/design)!

This is only happening in mobile. Can someone look at my CSS to see if I have anything incorrect that could be causing this? Or if there is a fix? I'm still pretty mid-level with SS.

password: forumhelp

THANK YOU!

It looks fine. Did you solve it?

Hi @tuanphan and @RDIGITAL, I'm having a similar issue on mobile. The page doesn't load at the very top. Were you able to solve this? Is it just because my site isn't live yet?

Just now, mbockmaster said:

Hi @tuanphan and @RDIGITAL, I'm having a similar issue on mobile. The page doesn't load at the very top. Were you able to solve this? Is it just because my site isn't live yet?

 

Site is https://fife-sunflower-68mk.squarespace.com/ pw: elipsis

It doesn't happen when I preview on desktop with a mobile device selected, but it does happen when I preview the site on my phone.

12 hours ago, mbockmaster said:

Site is https://fife-sunflower-68mk.squarespace.com/ pw: elipsis

It doesn't happen when I preview on desktop with a mobile device selected, but it does happen when I preview the site on my phone.

You mean this section?

6 hours ago, tuanphan said:

You mean this section?

Thanks @tuanphan, correct. It's this hero area, on every page. It loads slightly further down, so the sticky header is active on page load. This happens on page load on my phone, not on desktop. Very strange!

On 10/19/2023 at 8:48 PM, mbockmaster said:

Thanks @tuanphan, correct. It's this hero area, on every page. It loads slightly further down, so the sticky header is active on page load. This happens on page load on my phone, not on desktop. Very strange!

Try adding this to Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:767px) {
body.homepage article section:first-child {
    padding-top: 0px !important;
}
}