Reduce logo size for mobile devices
-
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.
- The topic ‘Reduce logo size for mobile devices’ is closed to new replies.