Blog header does not center right.

Blog header does not center right.

Header of normale work just fine.

Pictures for example.

Knipsel.PNG

Knipseldasda.PNG

Any override css to fix this problem?

Thanks in advance!

If you need url i will send pm

Did some googling and found a fix for image centering. But hey i am noob so if code it is slow or wrong tell me.

This worked for me :

Code: Select all

.single-page > .header > img,
.blog-page > .header > img {
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }
}

A faulty design in error in blog. Maybe a fix for next update?

Hi

Code is good, but please extend it to support older browsers:

Code: Select all

.single-page > .header > img,
.blog-page > .header > img {
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}


Thanks teitbite! Works great.

Maybe suggestion for next update? Because with the fix it the same as normal header.

Have a nice day!

Hi

Glad I could help I will pass this suggestion to programmers. Hopefully they will use it.

Hi teitbite,

Sorry here i am again.

I am dealing with another isseu in the blog header. The header has parralex effect on MOBILE PHONE. How can i turn this off? All parrallex are ussaly off in the quark on mobile. I haven't changed a thing.

Thanks in advance.

Hi

Please try add this to mobile.css

Code: Select all

#gkHeaderMod img {
    left: 0;
    top: 0 !important;
    transform: none;
}


Hi i am sorry it doesn't work.

If i use that the image is center on the left. So actually not center in the middle.

I added the code at the end of mobile.css

Could you give the correct code maybe for overide because all my codes are in joomla administrator override.

And this should also be fixed in next update.

Hi

This piece of code was a guess I come up with by looking at our demo. Please tell me the url to Your site, so I'll be able to check if it works with Your site first.

Oke thanks, have send a PM!

Hi

Use this code instead:

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 {
    margin-top: 0 !important;
    top: 0 !important;
    transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    -moz-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px);
    -o-transform: translate(-50%, 0px);
}
}


Hi thanks Teitbite,

It does fix the parrallex problem BUT the headers on NON-BLOG pages does center different then it used to.

The verticale center is now wrong. I can see the upper part of the photo but almost none of down side of the photo. NOTE: the verticale center problem is only in mobile version! the dekstop still works good!

Could you correct that in the code for me?

I edited the code can you confirm if it is a correct code/fast/safe? It works for me.

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 {
    margin-top: 0 !important;
    top: 0 !important;
    transform: translate(-50%, -50px);
    -webkit-transform: translate(-50%, -50px);
    -moz-transform: translate(-50%, -50px);
    -ms-transform: translate(-50%, -50px);
    -o-transform: translate(-50%, -50px);
}
}

Hi

If this works than I believe it's fine. It's really hard to tell if it's using so many css selectors May affect a lot of area. But You know Your site best and if there is no visible consequences in unwanted areas than there is nothing threatening in this code.

Hi teitbite thanks for helping,

Could you send the 2 fixes to people that work on updates. Because i think these BUGS dont belong on quark. Really weird flaws. I hope it will get to the next update.

Cheers and thanks again!

bye

Fix 1: header center fix

Code: Select all

.single-page > .header > img,
.blog-page > .header > img {
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);

Fix 2: Parralex off in blog!

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 {
    margin-top: 0 !important;
    top: 0 !important;
    transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    -moz-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px);
    -o-transform: translate(-50%, 0px);
}
}

Hi

Ok. I will pass this information to programmers. Thank You Thread closed.