Hi,
For the Twenty Twenty-One theme, add the following CSS code in the Customizer > Additional CSS panel to reduce the header’s spacing on mobile devices. As I’m not sure which padding you want to reduce, I’ve added comments to the code to indicate which part of the header is affected by each CSS rule. Keep only the rules you need. You may also adjust the values to your liking.
@media only screen and (max-width: 651px) {
/* reduce spacing above and below logo */
#masthead .site-logo { margin: 0; padding-bottom: 20px; }
/* reduce spacing between black border and menu */
#masthead { row-gap: 10px;}
/* reduce spacing below menu */
#masthead { padding-bottom: 20px; }
}
Hope that helps,
Yann
