Mobile header doing strange things for boxed inner page with image background

[zaclovett]

Hi Team,
This site http://www.byronsun.com.au/bswp/ is doing strange things when viewed on iPhone 6s. Please see screenshot attached.

Basically it’s adding a blue strip above the header, pushing everything down, then the background photo is very large and pixelated.

It’s also hiding some of the mobile menu nav items as the whole nav seems to be pushed down.

If this can’t be fixed is it possible to turn off the boxed inner page and background image for pages when viewed on mobile devices?

Thanks!

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Have you resolved this? I do not see this currently?

[zaclovett]

Hi David,
sorry I should have clarified I’m only using the boxed inner page on these pages:

http://www.byronsun.com.au/bswp/?page_id=11
http://www.byronsun.com.au/bswp/?page_id=13 (this is the one I took the screen shot from)

The mobile nav is being pushed down as well obscuring menu items.

Thanks!

[David Martin – Support]

Ah yes I see that, thanks.

Can you please add this to Theme Options => Custom CSS.

@media only screen and (max-width: 767px) {
  .boxed-inner-page #container {
    padding-top: 0px;
}
}

[zaclovett]

Hi David,
Thanks for your reply. That kind of worked but not really. The mobile background image is still only showing a very small portion of the overall image and blowing it up so that it’s pixelated. I was hoping the background image would be responsive and scale as it should. When the mobile navigation is activated the header is still being pushed down and the first nav item is being cut off.

Images attached.

Looking forward to resolving this. Thanks!

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Please amend to this.

@media only screen and (max-width: 767px) {
  .boxed-inner-page #container {
    padding-top: 0px;
}
.mobile-menu-open.mh-overlay #mobile-menu {
    padding-top: 60px;
}
}

Regarding the background image, I do not initially replicate that. What iPhone are you using? – Can you clear the device cache?

Thanks,
David.

[zaclovett]

Hi David,
Thanks the mobile nav is working better now, although the top contact text disappears when nav is activated. I’m also getting a flash of a different background image for a split second before nav appears once nav menu button is touched. Background image is still only showing a small portion of the larger image and it’s very pixelated i.e. it’s not being responsive. Theme seems buggy.

iPhone 6s. Clearing cache doesn’t help.

[David Martin – Support]

It looks like an particularly odd bug isolated to the device iPhone 6, I cannot replicate unless on an actual device.

However, this has looked to resolve it for me during my tests:

@media only screen and (max-width: 767px) {
 body {
  background-size: cover!important;
  background-attachment: fixed !important;
  background-size: initial!important;
 }
}

[zaclovett]

Thanks David. The background image is jumping in height when it first loads but I think I can live with that.

Hopefully these issues are permanently resolved in future theme updates.

Thanks for your help!

[David Martin – Support]

I can no longer access that page.

Let me know if you require further assistance.

Cheers,
David.