Reply To: Header Enlarge, Shrink

[Andy]

Hi John, to apply different rules for different screen sizes you would wrap the code like so:

for screen widths up to 768px…

@media screen and (max-width: 768px) {
    /* your CSS code/rules here */
}

…and for screen widths up to 1024px

@media screen and (max-width: 1024px) {
    /* your CSS code/rules here */
}

so for example the following gives 20px top and bottom padding of the site-branding element on devices above 768px width and 5px padding on devices less than or equal to 768px width

#masthead.scrolled #site-branding {
    padding: 20px 0;
}

@media screen and (max-width: 768px) {
    #masthead.scrolled #site-branding {
        padding: 5px 0;
    }
}