Header Image On Mobile

Hi

Is it possible to use different header image for desktop and mobile device ?
50% of the image is missing on the mobile device. Please take a look at stinejessie.com

Could you please post an url to your site?

Could you please post an url to your site?

the url is stinejessie.com

It is possible but not that easy. Instead using image attached to a module you would need to attach image with override.css and then use mesia-queries to load different image for smaller screens.

Ok , so its not possible to just paste something into override in template settings and use a different image on mobile devices?

Hmm.. I have an idea:
Please edit: /templates/gk_john/css/override.css and add at its end:

Code: Select all

@media (max-width: 640px) {
    #gkHeader div.custom.gk-header2 {
        background-image: url('/images/headernew2.jpg') !important;
    }
}


Now place upload second image to: http://stinejessie.com/images/headernew2.jpg (same way as you did with headernew.jpg file).
You can adjust 640px value to change "break point" width.
Remember to enable "CSS override" in template settings - advanced section.

Thank you so much =)

If someone else is going to use this, remember to change the image url in the code.

Oh, true, I have forgot to put it in your site context .
Is there anything else I can help you with regarding this topic?

Hmm.. I have an idea:
Please edit: /templates/gk_john/css/override.css and add at its end:

Code: Select all

@media (max-width: 640px) {
    #gkHeader div.custom.gk-header2 {
        background-image: url('/images/headernew2.jpg') !important;
    }
}


Now place upload second image to: http://stinejessie.com/images/headernew2.jpg (same way as you did with headernew.jpg file).
You can adjust 640px value to change "break point" width.
Remember to enable "CSS override" in template settings - advanced section.

Hi. please take a look at http://www.kasperix.com.

Added the following code (CSS override is enabled):

Code: Select all

    @media (max-width: 640px) {
        #gkHeader div.custom.gk-header2 {
            background-image: url('/images/headers/sdk_header_mobile_580x950.jpg') !important;
        }
    }


Opening the URL with Safari on an iPhone 5 (iOS 8.3) still shows the desktop (large) picture.

Any idea, what I am missing? Thank you.

Could you please disable css compression?

Could you please disable css compression?

Done. Sorry for the late reply. I somehow expected a notification if and when anybody replied to my post. Will check proactively and more frequently from now on.

Thank you.

Maybe the css itself is wrong:

Code: Select all

#gkHeader div.custom.gk-header2


there is no such element, perhaps you need:

Code: Select all

#gkHeader div.custom.gk-header1


Ok, that's a bit embarrassing. Thank you for your help!

Is there anything else I can help you with regarding this topic?

no, thank you. much appreciated.

Feel free to post new forum threads if you have any other questions.