[Resolved] padding works as margin in Revolution Slider?

[Christiaan]

Hi there,

I’ve been working on a site with the generatepress theme and Revolution Slider.
I used one of the RS template slides and modified it to suite my content.
However I couldn’t get the padding & alignment of the 3 elements right.
I’ve been in contact with the Themepunch support for this, and after some testing from their side (and mine) we’ve found that it seems to be going wrong specifically with the GeneratePress theme.
One of their support suggested I’d post this with you to find out what’s going on.
Here’s what he said:

Hi Chris,

You are correct, I was able see this issue. I looked into it and it seems that due to styling from your theme Padding for text layer is behaving as if it were Margin and offsetting the text layer,

http://prntscr.com/egznth

I tried testing with default WordPress theme and it seemed to work fine,

http://prntscr.com/egzi4f

Could you kindly try opening a ticket with your theme support and ask them to kindly have a look into this issue and see if they are able to provide an insight.

Let me know how it goes.

Test scenario is live at: http://wptest.ywam-fmi.org/test-slider/

Thanks!
Chris

[Tom]

I’m not sure I understand – I’m not seeing any GP related CSS in either of those screenshots.

Do they have any insight into what specific CSS is causing the issue?

[Christiaan]

Here is the response from ThemePunch:

Hi Chris,

Unfortunately I too am unable to find theme specific CSS which might be causing this issue but this behavior seems to appear when GeneratePress is activated.

By “behvaior” I mean that padding starts acting like margin, for example,

1. Layer width is 390px and when I apply 40px padding to each side, layer width should still be 390px but content inside will have 40px from the boundary of the layer on both sides,

http://prnt.sc/egzi4f

This is the correct for padding to behave and they can observe this behavior when default WordPress is activated.

2. Layer width is 390px and when I apply 40px padding to each side, layer width extends to 390+40+40px (470px) which is not the correct way for padding to work as this is margin’s behavior,

http://prnt.sc/egznth

This behavior appears when GeneratePress is activated.

Kindly apply padding to text layers in the slider and then ask GeneratePress Theme Support to have a look into the slider width a) their theme b) default WordPress theme and they will be able to understand the issue.

So here is a page with the slider with padding:
http://wptest.ywam-fmi.org/test-revslider-2/

Let me know if you need admin login, and if it is safe to post that here 😉

[Tom]

It’s possible the other tested theme has box-sizing applied to all element, which GP doesn’t.

You can try this:

.tp-caption {
    box-sizing: border-box;
}

Padding adding to the fixed width of an element is default CSS behavior. It might be something they want to add to their slider CSS.

[Christiaan]

Thanks Tom,

this seems to do it. Here is the response from ThemePunch:

Hi Chris,

Yes, this does help. I have added the code in custom CSS section of the slider so the slider should be appearing fine now.

Here’s where I have added the code,

https://www.themepunch.com/faq/custom-css-or-javascript-for-version-5-0/

Kindly thank the theme support for quick solution.

Cheers

[Tom]

Glad I could help 🙂

[Author]

Posts