- This topic has 7 replies, 4 voices, and was last updated 9 years, 4 months ago by
.
-
Posts
-
Hello Everyone!
Using Metro Pro, I modified the header size from the stock 270x80 to be 359x120. Looks fine on desktop, but in portrait on mobile, the right-side of the logo is cropped instead of being resized to fit the screen. Here is the code that I changed:
functions.php:
//* Add support for custom header
add_theme_support( 'custom-header', array(
// 'width' => 359,
// 'height' => 120,style.css:
.header-image .site-title a {
background-color: none;
max-width: 359px;
min-height: 120px;What else do I need to change to make the logo responsive?
Modify the CSS in the Media Queries section to get it looking the way you want on different sized screens.
I have been experimenting in that area for quite a while before posting, can't seem to find the right combo...could you be a little more specific?
For example, I added a max-width line (and tried various amounts: 50%, 80%, etc), but that just resulted in further cropping instead of scaling.
Edit:
Never mind, I just figured it out, what was missing from the CSS was:background-size: contain !important;
Nothing needs to be done with the media queries to make this work!
Interesting, I don't know why that wouldn't just be included by default, but okay.
Here is the code, bold is what I changed and what I added:
.header-image .site-title a {
background-color: none;
max-width: 359px !important;
min-height: 120px !important;
padding: 0;
background-size: contain !important;
}I'm not a professional web designer, but my understanding is that the !important declaration should be used sparingly, if at all, because it can have unintended consequences. It can override other important coding. That may be why it was not "included by default". But I do hope it works for your website!
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.