Community Forums › Forums › Archived Forums › Design Tips and Tricks › Header Logo Image and Responsive Image, Mindstream Theme
- This topic has 3 replies, 2 voices, and was last updated 11 years, 4 months ago by SteveVanHove.
-
AuthorPosts
-
December 5, 2012 at 3:39 pm #3483jthartMember
I'm working on a new site layout, so I have a test "lab" set up at http://renegadenoble.com/testblogtwo
One of the things I had a lot of trouble with using my previous layout (the eleven40 theme at http://renegadenoble.com) was making the image work the way I wanted. What I really want to do is take the concept a bit further with the Mindstream theme, and am just completely unsure of where to start. I'm assuming I'll have to make two different header images for the sizes I want, which I don't mind doing.
My goals:
Have one size logo used for the site when viewed at 768px or wider, and a different size when used on other screen resolutions. The exact size window (i.e. the 768) is not firm, it's just an example of what I'm after. My thought is that it would make the site easier to navigate and more presentable when viewed from a desktop versus a mobile phone.
I have the logo added for the normal site (though it is larger than I want, and I assume the reason I cannot use CSS to "resize" it is because it is called via URL instead of as an image). Once I get home I'll just resize the image I want to use and have that working fine.
This is where I have no clue what to look into doing next, though: creating a "mobile" size logo and having it switch to using the smaller size on smaller devices.
Does anyone have an idea of what I should start looking into, or a better way to handle what I'm after? It would be even more awesome to have the presentation of the image resized at multiple levels, but I'll be happy with just two.
Thanks!
December 6, 2012 at 1:58 pm #3621jthartMemberI guess the easiest way to rephrase it: can I "scale" the image in use down as the screen size reaches a specific threshold, or have it call a different logo at a specific threshold?
Also, when the screen area is reduced the header becomes really messed up in general, with a massive dark area that the logo file is overlaid upon (and since the logo is transparent, this renders it unreadable).
Anyone have a starting point I can look into? I've tried everything I can think of, and don't seem to be making progress yet.
December 7, 2012 at 10:27 am #3725jthartMemberI thought I had it figured out finally, but the smaller logo then repeated at the bottom of the screen with each widget from the sidebar. After looking closer at the CSS file, I see the #title-area section defined twice under the responsive portion of the file. Can anyone explain why this is, or if I managed to add it in at one point without realizing it? My theory is that I should be able to define the header information here for the "single column" look that occurs as the screen size becomes smaller, and it will work like a charm.
#title-area {
width: 100%;
}.menu-primary,
.menu-secondary,
#footer .creds,
#footer .gototop,
#header ul.menu,
#header .widget-area,
#title-area {
float: none;
text-align: center;
width: 100%;
}December 16, 2012 at 7:25 am #5526SteveVanHoveMemberHave you looked at Genesis Responsive Header?
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.