Docs

[bluetroop2]

http://cardinal.bluetroop.com

After searching the knowledge database, I was able to fix a problem I had with the top/bottom margins around my Revolution Slider by applying the following to Global CSS…

.rev_slider_wrapper {
margin-top: -20px !important;
}

However when my site is seen on phone screens, there is still a bottom space margin visible below the slider and the next section. How would I eliminate that gap?

Thanks in advance!

[Jade]

Hi there,

Please add this in the CSS customizer:

@media (max-width: 480px) {
    .rev_slider_wrapper {
        margin-top: 0px !important;
    }
}

Hope this helps.

[bluetroop2]

Okay, I’ve applied this code and there is now a new gap between the top portion on the slider and the header portion. (The gap just traded places, now showing up at the top of the slider). Please advise.

[Rupok]

Hi there,

Thanks for updating. I can’t see any gap on mobile view. I am attaching a screenshot on my end. Kindly clarify your issue with a screenshot too.

Cheers!

[bluetroop2]

Sorry, I just now placed your code back into the global CSS and you can see the gap portion just above the slider. We don’t want any separations between the top and bottom of the slider. It should meet flush with the header above and also with black content portion below.

[Joao]

Hi There,

Can you provide a screenshot of the issue?

I can´t visualize any issues on my end.

I would also recommend you cleaning cache before checking the website.

Thanks,

Joao

[bluetroop2]

Yes, I have refreshed the cache and still see it (it’s on mobile). Please see the attached file to clearly see the space gap.

[Paul R]

Hi,

To fix it, you can add this under Custom > CSS in the Customizer.

body p:empty {
    display:none !important;
}

Hope that helps

[bluetroop2]

I added it and it did not fix the gap above the slider, it only lowered the slider further down on top of the content just below it. Please check.

[Friech]

Hi There,

Did you add the code below on a text element?

<link href="http://fonts.googleapis.com/css?family=Squada+One%3A400" rel="stylesheet" property="stylesheet" type="text/css" media="all">

Please remove that and add the @import css below on your child theme’s style.css file instead.

@import url(https://fonts.googleapis.com/css?family=Squada+One);

Or

You can add this under Custom > CSS in the Customizer.

.home #x-section-1 p {
	margin-bottom: 0;
}

Hope it helps, Cheers!

[bluetroop2]

The second option seemed to correct the spacing issue, thank you. I’ll need to remember to use that code formula for future sites. I’m new to this and the Revolution Slider is a nice tool, but seems to be difficult to work with on spacing issues.

[Thai]

Glad it worked 🙂

If you need anything else please let us know.

[Author]

Posts