Can't find the solution for a responsive header in lifestyle pro

[Chrys]

Hi,

I've seen this topic many times in here and I have tried most of the solutions but I cannot find one that would fix my problem.
I have made a custom header with text on it and a logo on the right. It's a 700 x 130 png image with transparent background:
you can see it here
https://www.dropbox.com/s/00bqq8pvyilztnp/header%20feminin%20business%20transparent.png

I have changed the size of the header that was very small by 700 x 130 following this tutorial

Customize Lifestyle Pro Theme Header Image Area

I have not a full header but just increased the size due to the logo.

The problem is, the text is cut when I decrease the size of device.

So I have tried this:

Customize Mobile Responsiveness of Lifestyle Pro Theme Header

It didn't work for me, the text is cut. It works on a test website where instead of a logo I have a plain coloured square but not when there is a png image with text in place of the logo.

I have tried to create another logo for small devices with less text and tried to add this to my css:

@media only screen and (max-width: 480px) {

.header-image .site-title a {
background: url(url of my image here) no-repeat;
height: 80px;
width: 414px;
}

But the image didn't show when reducing the screen size...
To do that I have followed this tutorial:
http://thepixelista.com/responsive-genesis-child-theme-logo/

So what do I miss? If I cannot make my banner look good on small devices what is the procedure in order to make another image appear on small device? I know it's possible but I'm stuck here having tried everything I could stumble on...

Does anyone can help?

Kind regards

Chrys

[Tom]

Your media query is missing a closing }.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Chrys]

Hi Tom,

Thanks for pointing that. I forgot one in this post but not in my stylesheet though... So I still don't know why it won't work..

Has someone an idea?

Kind regards.

[Tom]

A link to your site, please. Failing that, please post your stylesheets to pastebin or similar.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Chrys]

This reply has been marked as private.

[Tom]

This works:

@media only screen and (max-width: 480px) {
	.site-title a {
		background: url(path/to/your/smallimage) no-repeat !important;
	}
}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Tom]

You could also add this to the MQ:

.site-header {
  padding: 0px;
}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Chrys]

Yes it works indeed ! 🙂

Thanks so much for your help!!! You made my day 😉

Have a nice day.

Cheers!

[Author]

Posts