Skip links

Main navigation

Forum navigation

Header Logo Image and Responsive Image, Mindstream Theme

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

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.

I 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.

I 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.