How do I make website header logo to be full width on mobile only?-CodePudding

I am trying to make my mobile logo larger on our site. The logo is perfect for desktop, but on mobile it is very small, regardless of theme settings I tweak.

I tried this snippet in additional CSS without luck:

/* MOBILE LOGO HEADER */
@media only screen and (max-width: 990px) {#logo-container img {
   width: 100%;
   height: auto;
}
}

CodePudding user response：

@media (min-width: 320px) and (max-width: 767px){ 
  width: 100%;
}

CodePudding user response：

You can add this following CSS code to change your logo size on mobile. /* It means on screens that are 640px or less, set logo image width 50% and margin and padding auto means on center.*/

@media screen and (max-width: 640px){

.header-logo img {

width:50%!important;

margin:auto;

padding:auto;

}