Cornerstone: issues with sections

Support
#1

Hi there,

I have a couple of issues with the sections on Cornerstone.

1st issue: The background image does not display on the live view. However, it does show when editing in Cornerstone.
Display from Cornerstone:

Display from the front-end of the page:

2nd issue: As you can see, the margins are completely different on the front-end of the page than it is on Cornerstone. How it’s viewed on Cornerstone is correct (both image and margins), and it should not look differently on the front/live view.

Please advise (this is the homepage).

Thanks

#2

Hello @Jeypolitan,

Thanks for asking. :slight_smile:

I checked your website and noticed something very strange. I can confirm that the background image is not displaying. Upon further testing I noticed the background image won’t display only when Parallax mode is active.

To see if this is a bug or something I tried to replicate the same on my local setup wherein I added both V2 section and Classic section and added background image. After that I turned on the parallax mode and in front end every thing works absolutely fine.

When I turned on the parallax mode on your website and then checked the front end, background image shows up for a second and then disappears. Looking at the source code in dev tools I don’t see much of an issue. In that regards I think it might be a plugin conflict issue or a script conflicting. Please do the following:

  1. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
  2. If you have added any custom JS and CSS, try removing the same and see how it goes.

Thanks.

#3

Hi there,

I have tested for both plugin conflict and I have tried removing the JS and CSS, yet still the problem persists?

Could you please advise? There’s hardly any pages, posts or codes on this website so I don’t understand why today the Cornerstone background images just stopped working with parallax?

Thank you so much

#4

Hello @Jeypolitan,

Thanks for updating the thread.

We have reported this issue on our issue tracker. However, for now please add following CSS under X > Theme Options > CSS to fix the problem. I have tested the same on my end and it works fine. Please make sure to clear cache.

.x-section.bg-image.parallax, .x-section.bg-pattern.parallax {
    z-index: 99999;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#5

Hi there,

Thank you so much, that CSS code worked.

Thank you for also reporting the issue on your issue tracker. Will the issue get fixed so I no longer will need the CSS code to make the parallax image work?

Also, could you please see my point number 2 from my original comment? The margins are completely different on the front-end to what it looks like when editing in Cornerstone.

Thank you

#6

Hi There,

The gap size will not work correctly in %, please change to px instead:


Regards!

#7

Hi there,

Ok thanks.

  1. The issue with the parallax is still persisting on the homepage?
    The CSS code provided only fixes the first parallax image. If you add another parallax image as a background to a section, it still doesn’t appear? Please fix this. It’s only on the homepage (multiple parallaxes work on other pages).

  2. Also the navbar disappears when scrolling past a parallax section now? This is not meant to happen.

Please advise on both points.
Thank you

#8

Hi @Jeypolitan,

  1. May I know which image, I only see single parallax background through the code. Even if it’s not working, it should show in the source code.

  2. Yes, it’s because of the CSS, and to fix it, you’ll need another CSS for navbar.

.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    z-index: 99999;
}

The cause is due to z-index overlapping, one will be affected so you’ll need another CSS to fix it.

Thanks!

#9

Hi there,

  1. I’ve added a section with parallax image now to the homepage. You’ll see that it’s completely white (not displaying. Only the 1 parallax image gets displayed on the homepage)

  2. I’m not very happy with that, as this is an issue caused by Theme X. This doesn’t happen with the other sites which have other themes. As you can see in @Prasant’s comment 1 day ago, he said that this issue has been reported on your issue tracker. What is the updates on that? I should not need a bunch of different CSS codes to fix an issue caused by the theme. Parallax images should be displayed properly without it needing a load of different CSS codes for both the parallax and navbar. Please let me know if you have fixed the issue, and what codes I can add in the meantime to make the basic functions of the theme work (background images and navbar).

Thank you

#10

Hi @Jeypolitan

Unfortunately, we don’t have an ETA for the update that should fix this issue.

For now, I’ve deleted the CSS snippet, and I just gave the first section which has the video background a 1px margin bottom and this fixes the parallax issue in all sections on your homepage:

Thanks.

1 Like
#11

That worked perfectly.
Thank you! :slight_smile:

#12

You are most welcome. :slight_smile:

#13

Hi Prasant,

Adding 1px worked perfectly before. I’ve added a Slider Revolution on top of the page, and all of the parallaxes no longer work? I’ve tried adding 1px to the bottom margin of the first section (as described above) but that did not fix the issue? Can you please advise?

Thank you!

#14

Hello @Jeypolitan,

Thanks for updating the tread. :slight_smile:

I suggest you to please clear cache as I turned on parallax feature on couple of sections in home page and it seems to be working fine in frontend. Have recorded a screencast, please take a look.

Thanks.

#15

Hi Prasant,

I have cleared my cache and also tried in Incognito mode on two different devices, but the parallaxes still do not appear for me)? Please see attached video recording in the secure note.

Please advise.

Thank you

#16

Hello There,

I have investigated the issue and I can confirmed that the issue exist. This is a bug in the latest release of Cornerstone. Our developers were already made aware of it. Once they’ll figure it out, it will be updated and rolled out in the next update release cycle.

Please bear with us.

#18

Hi there,

This issue still persists. Do you have any updates of when the next update release cycle will be?

Thanks

#19

Hi @Jeypolitan,

There is no specific date but it’s already under review by our developers. It could be in the next update or future updates.

Thanks!

#20

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