Header is covering first part of Section 1

[steffenharris]

I created a header in the header creation section in PRO. It works great, except on one page. I have section 1 underneath the header the exact same on 3 pages (About Us, Services, and Contact Us). In desktop form, they all look great. In mobile view within editing in PRO, they look great… however, on an actual mobile device, one page does not. About Us and Contact Us look like they are supposed to on a mobile device. SERVICES however, the headline text “SERVICES” is not visible on a phone.

In that page as well, I have columns set up 1/5 + 4/5. In mobile view, these stack, which I wish didn’t but it sounds like from staff, in mobile view they have to stack or the website will break? I wish they didn’t because plenty of responsive website do not stack their columns. If they must, I’ve tried putting gaps between the text and next graphic otherwise it looks like the text above the graphic is right on top. I have pictures showing what I want the gaps to do, and then how they actually appear on mobile.

This is super frustrating as they are all exactly the same, all modeled off the same template page.

Services Page in PRO mobile view

Services Page in ACTUAL mobile view

Text and Graphics Gaps in PRO mobile editing view

Text and Graphics gaps in ACTUAL mobile view

[rad]

Hi @steffenharris,

I checked and the Services headline is visible on both iOS and android. Perhaps you solved it by adding margin/padding? That’s what I’m currently seeing. That okay too, but the explanation fo that is because you set your header bar to absolute instead of relative. Absolute positioning ignores other elements like a floating one. I assume it’s intentional for all the pages except to Services page, which makes your already applied solution correct

Thanks!

[steffenharris]

Could it be possible that it takes a little time for website changes to be applied? I have literally done nothing to my site since I posted this thread last night and this morning it looks 100% correct. All the gaps are working correctly and the heading text is showing correctly.

[nabeel]

Hi again,

That would be your cache. I checked your site and I see the content of your site is being served by the cache. Always make sure to purge the cache after making any change so you can see your changes right away on the front-end. It is also recommended that you turn off your cache plugins and optimization services while the site is under development. You can turn off your endurance cache in Admin > Settings > General

Cheers!