Logo is incorrect size in mobile view

  • How do we adjust the height and width of the site logo in mobile view? I’ve tried changing the following code but no success. Thanks.

    @media (max-width: 1000px) {

    /* header */

    .header { padding: 30px 0; }

    .blog-title {
    font-size: 32px;
    margin-top: 5px;
    margin-right: 105px;
    }

    .blog-logo {
    display: block;
    position: static;
    left: inherit;
    top: inherit;
    float: left;
    margin-top: 0;
    }

    .blog-logo img {
    height: 60px;
    width: auto;
    }

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hey there rdsayles,

    Hope you’re well today!

    Could you post a link to your site so I can take a look. This should be possible with adding come custom CSS.

    Best regards,
    Bojan

    Thread Starter rdsayles

    (@rdsayles)

    Sure. You may view it here: https://www.reginadsayles.com/

    Hey there rdsayles,

    There are two media queries that are changing the size of the logo one with max width 600px and the other with max width 350px. Please try adding the following CSS code in the style.css file of your child theme or if your theme doesn’t have custom CSS tab add it in your site using the following plugin:

    https://www.ads-software.com/plugins/simple-custom-css 

    @media (max-width: 600px){
.blog-logo img {
height: 40px;
}
}

@media (max-width: 350px){
.blog-logo img {
height: 40px;
}
}

    Note that these is the original heights in both media queries. Change the height numeric value to what ever suits you the most for both media queries. First one will change the height of the logo for resolotions 600px and less and the second for 350px and less.

    Hope this helps ??

    Best regards,
    Bojan

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Logo is incorrect size in mobile view’ is closed to new replies.