[Easyads88Participant]

my site is http://tourmobile.info

The parallax background pic labeled “Places To Eat” will not function like the proper parallax effect should. please advise.

I’ve tried putting this code in “Global CSS”:

@media screen and (max-width: 767px){
.x-content-band.bg-image.parallax, .x-content-band.bg-pattern.parallax {
background: center center/cover no-repeat;
background-attachment: scroll!important;
background-size: 100% auto !important;
-webkit-background-size: 100% auto !important;
-moz-background-size: 100% auto !important;
-o-background-size: 100% auto !important;

}
}

[RadModerator]

Hi there,

Thanks for posting in.

It works on my end, would you mind providing a video recording of this issue? Though, parallax background is intentionally disabled for mobile.

Thanks!

[Easyads88Participant]

It’s not functioning properly on the tablet. It’s simply an image, no parallax effect. Is there something that I’m doing wrong?

the video file is too large to add.

[Easyads88Participant]

Please advise… parallax still not functioning on my end with my mobile device. Is there something that can be done??

[Easyads88Participant]

Here’s the video…

[Rue NelModerator]

Hello There,

Thanks for providing the video. To resolve this issue, please have your css code updated and make use of this code instead:

@media screen and (max-width: 767px){
  .x-content-band.bg-image.parallax, .x-content-band.bg-pattern.parallax {
    background: center center/cover no-repeat;
    background-attachment: fixed !important;
    background-size: 100% auto !important;
    -webkit-background-size: 100% auto !important;
    -moz-background-size: 100% auto !important;
    -o-background-size: 100% auto !important;
  }
}

We would loved to know if this has work for you. Thank you.

[Easyads88Participant]

No unfortunately that didn’t work. What do you suggest?

[Easyads88Participant]

Also, I have used this css code to correct the fixed navbar on mobile devices.

media (max-width: 979px) {
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
position: fixed;
}
}

It worked well, but now a portion of my slide show (below my masthead) is being blocked by the fixed navbar. Any way that i can correct this from happening.

pic#1 is what it should be, but pic#2 shows the portion that is being blocked

[Easyads88Participant]

Also, I have used this css code to correct the fixed navbar on mobile devices.

media (max-width: 979px) {
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
position: fixed;
}
}

It worked well, but now a portion of my slide show (below my masthead) is being blocked by the fixed navbar. Any way that i can correct this from happening.

pic#1 is what it should be, but pic#2 shows the portion that is being blocked

[Easyads88Participant]

pic#1

[Easyads88Participant]

pic#2

[Easyads88Participant]

As far as the parallax is concerned, do you need my login to try to fix the problem?

[ChristopherModerator]

Hi there,

Parallax is disabled on mobile. So you should see normal image on mobile devices.

Please try this code:

@media (max-width: 979px) {
    .touch .x-section.bg-image.parallax, .touch .x-section.bg-pattern.parallax,
    .touchevents .x-section.bg-image.parallax, .touchevents .x-section.bg-pattern.parallax {
        background-attachment: scroll !important;
    }
}

Hope it helps.

[Easyads88Participant]

I have tried this code but the parallax function is still not working. Please help…

[Easyads88Participant]

This reply has been marked as private.

[Author]

Posts