Frontpage showing wrong on tablet (768×1024)

Hi,

there is an issue on this page https://www.dealfabetboeken.nl/ when viewed on a tabled (768 x 1024) > the image is NOT scaled correct and shows black bars on both sides...

The page is set with suffix frontpage and dark-bg.

I can reproduce this issue on your own demo page
see attachment

Hope you have a fix as this is an awesome template

Selection_180.png

Hi

Try add this to override.css

Code: Select all

@media only screen and (max-width:840px) {
#gkHeaderMod img, .single-page > .header > img, .blog-page > .header > img, #k2Container.single-page > .header > img, #k2Container.blog-page > .header > img {
    height: 175% !important;
    top: 40%;
    width: auto !important;
}
}


No, doesn't work

Did this work on the quark demo page?

Hi

Not sure about demo, but it works in my copy of this quickstart. I cannot see this code on Your site. Have You removed it ?

Anyway here is a different code I've just tried.

Code: Select all

@media only screen and (max-width:840px) {
#gkHeaderMod img, .single-page > .header > img, .blog-page > .header > img, #k2Container.single-page > .header > img, #k2Container.blog-page > .header > img {
    height: auto !important;
    max-width: none !important;
    width: 100% !important;
}
}


Hi, I pulled it from the website because this is production site and I cannot leave it there not knowing if it breaks something else for several days...

I have tried your new code and I now see what the problem is:
I put the code into the templates custom css field.
It is in the page (I can see it via pagesource), but it is directly 'overruled' by small.tablet.css line 41
Thus the fixed code is overwritten again with the code that generates the problem.

putting the code in override.css works!

Thanks for looking into this!

Is this going to be fixed in small.tablet.css as well (root-cause)?

Shoot...
it now breaks mobile view....
https://www.dealfabetboeken.nl/alfabetboeken/team

Selection_017.jpg

Hi

In template setting You can determine the height of header for each mobile device. Just lower id down for mobile.