Header Logo Image and Responsive Image, Mindstream Theme

Community Forums Forums Design Tips and Tricks Header Logo Image and Responsive Image, Mindstream Theme

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  SteveVanHove 2 years ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #3483

    jthart
    Participant

    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!

    #3621

    jthart
    Participant

    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.

     

    #3725

    jthart
    Participant

    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.

    #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%;
    }

    #5526

    SteveVanHove
    Participant
    Post count: 5

    Have you looked at Genesis Responsive Header?

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.