Docs

[kateanita]

I have a negative margin applied to the revolution slider so that it sits underneath the navigation and logo bar at the top of the page, which are transparent, so the rev slider image shows underneath. It works fine on all browsers except for Firefox:

http://homefed.stapkodesign.com/portfolio/san-elijo-hills/ here you can see the background image is being pushed down and is no longer visible behind the logobar and nav.

On pages where I have revolution slider applied via the page options, it works fine. But on pages like the portfolio pages, it doesn’t work, and I have the revolution slider inserted into the page via visual composer because there is no page option on the portfolio pages to insert the slider below masthead like there is on regular pages.

Is there a way to adjust the margin only on firefox?

I am using Ethos and have the latest version of everything.

Thanks,

Katie

[Paul R]

Hi Katie,

To fix the issue in firefox, you can add this under Custom > Edit Global CSS in the Customizer.

.single-x-portfolio .x-container > .offset {
    margin-top: 0;
}

.single-x-portfolio .x-header-landmark {
    display:none;
}

Hope that helps

[kateanita]

Thanks so much for the reply. The problem with this issue is that it moves it up in other browsers too, which breaks my layout. Is there some way to fix it for Firefox only?

[kateanita]

This reply has been marked as private.

[Paul R]

Hi Katie,

Kindly remove the negative margin code.

.single-x-portfolio .entry-content {
    margin-top: -185px !important;
}

Then add this instead.

.single-x-portfolio  .entry-top-navigation { margin-bottom: 0; }
.single-x-portfolio .x-container > .offset { margin-top: 0; }
.single-x-portfolio .x-header-landmark {  display:none; }

Hope that helps.

[kateanita]

Thanks again so much for the response. The second set of code worked perfectly in Chrome, but the hero image is still pushed down on pages where I’ve added the revolution slider in with visual composer, only in Firefox. You can see an example here of how the image is pushed down and not completely under the header, only in Firefox: http://homefed.stapkodesign.com/portfolio/market-common/

Any other ideas? Thanks again so much.

[Paul R]

Hi Katie,

Please change the code to this.

.single-x-portfolio  .entry-top-navigation {display:none; }
.single-x-portfolio .x-container > .offset { margin-top: 0; }
.single-x-portfolio .x-header-landmark {  display:none; }

Hope that helps.

[kateanita]

That worked! Thank you so much you guys are the best!!!

[Lely]

You’re welcome Katie!

Cheers!

[Author]

Posts