I can only solve the rule by applying !important; How do I target the class in the x-text element while I have gave it my own class. Does not want to apply without important. No other media queries apply it just take the default in the page builder without using !important;
Hey @bracas,
Your CSS does work without important because element’s have multiple classes and your only using one class so it’s overpowered. It’s best that you assign a parent class. For example, assign a class to the section or column so you can target classes under it with a higher precedence.
I’d recommend that you learn how CSS Specificity works. See https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Hope that helps.
Many thanks! I will read the article as well to become more familiar with CSS specificity. But I tried with my custom section class and column class and the .x-classes without success.
Hi there,
I tried checking the page that you have linked in the Secure Note but it goes to a 404 page.
Please try to check for the following:
Try doing it like this .equal-height .x-text.myclass
Click on the customize option of the text element then add the CSS to the element CSS field:
@media only screen and (max-width: 1024px) {
$el {
font-size: 17px;
}
}
Hope this helps.
Sorry the page has changed url will share a new.
Try putting the CSS in the Element CSS field
Preferably don’t want to create x20 code that do the same. Not good web standard, better for performance creating one css rule and add the class to the specific targeted elements. I know $el works, but that’s not the best way, everything can be archived but in good web standard and right way for performance always have to ben taken into consideration, thanks.
UPDATE
.equal-height .x-text.myclass works! great cheers
We are delighted to assist you with this.
Cheers!
Many thanks for the help!
Hi there,
I have updated the class name in my previous reply as requested.
Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.