Hi Catalin,

Thank you for your time in checking this out. It’s odd but they’re all appearing for me now. Looks like the problem is fixed. Thanks.

Thanks so much Catalin. Just to be sure: do you know of any times where site owners have been suspended by Google AdSense because the sticky sidebar ad violates their policies?

Hi, just to give an update on this issue.

The @media queries work but the pixel widths are not right. They tend to be out of sync by about 30-150px.

So, for example, in coding a design change I will put “@media screen and (max-width: 350px) and (min-width: 300px)” which actually has the effect of, “@media screen and (max-width: 290px) and (min-width: 240px), for example.

Thanks,
Chris

Awesome, fixed. Thanks so much!

PS. I’ve just made a new section called “THEOLOGY” and it doesn’t appear under there either.

Thanks for looking into this. I’m talking about the absence of the yellow line under “POPULAR” – your screenshot is showing the wrong headings. Please check again to see if you can see the yellow line under “POPULAR”. Thanks! 🙂

No worries, thanks mate!

Hi there,

As you can see, the little horizontal white box that appears on initial scroll and then, once my thumb leaves the screen, the background image resizes

https://drive.google.com/file/d/0B_swqA44iTqqRk5pcEJaNkh2djZ4NUFGdWVnVTFMN1FnX3pV/view?usp=sharing

Thanks

Hi again, apologies for all the messages but just letting you know that, for the time being, I have disabled .backstretch on my mobile website and replaced it with the following code:

@media screen and (max-width: 767px) {
.td-lifestyle {
background-size: auto;
background-attachment: scroll;
background-repeat: repeat;
background-image: url(https://www.syrupbee.com/wp-content/uploads/2018/01/Background-light-grey-e1517274658925.jpg);
background-position: center center;
}
}

This may be an adequate compromise, though it would still be nice finding a way to fix this initial scroll error so I can go back to using my original image that displays on the desktop version of my website.

Thanks,
Chris

https://stackoverflow.com/questions/32417663/white-area-on-fixed-background-when-scrolling-on-ios?answertab=active#tab-top

I tried adding ‘transform: translate3d(0,0,0)’ to .backstretch in the custom CSS but that did not help either.

I checked it on my iPhone (other phone) and it had the same problem. What happens is that if you scroll right to the top of the screen and then scroll down the background image resizes for a second showing a momentary white horizontal patch on the bottom of the background image.

Moreover, I checked my iPhone and every ad on there (not just the header ad) is not central and is off-skew towards the right being sometimes cut off.

I also checked https://ready.mobi/#587252-mx7w which displays the ads in the same way on mobile devices.

Thank you that’s great! 🙂

Hi Catalin, thank you.

On your screenshot my header ad is not centralised, it is cut off a bit on the right. That is how it appears on my end too. Is there a way to make the header ad cental on mobiles?

Thanks,
Chris

Fixed, no need to respond! 🙂

BUMP

BUMP

Problem resolved, no need to reply 🙂

PS. this does not occur when I view my website from my laptop screen in any width below 767px…this only happens when using my actual mobile phone.

Thank you 🙂 However when I add the css to style.css or demo_style.css it does nothing. Any idea why?

• This reply was modified 8 years by Mercuriel.

You will also notice how my main menu style doesn’t load instantly – I think this looks a little bit messy, so if this can be fixed (or I can be directed on how to fix it) that would be greatly appreciated. Thank you.