Logo and Lifestyle Pro

Community Forums Forums Design Tips and Tricks Logo and Lifestyle Pro

This topic is: resolved

This topic contains 12 replies, has 4 voices, and was last updated by  chantal2012 9 months, 3 weeks ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #65269

    chantal2012
    Participant
    Post count: 59

    I just started playing around with Lifestyle Pro and learning about responsive design…yikes….this may be a basic question but I just can’t seem to figure it out…my logo is 522px by 150px. How do I make it responsive so that it shrinks accordingly to whichever device? http://lifestylepro.kaleidoscopedesignstudios.com/

    #65280

    Susan
    Moderator
    Post count: 7977

    Try this tutorial:

    http://blackhillswebworks.com


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #65286

    chantal2012
    Participant
    Post count: 59

    That tutorial is just to get the logo in there….no mention of making it responsive.:(

    #65314

    Tom
    Participant
    Post count: 691

    I think these will do what you want.

    Plugin: NickTheGeek.com: genesis-responsive-header-customizer-update

    Code: http://bluecapra.com/responsive-header-genesis/


    Choose your next site design from over 300 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

    #65338

    Susan
    Moderator
    Post count: 7977

    FYI, Tom – The Genesis Responsive Header Customizer Update plugin doesn’t work with Genesis 2.0 themes


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #65347

    ithacaindy
    Participant
    Post count: 47

    I just checked out your site on my iPhone and the logo adapts to the screen in portrait mode. However, when the phone is in landscape mode, the logo does not shrink and is cut off on the right. I believe there are some set points for the design, which essentially act as case statements. You just need to create a version of your logo that then is used when that screen size is used.

    #65348

    chantal2012
    Participant
    Post count: 59

    Susan is correct – the plugin does not work with Genesis 2.0….however the code from the link that is provided above seems to be doing the trick…I’m still fiddling with it though….the only two media queries that I’m concerned about are:

    @media only screen and (max-width: 320px) and @media only screen and (max-width: 480px). Is it correct or bad coding to specify a logo size for each of these screen sizes? For instance, for @media only screen and (max-width: 320px), I specified the image to be 244px wide and 70px high…I’ve had good luck changing it with the 320px size (iphone) but if I change it for the 480px screen size, then it also increases the logo size on the 320px screen. Is there a way to specify 320px and under for one image and then another image size for 321px to 480px?

    @ithacaindy – thanks for checking…i’m making some progress and am still fiddling with it…very frustrating!!! lol

    #65363

    chantal2012
    Participant
    Post count: 59

    I did find this helpful article by Chris Coyier….http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    I’m one step closer to making my logo show properly on an iPhone and iPad but depending on if it’s in “portrait” mode or “landscape” mode, sometimes the logo gets cut off on the bottom….any thoughts?

    #65369

    Tom
    Participant
    Post count: 691

    @Susan – Thanks for that about Nick’s plugin. I hope that he finds the time to update it for G2.0

    @chantal2012 – I’ll admit I’m not the prime resource you want for designing responsiveness :) (but I get better at it daily) however I did find two things that should help:

    For your break at 1023px add/change:

    .site-header{
    margin: auto  // to center the image
    height: 150px; // was 100% and cropping - image size is 150px
    }

    Gotta run, I’ll come back for more later and hopefully can help.


    Choose your next site design from over 300 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

    #65400

    Susan
    Moderator
    Post count: 7977

    Chantal: Here’s another tutorial which specifically talks about responsive headers:
    http://thepixelista.com/responsive-genesis-child-theme-logo/


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #65401

    chantal2012
    Participant
    Post count: 59

    Hi Susan! Guess what? I literally just figured it out! Could you take a look and see? Please let me know if you can see problems?..I tested it on all devices and it seems to be ok….my site is lifestylepro.kaleidoscopedesignstudios.com.

    #65403

    Susan
    Moderator
    Post count: 7977

    Looks great! Just tested it on iPhone – portrait and landscape :)


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #65408

    chantal2012
    Participant
    Post count: 59

    Yay! I feel like I’m learning how to code all over again with responsive design…lol…I took a peek at that link from Pixelista and funny enough, that’s pretty much what I ended up doing….:)

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

You must be logged in to reply to this topic.