Problem with mobile view in Dazzling

Hi,

Firstly, as everyone else has said, great theme!

Secondly, I’m having some serious issues with how my site is displaying on mobile devices via Dazzling.

When I first open the site on my iPhones (5S and 6S), it initially loads up full size but then shrinks to around 1/3 of the initial size after a few seconds. This is way too small, and looks nasty.

The site is www.thriveprimal.com

It looks just fine in desktop. Wondering whether the static header image is affecting how it loads in mobile?

Thanks,
Will

@movin, any chance you could help with this? You seem to have solved many other people’s mobile issues with Dazzling! Essentially, the problems as I see them currently are:

  1. featured images display twice in the home page for each post, and not at all when I open an individual post
  2. when in the home page, the view is way too zoomed out, however this is resolved when opening an individual post
  3. the header image has suddenly gone low-res, possibly after I replaced the static slider with a custom header

The website url is www.thriveprimal.com

Essentially, you’ll see that the desktop site is as it should be, but the mobile version is VERY messy.

Thanks!

Looks like I may have now resolved problems 1 and 3, main thing now is problem 2. Cheers!

Hi @willnic,

Sorry to hear of the problem you are having.

I visited your shared site on my mobile phone but couldn’t reproduce the issue.

Are you seeing the second mentioned issue on this simulator http://www.responsinator.com/ also?

Could you please share the screenshot of it if you can?

Kind Regards,
Movin

Thanks for your response Movin.

Screen shot from my mobile view (iPhone 5S, and it also looks like this on the 6S) is attached.

Interestingly, the home screen looks fine on the simulator. With the exception of the adsense leaderboard ad, but I think that’s something I’ll just have to tweak a little to make it also responsive. Does this then suggest that Android phones might open the home page correctly, but not on iPhones?

Thanks,
Will

Hi @willnic,

It seems the banner ad that you are displaying on your site is causing this issue.

To confirm it could you please try temporary removing the banner ad and then test it?

Also to resolve the issue try adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Dazzling Options -> Other -> Custom CSS

#main {
    overflow: hidden;
}

Best Regards,
Movin

Thanks @movin, I changed the CSS code and it worked! Mobile view now loads full size.

I added the code you gave above, but left the existing code:

#main-nav ul li ul li a:hover,#main-nav ul li ul li:hover > a,#main-nav ul li.current-menu-item ul li a:hover {
color: 725c77;
}

Should I have removed that, or left it? The banner ad is now cut off in mobile view, but I suspect that the only way around that would be to set my Adsense settings for that ad to be responsive rather than static?

Appreciate your help!

Hi @willnic,

You are most welcome here :slight_smile:

Should I have removed that, or left it?

If you are using the existing CSS code then you can leave it there.

The banner ad is now cut off in mobile view, but I suspect that the only way around that would be to set my Adsense settings for that ad to be responsive rather than static?

Yes you are right. Here’s the reference Create a display ad unit - Google AdSense Help

Best Regards,
Movin