Getting Your Logo to Span Full Width on Mobile View

The logo for most companies or individuals is the centerpiece of their product or identity. When landing on a mobile site, the logo on most responsive sites ends up being small or squished onto the screen. Divi does ok with the logo on mobile if you get it setup precisely, but there is a simple way to have the logo pop on mobile devices.

First off lets just focus on getting your logo to pop on your landing page. Chances are you can link to your responsive pages from there.

Create a standard section, make the row one column and add an image module.
Within the row settings, make sure to turn on full width under the design area.
Right click the section and tell it to disable on tablet and desktops.

Mobile should be call to action, so a need for a menu / navigation via mobile on your home page is not needed, but just in case you want a navigation menu add this step.
Add a full width section under the section you just created and add the navigation menu module.
Select your menu
Right click the section and tell it to disable on tablet and desktops.

You can add this CSS to your Divi Theme options global CSS.

@media only screen and ( max-width: 620px ) {
.home #main-header { display:none; }
.home #page-container { padding-top:0px !important }
}

This CSS will hide the standard divi header area on mobile only.

A great logo size for mobile devices is max width 320 px. and max height of 185 px.

I usually try and get my logo’s if possible to be 320px x 120px. If the logo is square I try and keep it to a max of 185px x 185px.