Community Forums › Forums › Archived Forums › Design Tips and Tricks › Prose: Mobile responisve headers
- This topic has 4 replies, 2 voices, and was last updated 9 years, 11 months ago by Erin Ulrich.
-
AuthorPosts
-
April 29, 2014 at 10:22 am #102938radiantactionParticipant
Hi,
I'm trying to upload different headers for different device sizes for the first time in prose. I've uploaded various headers and added links to the css file. However, when I test it, it is only pulling the original headerSite: http://dev2.khtestsite.com - This is a practice site as I'm trying to understand the process.
I've added the following to the custom css:
@media only screen and (max-width: 1024px) {
.header-image .title-area a {
background: url("http://dev2.khtestsite.com/wp-content/uploads/2014/04/header1024.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
@media only screen and (max-width: 768px) {
.header-image .title-area a {
background: url("http://dev2.khtestsite.com/wp-content/uploads/2014/04/header-768.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
@media only screen and (max-width: 480px) {
.header-image .site-title a {
background: url(http://dev2.khtestsite.com/wp-content/uploads/2014/04/header480.png) no-repeat;
height: 115px;
width: 480px;
}
@media only screen and (max-width: 320px) {
.header-image .title-area a {
background: url("http://dev2.khtestsite.com/wp-content/uploads/2014/04/header320.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
@media only screen and (max-width: 240px) {
.header-image .title-area a {
background: url("http://dev2.khtestsite.com/wp-content/uploads/2014/04/header-240.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}Can someone help me see what I'm doing wrong?
Thank you!
KirstenApril 30, 2014 at 6:23 pm #103144Erin UlrichParticipantYou are missing the closing }
It should be:
@media only screen and (max-width: 1024px) { .header-image .title-area a { background: url(“http://dev2.khtestsite.com/wp-content/uploads/2014/04/header1024.png”) no-repeat scroll 0 0 rgba(0, 0, 0, 0); } }
and so on...
Erin Ulrich | Genesis Recommended Developer | Design by Insight
April 30, 2014 at 10:35 pm #103159radiantactionParticipantHi Erin,
Thank you so much for your reply. I added the additional closing tags and unfortunately it didn't change anything.Can you think of anything else I can do?
May 1, 2014 at 8:31 am #103187radiantactionParticipantI got this fixed and am posting my solution for anyone else using Prose. The steps I used are as follows:
Remember to copy your files prior to any changes, just in case...
1. Remove the theme support for the custom header from your init file.
2. Under theme settings, make sure "image logo" is selected.
3. Use the code listed above but instead of the following selectors:
.header-image .title-area a
use
#header
instead
4. use !important for each.Kirsten
May 1, 2014 at 1:06 pm #103213Erin UlrichParticipantGlad you worked it out! I just saw the closing tag was missing right away.
Erin Ulrich | Genesis Recommended Developer | Design by Insight
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.