Docs

[nonenone]

Hi guys,

I’m doing the final touches on the website and I just have some styling questions.

1-How to add a white layer to the video background? (See attachment 1)

2-How to remove this annoying extra scrolling bar that comes and goes out of nowhere? (See attachment 2)

3-How to change the size of this shortcode [icon type=”heart”]? (See attachment 3)

Many thanks,

[nonenone]

This reply has been marked as private.

[Zeshan]

Hi there,

Thanks for writing in!

#1: To add a semi-transparent white color overlay to the background video, add following CSS under Custom > CSS in the Customizer:

.home #x-section-1 {
    position: relative;
}
.home #x-section-1:before {
    content: '';
    background: rgba(255, 255, 255, 0.44);
    width: 100%; height: 100%;
    position: absolute; left: 0; top: 0; z-index: 1;
    display: block;
}
.home #x-section-1 .x-container {
    position: relative;
    z-index: 10;
}

#2: To fix this, add following CSS under Custom > CSS in the Customizer:

.home #x-section-2 {
  overflow: hidden;
}

#3: Change your [icon] shortcode to this:

[icon type="heart" style="font-size: 80px"]

Adjust 80px to increase/decrease the icon size.

Hope this helps. 🙂

Thank you!

[nonenone]

Thank you 🙂 all worked perfectly expect for the extra scrolling bar, it’s still there.

[nonenone]

How can I get rid of the extra scrolling bar?

[Jade]

Please add this CSS:

body {
    overflow-y: hidden;
}

Hope this helps.

[nonenone]

It worked! Thank you Zeshan and Jade 🙂

[Thai]

Glad it worked 🙂

If you need anything else, please let us know.

[Author]

Posts