Docs

[markw1]

Hi this is related to the Topic – https://community.theme.co/forums/topic/lightbox-sizing-and-layout-issues/

The code for a lightbox pop-up and therefore am using a <a></a> tag is working in a Cornerstone Section
And the Button is correctly styled using ->

x-btn x-btn-global x-btn-block

However when I add this code to a HTML layer on RevSlider, the Button does not appear correct.

The Button is much smaller, less padding, etc etc.
I tried to set this styling in the Style options for the layer but this didn’t have any effect.

How can I get this Layer to display correctly – i.e. a Large Jumbo Button.

I will add URLS in private comment.

[markw1]

This reply has been marked as private.

[Friech]

Hi There,

Thank you for writing in but where can I see the slider? If you would not mind please provide us login credentials in private reply so we can take a closer look.

Have you try adding those classes (x-btn x-btn-global x-btn-block) on the button layer class field?

Cheers!

[markw1]

This reply has been marked as private.

[Lely]

Hello Mark,

The theme’s CSS for X button inside revslider is overriding the CSS for jumbo button. This is a CSS specificity issue. Please add this custom CSS on Appearance > Customize > Custom > Edit Global CSS

.rev_slider_wrapper .x-btn.x-btn-jumbo {
    padding: 0.643em 1.429em 0.786em; !important;
    font-size: 28px !important;
}

Hope this helps.

[markw1]

This reply has been marked as private.

[Rad]

Hi there,

It has javascript error originating from RevSlider. There is always a problem when placing external functionality within the slide. How about putting your lightbox button and shortcode outside the slider, then add another button in the slider that will act as the proxy, so when click, it will trigger the lightbox button.

The sizing is different on the slider, it will pre-add styling to it which may be affecting the lightbox content size.

Thanks.

[Author]

Posts