Logo on Mobile is not aligned properly

[websiteitup]

The logo is fine on my desktop site, but on mobile, it is overlapping with the menu button.

How do I fix this?

http://www.goinfinity.net

Thanks.

[livemesh]

There is a bug in the CSS for logo handling. I will get this fixed in the upcoming update this week. Meanwhile, you can use the following CSS to get the issues for you fixed (pls modify values based on your logo height and width) –

#header-logo, #site-title a { width: 220px; height: 150px; }

@media only screen and (max-width: 479px) {

#header-logo, #site-title a { width: 150px !important; height: 150px; background-size: 150px !important;} /* Reduce size for smartphones only */

}

If you still have issues, pls email me a temporary login to your site through my ThemeForest profile page. Will help resolve things much quicker. Thanks

[livemesh]

For your requirements, ignore the above code and, just do the following since you have already set the logo size right through the theme options setting provided –

@media only screen and (max-width: 479px) {

#header-logo, #site-title a { width: 200px !important; height: 100px; background-size: 200px !important;} /* Reduce size for smartphones only */

}

Made this change on your site, checked on my iPhone and looks fine.

[meermakers]

Hi!

First of all, Great theme! You’ve helped me a few times with it, so the support is also great. I used the theme for one client, but he has two similar sites for two target groups. Can I use the theme twice because it’s for one client or do I have to buy an extra licence? I’m happy to purchase it again if it’s necessary. Just give me the word and I’ll buy it right away!

And now my question:

I’ve got a similar problem on my mobile phone like the one described above, but none of your solutions work for my site. also the social media icons overlap my revolution slideshow that’s just beneath it.

The site is live, so could you take a look? http://www.reparatieapp.nl

In horizontal mode on the iPhone the logo is ok, but the icons are not, in vertical mode, both the logo and the social icons are place wrong.

I’ll provide a temporary user id for the admin if it’s necessary.

Thanks again!

[livemesh]

Hi, checked your site and looks great! Lots of customization done. Here is the code you can insert into Custom CSS to make the logo pains lesser on mobile. Not everything is necessary (like the last line) but still helps. Couple of customizations done for the header is getting carried over to the mobile and messing up the layout a bit –

@media only screen and (max-width: 767px) {
.social-container { top: 0; } /* Slightly push the social icons up */
#header { height: auto; } /* Override the custom height set in Custom CSS */
#mobile-menu-toggle { top: 90px; } /* Push the toggle button down to stay with social icons since it overlaps with logo */

#site-logo a, .social-container { display: inline-block; text-align: center; } /* Center the logo on small tablets and not just smartphones */

}

You can remove the other code for logo size reduction since it does not apply for squash which embeds the image into the HTML and logo gets resized automatically on screen size reduction.

Also, unless you run into issues with specific ones, try moving most of the customization code to {theme directory}/custom/custom.css file since that way the css does not need to load for every page request as part of HTML. Let me know here if you run into further issues. Thanks and wish you the best with the site.

[Author]

Posts