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?
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.
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.
Andrew,
Here is the site.
http://gots2.dallasmediaproduction.com/
Please help.
Thanks,
Cliff
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.
Sorry Andrew.
Try it now
http://gots2.dallasmediaproduction.com/
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.
/* Logo */
css works as expected!!
Thank you so much for your help!!
CLiff
Awesome :) Glad to hear that helped.
All the best.
Andrew,
Another question on this same topic. Can I move the Logo to the left approx 50 px? Need to align it more.
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.
The logo aligns well in mobile responsive state but not in desktop state.
ps. the LOGO is 924 x 420 png file with cloud transparent MASTHEAD background as a jpg.
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.
Your right…done now.
Please check.
Cool. The 50px left padding you’re adding to your logo is now taking effect. Adjust as required.
Hope that helps.
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.
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.
Looks pretty good Andrew! Thanks for your help!!
Super, glad to hear that helped. All the best :)