Resource Mobility
  • Home
  • About Us
  • Services
  • Resources
  • Contact
  • Blog
  • Portfolio Samples
Select Page

Getting Your Logo to Span Full Width on Mobile View

by admin | May 8, 2018 | Divi Mobile Site | 0 comments

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.

Submit a Comment Cancel reply

You must be logged in to post a comment.

Recent Posts

  • Best font size for your mobile devices
  • Getting Your Logo to Span Full Width on Mobile View
  • Making a Slider for Mobile Devices
  • Add Bottom Action Buttons to your Mobile Site
  • Hiding the Header and Footer on Homepage Mobile View

Recent Comments

  • Isabel Taye on How to do Blurbs Side by Side and not Stacked on Mobile

Archives

  • May 2018
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • August 2016
  • July 2016

Categories

  • Divi Mobile Site

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org
  • Facebook
  • Twitter
  • Google
  • Instagram
  • RSS

Designed by Elegant Themes | Powered by WordPress