[goldfishgrlParticipant]

I’m using Integrity with a full background image and a slider on the homepage – I’ve fixed the background image so that the content moves over it with this:

body .site {
background: #606060 url(http://myimage.jpg) center center;
-webkit-background-size: cover;
background-size: cover;
background-attachment: fixed;
}

and it works perfectly on my laptop, but when trying to scroll up or down the page on a tablet or phone the background image jerks and jumps and I don’t know how to fix it (I’m a complete beginner and whilst I’ve looked round the forum I’m not even sure what I should be searching for).

Also, the anchor button on the slider which sends the visitor down the page doesn’t scroll smoothly, and just instantly jumps to the next part – how can I slow it down?

[Prasant RaiModerator]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[goldfishgrlParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for the link!

What you have been experiencing in your mobile devices is a mobile device browser issue. The issue occurs because when you first visit the site in your mobile devices you will have the address bar. And as soon as you scroll the page, the address bar disappears and then the browser viewing area changes and that is why it will look like your background image is jumping because it changes position in relation to the browser area without the address bar.

There were other people who already created a solution for that. You can find the discussions here: http://stackoverflow.com/a/25020295

Hope this explains it.

[goldfishgrlParticipant]

Hi again,

On the basis of the above I added

var bg = jQuery("#bg1");
jQuery(window).resize("resizeBackground");
function resizeBackground() {
    bg.height(jQuery(window).height() + 60);
}

to the JavaScript box in the Customiser and it’s done something, but it’s still not right and the whole picture is now scrolling upwards with the content leaving a brief gap before it reappears. I don’t even know whether that was where the code is meant to go – I’m a complete beginner.

Could you have a look and see if you can see what I mean? I only have Android devices and nothing using iOS so I haven’t tried it on that>

[Rue NelModerator]

Hello Again,

The code will only work if you have an element with the ID “bg1”. Other than that, it will not do anything.

Can you please try this css code instead,

@media (max-width:480px){
  html { 
    background: url(http://myimage.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

Please let us know how it goes.

[goldfishgrlParticipant]

No, no difference. I tried it in both the Customiser CSS box also in the Child Theme and it hasn’t helped (it’s currently sitting in the Child Theme).

[RadModerator]

Hi there,

Could you try removing these css.

body .site {
background: #606060 url(http://myimage.jpg) center center;
-webkit-background-size: cover;
background-size: cover;
background-attachment: fixed;
}

And

@media (max-width:480px){
  html { 
    background: url(http://myimage.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

Then just add this css.

body.home {
background: #606060 url(http://myimage.jpg) center center;
-webkit-background-size: cover;
background-size: cover;
background-attachment: fixed;
}
body.home .backstretch {
display: none;
}

Thanks!

[goldfishgrlParticipant]

Oh, that’s great! There’s a tiny stutter but not enough to worry about – perfect!

As for the slider’s anchor button mentioned at the start, how do I slow the progess down? When clicked on it instantly jumps to the next part of the page which is the right place, but I wanted it to scroll down a bit more elegantly than this (as with the one page demos I’ve seen).

I don’t know if it’s to do with the smooth scrolling plugin because I can’t install it, but I don’t think it’s that anyway?

[ChristopherModerator]

Hi there,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[goldfishgrlParticipant]

That’s OK – thanks for your help (and your patience!)

[ThaiModerator]

You’re most welcome.

[goldfishgrlParticipant]

Ah, now my logo is stacking above the navbar menu on my laptop but is still OK (inline) on the tablet – I don’t want to reduce the menu font sizes and I don’t think it’s that anyway or the tablet would be doing the same thing.

I’ve tried making both fonts smaller just to see if it worked but it’s no different and I don’t know how to fix it? It’s only the laptop, but the screen on that is wider than the tablet so I’m completely baffled?

[Paul RModerator]

Hi,

To fix it, we can adjust the letter spacing and your menu item padding as the screen goes smaller.

You can add this under Custom > CSS in the Customizer.

@media (max-width: 1225px){
    .x-navbar .desktop .x-nav>li>a {
           letter-spacing: 1px;
           padding: 40px 1em 0;
    }
}

@media (max-width: 1070px){
    .x-navbar .desktop .x-nav>li>a {
           letter-spacing: 0;
           padding: 40px 0.7em 0;
    }
}

Hope that helps.

[goldfishgrlParticipant]

It does! All done – thanks again.

[Author]

Posts