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

wordpress twenty seventeen change background color
wordpress 2020 theme child theme
wordpress twenty seventeen slider
wordpress twenty seventeen full width page
wordpress twenty seventeen additional css
twenty seventeen theme blog page
wordpress twenty seventeen parallax
wordpress twenty eighteen

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.

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;
}

Twenty Seventeen iPadOS front page featured images, Wordpress Twenty Seventeen Front Page sections scroll effect not working on mobile To work on mobile, add this custom css: .background-fixed .panel- image� 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.

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;
  }
}

CSS parallax issue within Twenty Seventeen WordPress Theme , The only devices affected are those running iPadOS 13.1. Twenty Seventeen front pages display OK on desktops, laptops, on iPads running earlier But not on iPadOS 13.1. The same issue is repeated down the page with each section on the main page. Chrome uses the old non-parallax (mobile) scrolling view. Parallax effect involves a web page’s background moving at a slower rate than the foreground. This creates an illusion of depth to the page, giving the content a 3D effect as viewers scroll down. The majority of premium WordPress themes now come with built-in parallax effect on their homepage. Even the free WordPress default theme Twenty

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;
 }
} 

5 Excellent Ways to Hack the Twenty Seventeen WordPress Theme, 2) with a static front page with 4 additional sections. On the very top part, as you scroll down, the logo, site name, and tagline scroll up over the opening image. Add “True Parallax” effect or remove “Parallax” effect on front page section featured images. Force blog and search pages to display as one column. Add more sections to your static front page. Set the height of the frontpage section parallax images. Add anchor links to static front page sections into your menus.

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

How to Customize the Free Twenty Seventeen WordPress Theme, I'm not going to lie, the code you're the sticky navigation doesn't work quite Sidebars and jQuery Smooth Scroll — to text to your liking, add front page section the full effect of all five hacks for Twenty From mobile devices, the text does not� Twenty Seventeen One Page Parallax Scrolling with Page scroll to id Plugin. I chose this method, because it is quick, easy and it works. Don’t forget to click “Save” buttons and clean your cache plugin if you use any cache plugins in each steps below to see the changes. 1. Set your website to have “static front page”.

BUG, Twenty Seventeen shipped as the new default theme with WordPress 4.7. no surprise that much of the Twenty Seventeen setup work happens in the Customizer. You will probably not want to add a featured image to the home page you created in the Step 4: Assign Pages to Each Front Page Section. Twenty Seventeen sees a shift in direction, with a focus resting on business. This theme sees a static home page, perfect to promote your business and display key content. Multiple sections on the front page, along with widgets, a social menu, logo, and lots more, see all immediate business needs catered for.

Twenty Seventeen Theme — WordPress.com, Prerequisites I have searched for similar issues in both open and closed tickets and cannot find a duplicate. GitHub is home to over 50 million developers working together to host and review Tested with Astra and Twenty Seventeen Scrolling Effect - 'Sticky enabled' causes page to scroll on it's own. 3:29 Assign pages to 2017 theme's sections 4:42 Static front page setting **Tutorial how to show menu and sections if you switch you previous theme to Twenty Seventeen theme: https://youtu.be

A Developer's Introduction to the Twenty Seventeen Theme, Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page Choose this free, mobile-friendly WordPress theme and get started today! Header video will not be displayed on screens smaller than 900px wide by� Even if the Twenty Seventeen theme provides a multiple section front page, animated scrolling is not a feature. The theme uses the jQuery ScrollTo plugin to create an animated scrolling effect. Unfortunately, the animation is activated only when the user clicks on the navigation down arrow, and is not available for menu items.

Comments
  • Why are you trying to get it to work when - as you said yourself - it doesn't work well on mobile?
  • 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.
  • Possible duplicate of stackoverflow.com/questions/20443574/…. In any case, look there and stackoverflow.com/questions/23236158/… for alternatives.
  • 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
  • This doesnt work on mobile. My images look very zoomed in and dont scroll.
  • OP specifically stated they already tried this. Please pay attention to the question.
  • Hey dude, I tried both with and without the media queries, both did not work
  • The images scroll when I make my browser the smaller in width, but not on my mobile device (iPhone 7)
  • OP specifically stated they already tried this. Please pay attention to the question.
  • Can you please share your site link?
  • You will need them do fixed elements and overflow hidden for the images. is an more complicated task.