How do I remove the jumping effect of site on mobile?

This is my site http://classichits.ie/

When I scroll my site up or down, there is this jumping effect on the sides.

A lot of white space appears.

This happens on mobile, not when viewed in developer mode in browsers.

How do I remove this?

Please help. Thanks.

I can’t test on mobile right now. But looking at the site on desktop, things get very slow. So it could well be due to the massive weight of the page. I think it needs a lot of slimming down.

Is it a separate mobile version, or he same site?

Agreed.

The 48 scripts on that page will be doing you no favours. Your phone will have rather less processing power than your desktop, so expecting it to cope with that the same way a desktop can is unreasonable,

Older phones will probably be unable to render the site at all.

I tried to run the page through Google’s “mobile friendly” check.

A temporary error occurred. 53 resources on this page could not be loaded. The results and screenshot may be incorrect. You may want to try again later.

no, its the same site.

hi,

I just tried the google mobile friendly site check and It said the site is fine.

Your home page is 14.6MB. That’s large even for a desktop.

It does say it’s mobile friendly, but the screenshot looks wrong, and it shows (below the screenshot) 130 resources that did not load.

Yes - that’s misleading. If you scroll down to the bottom of the page, though, you’ll see this:

That’s why it’s saying the results (that it’s fine) may be incorrect.

A lot of that is the fruit image. It’s >6MB alone and could be optimised. But it’s also the sheer number of requests, 135 of them.

The W3C Mobile-OK checker uses different criteria to Google and tells a different story.

https://validator.w3.org/mobile/?docAddr=http%3A//classichits.ie/

1 Like

Guys,

Right now my priority is removing the jumping effect and making the site to fit any screen size.

This is iphone 5c screen. Now, I want to remove the extra grey space on the right. and make it fit the screen completely.

help me with this please. thank again.

We’ve been trying to explain to you that at least part of your problem is caused by the huge page size, the number of HTTP requests and the over-reliance on JavaScript.

If you’re serious about making the site responsive, you need to tackle all these issues; you can’t just fix odd bits of CSS and hope it will somehow work.

Your first move should be to validate the HTML and correct any errors.
https://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.iradio.ie%2F

The CSS validator is also showing huge numbers of errors. Frankly, I don’t understand much of your CSS, perhaps because I’ve never used bootstrap, but really, is it sensible to have values like margin-left:84.99999999999999%. Why not 85%?

3 Likes

There are elements in that footer section that are wider than the viewport and thus the mobile view has to reduce the scale of the page so that the widest element fits resulting in the rest of the layout getting squashed and the gray space appearing at the side.

Here is one such element that will break 320px width devices.

#menu-bottom-menu {
    list-style: none;
    padding: 0;
    width: 363px;
    margin: 0 auto;
}

As you can see it is 363px wide to start with so will never shrink. Use a media query and remove the width before the screen size gets down to 363px width.

There are other elements in your page that are causing a small scrollbar so you need to isolate them and make sure that you never see a horizontal scrollbar on the viewport because that will upset mobile. I’m guessing the smaller scrollbar problem is due to perhaps an incorrect nesting of the bootstrap grid and the -15px margins push wider than the screen.

To find out which elements cause the scrollbar simply use the developer tools and set sections to display:none until the problem goes away and that will help you narrow down the problem.

I’m not sure what you mean by jumping but a heavy site will lag on mobile when scrolled. I can’t scroll facebook on my iphone 4 as it takes forever.

.

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.