Question 2322 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How do I make website header logo to be full width on mobile only? – WordPress

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.

mobile preview of website

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;
}
}

`

Tags:

2

Answers


  1. 0 
    @media (min-width: 320px) and (max-width: 767px){ 
  width: 100%;
}
    Login or Signup to reply.
  2. 0

    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;

    }

    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search