Wordpress Twenty Seventeen Front Page sections scroll effect not working on mobile

Question

I have a wordpress site and using Twenty Seventeen theme, I like the scrolling feature on the Front Page Sections, just like in this demo:

https://2017.wordpress.net/

Now I am trying to get that scrolling feature to work on mobile, however when I look at the CSS I found this

.background-fixed .panel-image {     
   background-attachment: fixed;
}

But I know background-attachment does not work very well on mobile. Does anyone know of a work around, everything I have found and tried online does not work.

Why are you trying to get it to work when - as you said yourself - it doesn't work well on mobile? — FluffyKitten, Aug 24 '17 at 23:31
What I meant by that is on desktop the images have that scrolling feature, it doesn't do it on mobile, so I add the CSS above outside of a media query, it looks bad, so I am trying to do the scrolling image feature on mobile....doesnt have to be background-attachment: fixed on mobile. — user979331, Aug 25 '17 at 01:26
Possible duplicate of https://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7. In any case, look there and https://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios for alternatives. — James Jones, Aug 28 '17 at 06:18
Position fixed is a known issue in iOS. This is why the scrolling feature won't work on iOS. Refer to the comment above for work arounds or just move on until this bug is fixed — rhysclay, Apr 04 '18 at 06:32

score 0 · Accepted Answer · answered Aug 30 '17 at 09:26

0

You need to write above css in your style.css file. we have to set background image fixed not a scroll.

.panel-image {
   background-attachment: fixed;
}

answered Aug 30 '17 at 09:26

Gaurang Sondagar

814
1
9
23

This doesnt work on mobile. My images look very zoomed in and dont scroll. – user979331 Aug 30 '17 at 13:49
OP specifically stated they already tried this. Please pay attention to the question. – James Jones Aug 31 '17 at 05:04

score 0 · Answer 2 · answered Nov 02 '17 at 15:48

0

Try to select only for one class ".panel-image" using media-query like this:

@media screen and (max-width: 768px) {
  .panel-image {
    background-attachment: fixed;
  }
}

answered Nov 02 '17 at 15:48

Alexander Z

630
3
22

score -1 · Answer 3 · answered Aug 30 '17 at 15:50

-1

To make background scroll set the background attachment property to fixed

.background-fixed .panel-image {
   background-attachment: fixed;
 }

To make it work on mobile you have to place above CSS in media query or copy paste the below code in your style.css

@media screen and (max-width: 768px){
.background-fixed .panel-image {
   background-attachment: fixed;
 }
}

answered Aug 30 '17 at 15:50

Jahangeer Shams

36
5

Hey dude, I tried both with and without the media queries, both did not work – user979331 Aug 30 '17 at 17:57
The images scroll when I make my browser the smaller in width, but not on my mobile device (iPhone 7) – user979331 Aug 30 '17 at 17:57
OP specifically stated they already tried this. Please pay attention to the question. – James Jones Aug 31 '17 at 05:04
Can you please share your site link? – Jahangeer Shams Sep 03 '17 at 19:54

score -1 · Answer 4 · answered Sep 01 '17 at 20:05

-1

Is not working on mobile because the theme only enabled this on desktop. To work on mobile, add this custom css:

.background-fixed .panel-image {
    background-attachment: fixed;
}

This way, on every breakpoint the effect will be applied

answered Sep 01 '17 at 20:05

Maxwell s.c

1,583
15
29

You will need them do fixed elements and overflow hidden for the images. is an more complicated task. – Maxwell s.c Sep 04 '17 at 12:09

Wordpress Twenty Seventeen Front Page sections scroll effect not working on mobile

4 Answers4