Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

How to use different header image on mobile

Hello all,
I am trying to solve how to replace the logo in the header of  my survey with a different image if the respondent is on mobile. I think this is easier than I think it is, but I can't quite figure it out!

Here is my CSS:

body {
    background-image: url("CXReport_Background.png");

}
#global-header {
    background-color: white;
    margin-top: 0;
    padding-top: 0;
    height: 95px;
    width: 100%;
border-bottom: 2px solid #e5e5e5;

}

}
.page_header {
    min-height: 119px;
background-color: white;

}
#header-image {
    height: 87px;
    width: 754px;
    position: absolute;
    left: 0;
}



#bottom-bar {
    width: 100%;
}

/*Start mobile style*/
@media only screen and (max-width: 800px) 
{
    body {
        background-image: none;
    }
    #global-header {
        background-color: transparent;
        
    }
    #header-image {
        height: 22px;
        width: 151px;
        position: absolute;
        left: 0;
        top: 0;
    }
    
}


And I have this in my HEAD tag:
<script type="text/javascript">
$(document).ready(function() {
    var header = '<div id="global-header"><div class="page" style="position: relative;">';
    header += '<img id="header-image" src="[%GraphicsPath()%]CXReport_Header4.png" alt="" border="0">';
    $('#page').before(header);
});
</script>
asked Sep 12, 2017 by cschlosser Bronze (1,005 points)

Your solution to the original question

Please only use this to answer the original question. Otherwise please use comments.
Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:

To avoid this verification in future, please log in or register.
...