$el css on Content Area Modal not being applied

Support
#1

I have a row containing a grid with 9 columns set to 14em which contain a headline and a content area modal.
Content Area Modals appear (to me) too wide on the largest screens and way too narrow on XS.
So I’ve set thd CSS below on the Row, but it doesn’t seem to be taking effect. (Once solved I will set the css to work globally for all content modals)

@media (min-width:981px) {
$el.x-modal .x-modal-content-outer {
width:50%;
margin:0 auto !important;
}
}
@media (max-width:767px) {
$el.x-modal .x-modal-content-inner {
padding: 0 30px !important;
}
}

What have I missed?
Steve

#2

Hello Steve,

Thanks for writing in!

When using content area modal, you will need to set a maximum width first so that even on large screens, you will have the set width.

And then you can set a minimum width for the smaller screens:

@media (max-width:767px) {
  $el.x-modal .x-modal-content {
    min-width: 10em;
    max-width: 15em;
  }
}

Feel free to adjust the values.

#3

Using the ems makes much better sense and ALMOST fixes the problem. What I’m ffighting is the padding on the .e654-8.x-modal .x-modal-content-inner { padding: calc(3em * 2);} It’s too wide for portrait phone size (<480).
I’ve added this code to the row that contains the columns containing the content modal, but it has no effect.

@media (max-width:480px) {
$el.x-modal .x-modal-content-inner {
padding: 0 20px !important;
}
}

#4

Hey @mtscottcog,

Your code won’t work because of incorrect targeting. Please insert your code in the Content Area Modal’s Element CSS. I’ve tested it in my site and it works.

Hope that helps.

#5

Yes, targeting the specific content modal’s $el works. But that adds bulk to the css with each one,9 in this case, getting the same css modification.

My approach (targeting the row’s $el) was demonstrated several times by Cory in your magnificent videos. That’s the approach I was attempting. What did I miss in targeting that way?

#6

The modal is outputted outside the Row so it’s not targeted. For modals, you really need to add in the element’s Element CSS.

I do agree with Kory’s approach for other elements. In fact, that’s what I do.

Hope that helps.

#7

THANKS! Yes, I just came to the same conclusion. Instead I’ve added a slightly modified version to my child theme’s style.css so if’s now my default for all content modals.

Appreciate your staff much! The theme and the support are truly amazing.

#8

We are delighted to assist you with this.

Cheers!

#9

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