Hide “Hero module" to use different font sizes for different devices

1omegazip

I would like to have different header modules on the home page in the “Hero” position, to use different font sizes for different devices,
by using suffixes (for example "hidden-lg") in “Module Class Suffix” setting in Advanced tab of the module,
as I have done for example in "maps lg” and "maps md” modules.
But it is not working.
Is there a way to get it work?

Ninja

1omegazip Hi
You are using custom code for font size in custom css

.acm-hero .hero-content .hero-content-inner h2 {
    color: #ffffff;
    font-size: 30px;
    line-height: 1.333;
    font-weight: 600;
}

to apply different code in screen size you need re define the code using media queries
Example you want above code to work till screen size is 992px

@media(min-width:992px){
.acm-hero .hero-content .hero-content-inner h2 {
    color: #ffffff;
    font-size: 30px;
    line-height: 1.333;
    font-weight: 600;
}}

To apply it on specific screen sizes

@media(max-width:1200px)and(min-width:992px){
.acm-hero .hero-content .hero-content-inner h2 {
    color: #ffffff;
    font-size: 30px;
    line-height: 1.333;
    font-weight: 600;
}}

1omegazip

Great! Thank you very much!!!

Ninja

1omegazip
You are welcome!