Header image not responsive

hey to all,

I use Quark 3.0 and the headers with images are not responsive with my Iphone and neither with my Ipad or my littel tablet.

The picture is always cropped that looks not very professionel. I tried to fix it with this code:

#gkHeaderMod img {max-width: 100% !important; height: auto; }

but it doesnt work.

Do you have a beter advice? thanks for help claude

Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it? It is a lot easier for us to diagnose issues when we have a live site to examine.

Have you set the right size within the template configuration for each device?
Best regards,

Ruediger

Hi

Try add this code to override.css

Code: Select all

@media only screen and (max-width:840px) {
#gkHeaderMod img {
    left: auto;
    right: 0;
    transform: translateY(-50%) translateX(0px);
}

@media only screen and (max-width:540px) {
#gkHeaderMod img {
    height: 100% !important
}
}


thanks titebite,

gavick_groesse2.jpg

but the code doesnt work - see the attached file (thats the normal monitore figure and at my devices its just a big mess). I wrote the code in the normal override css that's right isn't it?

hmmm if you have a new idea I would be happy if you send it to me.

thanks claudia

to show whats happened this is the normal outfit

gavick groesse new2.jpg

Hi

What device are You checking it with ? This works ok on my tablet. But I think the code I gave You is not included. You have css cache activated and it was not refreshed after adding it or code was not added properly. Please disable caching so I'll be bale to check.