Modal Padding Calculated from size of "X"?

[chiphanna]

I was forever stumped by this, but it looks like the modal window’s padding is tied to the size of the “X” close window:
.ea712e612-8c68-48c8-81f2-04749617cffc.x-modal .x-modal-content-inner {
. padding: calc(10em * 2);
}

I’m playing around on http://dandost.wpengine.com/ (the pictures of people toward the bottom of the page) and came across some other similar issues, but nothing that could fix that being tied to the size of the X. This isn’t a huge deal, except on mobile, where it moves the video off screen.

[friech]

Hi @chiphanna,

Thank you for writing in, yes that is true, to resolve that you need to apply a custom CSS.

You need to formulate your CSS Media Queries so it will only affect the mobile view, you can find examples of CSS Media Queries here.

For the CSS code, I suggest that you get started with this tutorial. For the CSS code itself, I suggest that you get started with this tutorial.

You can add custom CSS under Theme Options > CSS

Hope it helps,
Cheers!

[chiphanna]

Thanks! That would remove the “X” for the close of the modal window. How do I tell the padding to not be influenced by the EM size of the “X” for the close of the modal window? Ideally, I would just have the padding ignore the “X” and the padding would be what I put in the respective settings. Does that make sense?

[christian]

Hey @chiphanna,

You can override that using the Element CSS. In the CSS you showed us in your first post, just replace the random generated CSS with $el. You can learn more about that in the documentation here https://theme.co/docs/element-css

$el.x-modal .x-modal-content-inner {
    padding: 0;
}

Please just remember that I only provided code to show you that we have an Element CSS feature in our builder that allows users to customize the element’s CSS. We don’t actually provide custom codes as part of our theme support so if you encounter issues with custom codes, you need to consult with third party developers.

Hope that helps and thank you for understanding.

[chiphanna]

@friech Both the links titled “this tutorial” link to the same Youtube video, is that correct? Just wanted to make sure I wasn’t missing something!

[prakash_s]

Hello @chiphanna

Yes both the title is linked with the same tutorial you can learn CSS form here. It is for absolute beginners. We are very sorry for your confusion.

Have a great day!
Thanks