Community Forums › Forums › Archived Forums › Design Tips and Tricks › Can't find the solution for a responsive header in lifestyle pro
Tagged: css, header, responsive. lifestyle
- This topic has 7 replies, 2 voices, and was last updated 9 years, 10 months ago by Chrys.
-
AuthorPosts
-
May 7, 2014 at 12:01 pm #104073ChrysMember
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.pngI have changed the size of the header that was very small by 700 x 130 following this tutorial
http://wpsites.net/web-design/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:
http://wpsites.net/web-design/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
May 7, 2014 at 3:18 pm #104087TomParticipantYour 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 ]May 8, 2014 at 2:04 am #104127ChrysMemberHi 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.
May 8, 2014 at 10:40 am #104155TomParticipantA 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 ]May 8, 2014 at 10:50 am #104157ChrysMemberThis reply has been marked as private.May 8, 2014 at 10:59 am #104158TomParticipantThis 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 ]May 8, 2014 at 11:01 am #104159TomParticipantYou 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 ]May 8, 2014 at 11:05 am #104160ChrysMemberYes it works indeed ! 🙂
Thanks so much for your help!!! You made my day 😉
Have a nice day.
Cheers!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.