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 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.

• Change Mobile Menu Background Color in Divi Theme
• How To Add Buttons Side By Side In Divi Theme
• Disable Mobile Menu (Hamburger Menu) in Divi Theme Header

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.