Reply To: Logo on Mobile is not aligned properly

#1089
livemesh
Keymaster

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.