Mobile header looks good on Android, but not iPhone

This issue seems to only be impacting the homepage and only on iPhone. URL: https://steuckassoc.com/

The page content is overlapping the header when viewed on iPhone, but it looks fine on Android. The homepage content is also much higher than it should be. I tried correcting this by adding to the top margin of the top section widget (Elementor), which corrects the issue on iPhone, but creates a huge blank space on Android.

Only the homepage appears to have this issue; all other pages look fine on both iPhone and Android.

I tried the following CSS, which brought the header to the foreground but caused the header to overlap the content, which is still much too high on the page. Basically the opposite problem.

@media only screen and (max-width: 1024px) {

  .site-header,
  .site-header.fixed{
    position: relative !important;
    z-index: 9999;
  }
  
}

Hi,

As checked with my iPhone and web browser’s inspector tool, seems likely the issue is not related with the theme. Content margin or padding within your certain elementor widgets on your page may need to be corrected on mobile only. Pleaes check this mobile editing tutorial that may help you with this.

Let me know if you find other issues with Sydney.

Regards,
Kharis
aThemes Support