[Support request] Duplicating web page with Parallax Effect

[David]

reduce the breakpoint back to 768px ( or 1024px ) and remove the height property from the CSS, you may need to adjust the section padding.

[Steig]

The problem is that i need the 955px height to make sure the first text bar is visible on an average desktop. so I can’t remove it.

I had removed all section padding because I thought from the earlier part of this thread it interfered with the fixed-background setting.

[David]

Is the main issue that the Image section is taller then the tablet in landscape mode?
If so how about this?

.fixed-background {
    background-attachment: fixed;
    background-position: 50% 50%;
    height: 80vh;
    min-height: 560px;
}

[Steig]

this works for desktop and mobile, but not tablet; in either portrait or landscape mode. I’d prefer the tablet present the webpage just like the desktop. i.e. the scrolling effect. However, if that isn’t possible, then it needs to present like the mobile, shrinking everything down so it is visible, but without the scrolling effect.

[David]

OK, so mobile devices disable fixed backgrounds by default ( the GP Section parallax does work as it uses Javascript). Tricky to target a specific device with media queries. Try adding this plugin:

https://wordpress.org/plugins/wp247-body-classes/

Go to the Dashboard > Settings > Body Classes and on the Mobile tab check is-mobile, is-phone and is-tablet.

Once done we can try targeting the tablet like so:

@media (min-width: 768px) {
    body.is-tablet .fixed-background {
        height: 500px; /* adjust accordingly */
    }
}

Can’t say for sure if this will work as mobile detect and device orientation are tricky.

[Steig]

This definitely seems to be on the right track, but the height doesn’t seem to really adjust. 500px was too tall and I’ve worked it down to 200px just because nothing seemed to change. I don’t think it’s picking up on that part of the code.

[David]

I am not seeing the classes being added by the plugin, can you check the plugin settings to see those classes are activated?

[Steig]

Sorry about that. I didn’t get it set properly. Its set now. No effect on the tablet.

[David]

Last stab – i can see the body classes being added, so i adjusted the code above to make it more specific and reduced the media query. Can you try that and see if you get any results

[Steig]

I can see the tablet portrait mode is better. Landscape is improving. Ideally it would be great to have the website present differently between portrait & landscape.

These changes bring better aspect ratio to the pictures so the website looks better, but they do not provide the same scrolling as the fixed background setting does on the desktop. I’m assuming only desktop browsers can render that.

For the smartphone screen, can I go in to the sections and turn on parallax to enable that effect without impacting the desktop view?

[David]

For the tablet, you can add another rule as above without the media query so it applies to Tablet Portrait only.

You can try enabling the Parallax option, it should work on mobile if the Fixed Background is only applied within the desktop media query.

[Steig]

The code that applies fixed-background to the desktop is:
`@media (min-width: 769px) {
.fixed-background {
background-attachment: fixed;
background-position: 50% 50%;
height: 955px;
}
}’

However, turning parallax on seems to also impact desktop.

[David]

Hi there, sorry this slipped through the net.
Hmmm… i don’t think there is an easy workaround to this without recoding the parallax option.

[Author]

Posts