This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

White bar appears at bottom of logo on mobile devices

Open 19 replies premiumthemetheme-vantage
Cliffd
10 years ago · Last reply by Andrew Misplon 10 years ago

I’m using a graphic (936 x 425) as a logo and I have it centered. When viewed on a mobile device a white bar appears at the bottom of the graphic creating a space between the bottom of the graphic and the top of the menu.

How can I stop the space from happening?

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

19
  1. Cliffd 10 years, 7 months ago

    Another way of asking this is”
    How can I bottom justify the LOGO image so when I view on mobile devices the images stays aligned on the bottom edge.

  2. Andrew Misplon Staff 10 years, 7 months ago

    Hi Cliffd

    Thanks for the wait.

    The logo size changes with the screen size to maintain aspect ratio. Unfortunately, the header padding doesn’t. This leads to the problem you’re seeing. Please send a link to your site so we can see the problem in action and try resolve with a Custom CSS snippet.

  3. Cliffd 10 years, 7 months ago

    Andrew,

    Here is the site.

    http://gots2.dallasmediaproduction.com/

    Please help.

    Thanks,

    Cliff

  4. Andrew Misplon Staff 10 years, 7 months ago

    Thanks. Your site isn’t publicly accessible.

    Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:

    [email protected]

    Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.

    Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.

  5. Cliffd 10 years, 7 months ago

    Sorry Andrew.

    Try it now

    http://gots2.dallasmediaproduction.com/

  6. Andrew Misplon Staff 10 years, 7 months ago

    Thanks :)

    Please, try the following at Appearance > Custom CSS:

    /* Logo */
@media (max-width: 680px) {
	body.responsive #masthead .hgroup .logo img {
		margin-bottom: -30px;
	}
}

    Adjust the 30px negative margin if required.

    Let us know how that goes.

  7. Cliffd 10 years, 7 months ago

    /* Logo */

    css works as expected!!

    Thank you so much for your help!!

    CLiff

  8. Andrew Misplon Staff 10 years, 7 months ago

    Awesome :) Glad to hear that helped.

    All the best.

  9. Cliffd 10 years, 7 months ago

    Andrew,

    Another question on this same topic. Can I move the Logo to the left approx 50 px? Need to align it more.

  10. Andrew Misplon Staff 10 years, 7 months ago

    Sure, you can try something like:

    /* Logo */
@media (min-width: 680px) {
	#masthead .hgroup .logo img, #masthead .hgroup .site-logo-link img {
	  padding-left: 50px;
	}
}

    The media query is there to drop the left padding below 680 as we probably don’t want it on mobile.

  11. Cliffd 10 years, 7 months ago

    The logo aligns well in mobile responsive state but not in desktop state.

  12. Cliffd 10 years, 7 months ago

    ps. the LOGO is 924 x 420 png file with cloud transparent MASTHEAD background as a jpg.

  13. Andrew Misplon Staff 10 years, 7 months ago

    I can’t see the new CSS I suggested in your page. Please, confirm that it’s been added and that you’ve cleared the cache from your caching plugin.

  14. Cliffd 10 years, 7 months ago

    Your right…done now.

    Please check.

  15. Andrew Misplon Staff 10 years, 7 months ago

    Cool. The 50px left padding you’re adding to your logo is now taking effect. Adjust as required.

    Hope that helps.

  16. Cliffd 10 years, 7 months ago

    So, if I want the graphic to move more left then I need to adjust the graphic dimensions and remove unwanted space from the graphic? I want to align the left edge of “Get on…” with the “m” in Home menu.

  17. Andrew Misplon Staff 10 years, 7 months ago

    Ahh right. Please remove the previous Custom CSS and try this:

    /* Logo */
@media (min-width: 680px) {
	#masthead .hgroup .logo, #masthead .hgroup .site-logo-link {
	    margin-left: -72px;
	}
}

    Adjust as required.

  18. Cliffd 10 years, 7 months ago

    Looks pretty good Andrew! Thanks for your help!!

  19. Andrew Misplon Staff 10 years, 7 months ago

    Super, glad to hear that helped. All the best :)

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread