Logo and Lifestyle Pro

[chantal2012]

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/

[Susan]

Try this tutorial:

http://blackhillswebworks.com

[chantal2012]

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

[Tom]

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 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Susan]

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

[ithacaindy]

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.

[chantal2012]

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

[chantal2012]

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?

[Tom]

@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 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Susan]

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

[chantal2012]

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.

[Susan]

Looks great! Just tested it on iPhone - portrait and landscape 🙂

[chantal2012]

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....:)

[Author]

Posts