[Michael PParticipant]

Hi,

1. Is it possible to adapt the parallax scrolling effect so that the background remains static, as seen here:

http://wootten.com.au/process/

It could be argued that this isn’t a true ‘parallax’ scroll because the background doesn’t move, but it’s the effect I’m trying to achieve.

2. Take a look at the responsive features of the Wootten page. When you get down to iDevice sizes, the text boxes snap underneath the images – very nice.

On my development site I’ve managed to create text boxes that sit on top of the background, but how would I achieve that great responsive feature? You’ll need my admin login to see the page because the site is in maintenance mode, the login details are in this thread:

http://theme.co/x/member/forums/topic/side-by-side-full-width-responsive-images/

Here’s the page I’m building:

http://www.jothornejewellery.co.uk/process/

Many thanks!

[Kosher KMember]

Hi There,

Thanks for writing in,

1. The sample you have provided is very buggy in Chrome, when I try to scroll, the images sometimes appear and sometimes not.

2. The sample you have provided uses two image, the one that displays on dekstop view are set as background, while the image that appears on the mobile view are added directly on the page but is hidden from desktop view.

You can do the same by adding the image using visibility shortcode and only display the same image as the background on mobile view.

Hope that helps.

Cheers

[Michael PParticipant]

1. The Wootten site was buggy in Chrome? Here it looks perfect in all browsers: Chrome, Safari and Firefox.

2. Sorry not sure I understand this, can you clarify? It looks to me like the Wootten site is using a media query for the responsive features.

Thanks again.

[RadModerator]

Hi Michael,

I’d like to check it too but can’t right now (maintenance mode I think). Would you mind providing an admin login?

Thank you.

[Michael PParticipant]

This reply has been marked as private.

[RadModerator]

Hi Michael,

Your parallax seems to be working fine.

Add this css at your customizer’s custom css.

.x-content-band.bg-image.parallax, .x-content-band.bg-pattern.parallax {
background-position: center center !important;
}

Cheers!

[Michael PParticipant]

Great, that worked! Next questions:

1. is it possible to add some kind of navigation, ideally something that stays locked to the top of the page a bit like one-page navigation, moving the page from one ‘process’ to the next? Another possibility would be a link at the bottom of each text box for example?

2. How can I make the text boxes relocate underneath each image at 960px browser widths for iPad and iPhone?

Many thanks!

[ChristianModerator]

Hey Michael,

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

[Author]

Posts