Custom CSS How to code different fonts size for desktop and mobile

Store Design
1

I have a multicolumn disclaimer at the top of my site. In order to get the 3 columns on one line for mobile I had to use font size 15. However, on desktop it looks very small, and I would like the desktop font size to be 18.

I need help with this because my coding skills are lacking.

Here is the current custom CSS code for the multicolumn on the top of the fold of the site:

.multicolumn .theme_main_heading {
color: #0f552a;
font-size: 32px !important;
line-height: 22px;
}
.multicolumn-card__info .rte {
font-size: 15px !important;
line-height: 15px;
}
.multicolumn-card__info .rte p {
font-size: 15px !important;
line-height: 15px;
}
.multicolumn-card__info h3 {
font-size: 15px !important;
line-height: 15px;
text-align: center;
font-weight: bold;
}

Here is the link to my site: algagendirect.com

2

Hi

Try adding below css.

/* Default font sizes */
#shopify-section-template--14704591405174__fe46da56-24dc-4692-9744-6096b8a14074 .multicolumn .theme_main_heading {
    color: #0f552a;
    font-size: 15px !important; /* Default font size */
    line-height: 22px;
}

#shopify-section-template--14704591405174__fe46da56-24dc-4692-9744-6096b8a14074 .multicolumn-card__info .rte,
#shopify-section-template--14704591405174__fe46da56-24dc-4692-9744-6096b8a14074 .multicolumn-card__info .rte p,
#shopify-section-template--14704591405174__fe46da56-24dc-4692-9744-6096b8a14074 .multicolumn-card__info h3 {
    font-size: 15px !important; /* Default font size */
    line-height: 15px;
    text-align: center;
    font-weight: bold;
}

/* Media query for screens wider than 520px (Desktop) */
@media (min-width: 520px) {
    #shopify-section-template--14704591405174__fe46da56-24dc-4692-9744-6096b8a14074 .multicolumn .theme_main_heading {
        font-size: 18px !important; 
        line-height: 18px;
    }

    #shopify-section-template--14704591405174__fe46da56-24dc-4692-9744-6096b8a14074 .multicolumn-card__info .rte,
    #shopify-section-template--14704591405174__fe46da56-24dc-4692-9744-6096b8a14074 .multicolumn-card__info .rte p,
    #shopify-section-template--14704591405174__fe46da56-24dc-4692-9744-6096b8a14074 .multicolumn-card__info h3 {
        font-size: 18px !important; 
        line-height: 18px;
    }
}

If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
LuffyOnePiece

3

Thanks for your effort. However, the code isn’t working, and Shopify says there are errors.

For the time being I reverted back to my original CSS.