Isolate CSS between elements

[jasonixr]

I’ve been leveraging the element css feature with great success across a bunch of different websites.

However I’ve ran into a situation I’m not sure how to deal with. Using the bundled Email Forms (by Themeco) plugin with Pro I have a form on a website. The problem is that for desktops I want some CSS applied and different CSS for mobile.

The form is in two different elements, one is suppressed for desktops and the other for mobile. If I apply CSS to the .submit class in either element it works but it applies to all the forms on the page. I can’t get it to apply to just the .submit class in that individual element.

If I try this CSS it does nothing:
$el.submit {
font-weight: 700;
width: 300px;
}

It only works if I omit the “$el” but then it applies to the entire page and all elements with .submit inside:
.submit {
font-weight: 700;
width: 300px;
}

[friech]

Hi Jason,

Thank you for writing in, this selector $el.submit means to apply your CSS to an element with a class of .submit. But that is not what you’re trying to do, what you need to do is apply your CSS to the .submit button inside the element.

You need to put a space between the $el and .submit

e.g

$el .submit {
font-weight: 700;
width: 300px;
}

Hope it helps,
Cheers!