Custom CSS for Feat Image not taking

Hi @sukotto,

It seems that the issue with the last class having two dashes one after another and because of that it’s not getting applied on the frontend.
I was able to replicate it on my end and created a report for our devs to check it out further.

In the meantime, if you use something like this it should do the trick:

.hustle-image {
max-width: 56% !important;
}

Cheers,
Predrag

Hi @sukotto

I hope you’re well today!

You mentioned “mobile screen” so are you sure you want to use “min-width” in your CSS? I mean – should this CSS apply to all the screens wider than 785 pixels or to narrower?

If it’s the latter, it should rather be “max-width: 785px”.

However, it’s also quite possible that it’s due to “forcing” the CSS rule using “!important” so it might be better to use multiple media queries rather than use “general” rule and media query for other screen size. In such case we could use a mix of “min-wdith” and “max-width” but the order of rules would be important. For example:

/* for desktop */
@media screen and (min-width:960px) {
.hustle-image {
max-width: 56% !important;
}
}

/for tablets */
@media screen and (min-width:785px) and (max-width:959px) {
.hustle-image {
max-width: 60% !important;
}
}
/for smaller screens */
@media screen and (max-width:784px) {
.hustle-image {
max-width: 65% !important;
}
}

That’s just an example but should give you a foundation for further tweaking, I believe.

Best regards,
Adam