No responsive font options in theme. Theme's font size overrides main.less CSS with inline CSS.

[mosleyconstruct]

Problem: The site I am currently working on has buttons with text on them. At screen sizes 480 and below, some of the longer button titles get cut off.

Solution: Go to main.less and add a smaller font size for screens 480 and below. Seems reasonable, right?

It doesn't work. When I inspect the element on the live site, I see that my overrides from main.less are being overridden by inline CSS. The Theme tab in Weebly sets the font size and when the page loads, it pulls the font size from this (somehow??) and writes it inline.

The element in question is:

.wsite-button-small .wsite-button-inner 

My override in main.less:

@media screen and (max-width: 480px) {

.wsite-button-small .wsite-button-inner {
color:black !important; font-size:8px !important;
}

}

I changed the color so that I would know I was working with the correct element at the correct screen size, and I made the font super tiny so I would know for sure that it was working. The color changes, but the font size remains the same.

When I look at the code in my browser, it reads like this:

Source: mywebpage.html 57

.wsite-button-small .wsite-button-inner {
    font-size: 20px !important;
}

Source: main_style.css

.wsite-button-small .wsite-button-inner {
    color: black !important; /*THIS IS NOT BEING OVERRIDDEN*/
    font-size: 8px !important; /*THIS IS BEING OVERRIDDEN BY THE THEME'S INLINE CSS*/
}

I know there's a "variables.less" file for each of the themes, and I've even tried added this same CSS to the theme I'm using (variables_light.less), but it's still being overridden.

What file, if any, can I edit to prevent the Theme tab from ignoring my CSS?

[Bernadette3]

Thanks for posting your question. Although I'm not able to assist directly with custom coding, there should be a member here in Community that can help you out. Can you post your domain name and the page name with the button? Thanks so much!

[mosleyconstruct]

Thanks for your reply. This is an example page:

http://mosleyconstructionnc.weebly.com/hospitality.html

The button in question is the Holiday Inn Express (and others like it).

[Adam7]

That CSS that is setting it to 20px again is coming after the CSS you added making it smaller, so it's overriding it (this is the whole "cascade" part of cascading style sheets).

Take the code you added, put a <style> tag before it and </style> tag after it, then add it to an embed code element right above the button on the page. That should make it so that this is the last rule used.