New Parallax Works on Back End, not on front end

Support
#1

Hey there. I’m in the process of changing my classic sections to the new v2 ones so that my parallaxes will start working again on mobile. I was able to recreate the effect on the backend and it looks perfect there (see photo #1), however, when I check my actual website on the front end, it doesn’t seem to be working at all and it’s causing issues with the section below it (see photo #2). I’m sure it’s a simple fix but I can’t seem to figure it out.

I’ve cleared my cache and checked my website on multiple laptops, but the issue still remains.

Please advise.

Thank you

#2

Hi Eric,

Thank you for writing in, there is a malformed section on your page, please see screenshot.

That section has no column nor row which messes up the HTML markup.

Please remove that section.

Hope it helps,
Cheers!

#3

Ahh yes, that was the issue. Thanks a lot!

One last question. How could I go about centering the subscribe form? I added it as Raw Data but I can’t get it to remain in the middle on the front end.

Let me know and thanks again

#4

Hello Eric,

Your contact form is not centered simply because you have place it in the left column of a two column setup.

Wqph-OMeQ56et2qInn0lGg
Wqph-OMeQ56et2qInn0lGg852×359 230 KB

Please edit your page and in your row settings, use only one column.

#5

Oh damn, sorry about that. I’m still getting used to the new layout.

I just noticed that the email form’s placeholder text looks good on the backend (https://imgur.com/Qdt0Ocb) but on the front end, it goes bold (https://imgur.com/ztMWTyr). Any idea as to what could be causing this?

Also, is there an easy way to change the input text for my email forms? As you can see from this photo (https://imgur.com/TgdUAUp), when people enter their name/email, it’s hard to read the text.

And last question, is there any way to start the parallax scrolling of the background image from the top? As you can see here (https://imgur.com/dVTjX5M), the top of the image is cut off. I searched in the forum but I couldn’t find a solution.

Thanks again for all your help

#6

Hi Eric,

Unfortunately, there is no easy way to resolve this but a custom CSS.

e.g.

.tco-subscribe-form input[type="text"],
.tco-subscribe-form input[type="email"] {
	font-weight: 100;
	color: red;
}

Please do mind that we cant provide customization support further from here.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Try setting the parallax effect to reverse, or add height to your section by increasing its top and bottom padding.

Cheers!

#7

That worked! Thanks a lot.

I have one last question and then I’m good to go. I looked through the forums to see if there’s a way to replicate the parallax effect that I had with the classic sections (where the background image is fixed) and I found this code:

/* MAKING THE PARALLAX BG FIXED */
.x-bg-layer-lower-image {
background-attachment: fixed;
}

This does exactly what I want it to, however, I’ve noticed that there’s now whitespace either above or below the image as I scroll (https://imgur.com/C4Dby0u / https://imgur.com/CmGCdpE), which is especially pronounced on smaller screens (https://imgur.com/nOTxj6M). I know it’s probably an easy fix but I’ve spent hours playing around with it and I can’t seem to figure it out. Any idea as to how to fix this?

Sorry again for all the questions. All my parallaxes were created with the classic sections (so now they no longer work on mobile) and I just want to get it to work before redoing them all.

Thanks again for your patience

#8

Hello Eric,

If you want to apply the code above in the classic sections, You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector of the section element you need to use. By default, section uses x-section and bg-image.

Therefore,

.x-section.bg-image {
    background-attachment: fixed;
}

Note: If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance. We are unable to provide support for customizations under our Support Policy.

We would love to know if this has worked for you. Thank you.

#9

Hey Ruenel, unfortunately that didn’t work. Just for the record, I don’t want to apply the code below to classic sections (only to my new v2 sections). The code seems to work perfectly, I just need to find a way to solve the whitespace issue (https://imgur.com/DUP9py0). I’m sure it’s a simple solution but I can’t seem to figure it out.

Any other ideas?

/* MAKING THE PARALLAX BG FIXED */
.x-bg-layer-lower-image {
background-attachment: fixed;
}

#10

Hey Eric,

I’m sorry but we could not help with that as per our Support Policy. Please use the built-in Parallax feature of the v2 Section. Otherwise, you’d need to consult with a developer.

Thanks.

#11

Hey Christian, with the new built-in Parallax feature of the v2 Section, is there a way to make the background fixed without adding the code above? For whatever reason, it’s not working the way it used to (when I had it enabled on the classic sections).

Also, the code I provided was from another forum thread, and in that thread, the staff helped the person achieve the same result that I’m trying to achieve, so I don’t understand why you wouldn’t be able to help with this. I’ve recommended this theme to a lot of developers and a big reason why is the support.

#12

Hey Eric,

The method used for the parallax effect in the V2 Section is different than the one used in the Classic Section. V2’s parallax is smooth moving that’s why if your image’s dimensions are not bigger than the section’s dimensions, you’ll not get a drastic parallax effect. Also, try increasing the Layer Size option.

image

The Classic Parallax also doesn’t currently work in Safari 13 and there’s currently no fix for that.

Regarding the custom codes, ever since, providing custom code is outside the scope of our support service. We’re sorry if this wasn’t made clear in the previous threads. All code you find here in the forum serve only as a guide. We do not support them.

The thing is, we keep on providing custom code in hopes that users will learn to code themselves if options are not available but it gets abused. Most just use the service itself and in turn, we receive a lot of outside the scope requests which is not good for you, our customers, because of longer response times and not to mention the frustration to both users and support staff for the problems caused by custom codes.

We now provide custom development guidance via our One service. You might want to check it out.

I hope you understand.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.