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 answer

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.
...