Wordpress: Logo gets on small screens a very small size

Question

My logo has a normal size on the screen like this

and if I change the screen-size of the browser then my logo gets very small.

The logo mustn't have a small size like in the previous pictures. It should be more like in the next picture:

I know there a lots of different themes but is it possible to keep the logo big by smallering the screen?

Answer 1

Most WP themes have pre-set media queries that provide breakpoints to make the site responsive to screen size changes.

You can override these with custom CSS, but I'd find the breakpoint first. Use this tool and then add something like the following to your CSS:

@media screen and (max-width: 400px){
  .logo{
     width:200px !important;
 }
}

This changes the width of the logo when the screen size is 400px or smaller. Change 400px to whatever value the breakpoint is set at. You can edit width or height this way, but there's no need to do both unless you want to.

Edit: ".logo" in the CSS above should be changed to whatever the logo's class is.

Answer 2

I am assuming you are using a theme and did not build this from scratch. Chances are your theme has a responsive image declaration, such as:

.someAwesomeDivName img {
    width:100%;
    height:auto;
}

and the parent div holding that image is a certain width, which effects the image inside it. Check there first, and go from there.