Fullscreen Revolution Slider 1px bottom border

Support
#1

Hi,
I’ve insert a revolution slider in my homepage (http://mannoriespace.it/) but I can’t delete a little line (1px) in the bottom of the page.
Can you help me?

Thanks

#2

Hello @solid7d,

Thanks for asking. :slight_smile:

You can add following CSS under X > Theme Options > CSS:

body.page-id-254 {
    background-color: #000;
}

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.

#3

thanks,
but maybe I have not explained well … the problem is not the color! there is a line of 1px under the revolution slider that does not allow the correct display on homepage: on the right appear the scrollbar because there is 1px in excess.

#4

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

div#rev_slider_5_1_wrapper {
    height: calc(100vh - 102px) !important;
}

Hope it helps :slight_smile:

#5

thanks,
we’re almost done… :slightly_smiling_face:
now the scrollbar has disappeared, but the 1px white line is still there…

#6

Hey @solid7d,

The given credentials does not work. Please check. For the meantime, in your slider’s General Settings, check if you have enabled the Progress Bar. You need to disable it when not in use. Please also remove the code provided previously. Setting the Slide Layout to Fullscreen and inserting the masthead class in Increase/Decrease Fullscreen Height should dynamically accomplish a fullscreen slider with header offset so you won’t have a scrollbar for your setup.

Thanks.

#7

Thanks,
I tried but it does not work …
Now I send you the exact credentials

#8

Hi

Please remove your revslider shortcode and use Slider below masthead instead.

Then follow instructions by my colleague

Setting the Slide Layout to Fullscreen and inserting the masthead class in Increase/Decrease Fullscreen Height

Thanks

#9

Done, but the situation remains the same.
But the last credentials I sent you do not work?

Thanks

#10

Hey @solid7d,

This might not be the best solution but this is the quickest I can think of for now for your particular design where you don’t have any content below the slider. I added this code to your slider’s custom CSS. What it does is it hides everything below the slider eliminating the scrollbar and the gap. It would be best to move that code to the Content CSS. You will have to use Cornerstone for that.

html {
  overflow:hidden;
}

Thanks

#11

Hi,
I put the code in the css of the page I made with cornerstone, but the 1px line returns.
Could you kindly do whatever you deem necessary to have the best solution?
You have complete authority on the site, I started doing it recently and there is nothing important to lose at the moment.

Thanks and have a good day

#12

Hello @solid7d,

Thanks for updating the thread. :slight_smile:

On my end I don’t see the 1px line. Please see the screenshot. https://cloudup.com/cqa7NZQXhoO

Please try clearing browser cache and see how it goes.

Thanks.

#13

Hi,
I work with Chrome in Windows and unfortunately, it doesn’t work …
The 1px line is gone, but the scrollbar continues to appear.
I also tried in hidden mode, but nothing …

#14

Hi @solid7d,

I went to your website and tested many different cases. I added a sample Revolution slider and also a test page and had the same problem.

Finally I managed to fix the issue by adding the body tag to the hidden overflow code that my colleague already gave you. So the CSS code is:

html, body {
  overflow:hidden;
}

body .tp-fullwidth-forcer {
    height: 100vh;
}

Now if you check the page you will see that there is no scroll bar and that one pixel problem is gone.

Thank you

#15

Thank you @christopher.amirian!

Perfect, have a nice day

#16

You’re welcome. Glad we could help.

#17

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