🎁 Get Up To 70% Off and a Free Prize During Divi Black Friday Sale! Get Divi

How to Make Logo Bigger on Mobiles in Divi Theme

Blog, Divi Tutorial | 3 comments

In this article I will share how to make the logo bigger on mobiles in the Divi theme.

You can set the size of the logo in the Theme Customizer. However it does not affect size of the logo on phones.

The size of the logo gets smaller on phones and tablets. The smaller size is set in the Divi style.css. We can use custom css to override the styles and increase the size.

Custom CSS Code to Make Logo Bigger on Mobiles

To increase the size of the logo go to your WordPress Dashboard > Divi > Theme Options > Custom CSS and then add the following code.

@media only screen and (max-width: 767px) {
    body header img#logo {
        max-width: 80%!important;
        max-height: 80%!important;
        height: auto!important;
        width: auto!important;
    }
}

That’s it, after you have added the code the logo should have increased in size in the on mobile phones.

If you are not sure where to add the code in the Theme Options then please see the screenshot below for reference.

Custom CSS Make Logo Bigger on Mobiles

Custom CSS Code to Make Logo Bigger on Tablets

The code above will only affect mobile phones. If you want to increase the size of logo on tablets then you have to update the breakpoint from 767px to 980px. Here is the updated code.

@media only screen and (max-width: 980px) {
    body header img#logo {
        max-width: 80%!important;
        max-height: 80%!important;
        height: auto!important;
        width: auto!important;
    }
}

If you have to set a completely custom size just for the tablets then you can use the below code. You can see that it will only affect the website between 768px and 980px. You can change the max-width and max-height value to change the size of the logo.

@media (min-width: 768px) and (max-width: 980px) {
    body header img#logo {
        max-width: 80%!important;
        max-height: 80%!important;
        height: auto!important;
        width: auto!important;
    }
}

Here are some other Divi tutorials that you might I wrote recently.

Leave a comment below if you have any questions. Don’t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox.

About the Author

The author of learnhowwp.com is a WordPress expert with over a decade of experience, specializing in Divi. Since 2014, they have built numerous WordPress sites and developed 8 Divi plugins with over 30,000 active installations. A former support team member at Elegant Themes, they launched learnhowwp.com in 2020 to share their in-depth knowledge of Divi. Now home to over 65+ articles dedicated to Divi tutorials and insights

3 Comments

  1. Paoletto

    Perfect!
    Thank you

    Reply
  2. Raja

    I fixed my logo issus.
    Thanks

    Reply
  3. Mike Foston

    Excellent article, thank you. I’ve solved this problem before but couldn’t remember how.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Our Plugins Are Already Being Used On 30,000+ Amazing Websites.

We offer a 30 Day Money Back Guarantee on all plugins, so joining is Risk-Free!