Reduce logo size for mobile devices
- The topic ‘Reduce logo size for mobile devices’ is closed to new replies.
Need help? Check out our Support site, then
Hi,
Is it possible to reduce the size my logo is displayed for mobile devices?
I’m currently using this code to increase the size of my logo in browser display:
img.site-logo.attachment-qua-site-logo {
display: none;
/* Hide customizer image logo */
}
a.site-logo-link {
background-image: url(‘https://i1.wp.com/huskephemera.files.wordpress.com/2018/08/logo-to-go-white-bg-crop.png?ssl=1&w=450’);
/* Add full-size image url copied from Media panel in /wp-admin */
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
display: block;
height: 130px;
/* Adjust height to taste */
width: 330px;
/* Adjust width to taste */
}
/* Mobile responsive styles */
@media (max-width: 480px) {
.site-logo {
margin: 0 auto 2em;
height: 0;
/* Removing height in favor of flexible padding-bottom, see next comment below */
padding-bottom: 100%;
/* Makes height play nice with responsive widths, adjust to taste */
width: 100%;
/* Adjust width to taste */
}
}
Thanks!
Mark Wojcik.
The blog I need help with is: (visible only to logged in users)
Actually, I believe the more important questions would be:
– How I can centre the logo in mobile device viewing, or,
– How can I bring the top of the logo to meet the top of the menu in mobile viewing for nicer aesthetics.
Mark.