Hi, I'm looking for a way to layer CSS to allow for custom menus on desktop and on mobile. Currently, my desktop menu is set up with this:
.header-title-logo a:after {
content: "Client Name To Go Here";
display: inline-block;
font-size: 36px;
font-family: Poppins;
color: black;
text-align: center;
vertical-align:middle;
font-weight:400;
padding-left: 20px;
}
However, this sizing does not work for mobile. The text overruns the menu and spills onto the site. I know that there are some simple standalone fixes for the mobile menu font size but they don't seem to work with this (or I'm doing it wrong - this is the first time I've really used CSS).
Is there a way to carry over the logic of the above CSS but create a separate styling for mobile?