Prose: Mobile responisve headers

Community Forums Forums Design Tips and Tricks Prose: Mobile responisve headers

This topic is: not resolved

This topic contains 4 replies, has 2 voices, and was last updated by  Erin Ulrich 6 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #102938

    radiantaction
    Participant
    Post count: 8

    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 header

    Site: 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!
    Kirsten

    #103144

    Erin Ulrich
    Participant
    Post count: 57

    You 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 | Design by Insight | @erinulrich

    #103159

    radiantaction
    Participant
    Post count: 8

    Hi 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?

    #103187

    radiantaction
    Participant
    Post count: 8

    I 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

    #103213

    Erin Ulrich
    Participant
    Post count: 57

    Glad you worked it out! I just saw the closing tag was missing right away.


    Erin Ulrich | Design by Insight | @erinulrich

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

You must be logged in to reply to this topic.