- This topic has 6 replies, 4 voices, and was last updated 12 years, 2 months ago by
.
-
Posts
-
I'm doing dev work with the new Going Green 3.0 theme. I want to use an image for the header which is preset to 340 x 70 pixels. I know I can change this (I did it on the old version of the theme) but is there a way to use media queries to display different sizes of the logo based on the media query?
Right now it looks fine at the mobile/tablet sizes, but a little small on the desktop sizes.
Sure. Set your main logo in the main part of the stylesheet as normal. Then add a new rule in the relevant media query sections. So I just did a site that looks like this:
Main section of stylesheet:
.header-image .title-area {
background: url(images/logo.png) center no-repeat;
background-size: 500px 150px;
padding: 0;
}Media Query:
@media only screen and (max-width: 767px) {
.header-image .title-area {
background: url(images/logo-mobile2x.png) center no-repeat;
background-size: 320px 150px;
}
}
HTH
I do the best I can with what I’ve got. (say hey on twitter)
Can you do the same thing for header right? I have a banner that moves under my logo when I go into tablet and mobile size.
You can do the same thing for any of it. I will mess around with layouts using the Chrome Developer tools or Firebug until I have what I want, then put it in my own code. Good luck!
I do the best I can with what I’ve got. (say hey on twitter)
I know it is yet another plugin, but, Genesis Responsive Header (CAN) load different headers for different widths. CSS is leaner, but sometimes it is best to insure the logo looks good small and important things like phone numbers get enlarged so they very visible. I think it is awesome to ensure the branding looks good small and the phone numbers get large enough to see with alternate headers.
BUT that being said, I am going to try the CSS approach. That will let me dump another plugin.
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.