Centering text

Hi,

I am trying to center the header text right after removing the shoe on front page (ecommerce theme). But something seems wrong.

Code: Select all

@media (min-width:840px) {
.gkStoreInfo {
  margin: 500px auto 0 auto;
}


This centering works ok when i remove the shoe in the ecommerce theme. But after applying the CSS in template/advance settings headers on other pages dont work the only page that does work is the homepage.

It only has problems on the phone not the dekstop

Could you please post an url to your site?

I have send a pm with my website.

Home works now but the headers of other pages not.

The problem is with css itself:

Code: Select all

@media (min-width:840px) {
.gkStoreInfo {
  margin: 400px auto 0 auto;
}


You have opened media query but didn't clse it. Correct form is:

Code: Select all

@media (min-width:840px) {
.gkStoreInfo {
  margin: 400px auto 0 auto;
}
}


Thanks! It works now!

Was my first time with @media haha.

Another qeustion:

If i scroll down on my website it goes a little up, it is pretty annoying. Could you check that at URL i have send on a mobile phone?

I am using galaxy s4 with chrome

Sorry, but I can't reproduce that issue (I have checked on iPhone 5, iPhone 6 and Chrome emulator).

Hi

I was asked to join conversation. I can see the problem, but I have no developer tool on android device to tell for sure what is causing it. Try maybe use this code. I'm only guessing:

Code: Select all

@media (min-width:840px) {
.gkStoreInfo {
    left: 50% !important;
    margin: -150px 0 0 -175px !important;
    position: absolute !important;
    top: 50% !important;
    width: 350px !important;
}
}


Hi Teitbite,

Thanks for answering, but it doesn't work.

This problem has nothing to do with my first post of topic. Without this code it also doesn't work:

Code: Select all

@media (min-width:840px) {
.gkStoreInfo {
  margin: 500px auto 0 auto;
}


So this code is not the problem the problem is probally quark.

Thanks in advance

I have included the css in override so you can check again

xWiz - did your site change? I don't see override.css enabled on the site you have provided via pm.

i have put in template settings:

extension > template > advance setting i have copied in here

Could you please use override.css instead, it is easier to debug problems this way.

Ok done! I have removed in settings and put in override.css

Weirrd!! The problem is now gone!!

Maybe I'm checking wrong url? You have provided me:
www.test.****.nl which redirrects to www.***.nl/test.
I still don't see override.css loaded there.

The redirect is correct.

I am not used to override.css i turned override.css ENABELD

and paste it in here: templates/gk_quark/css/override.css

Is this correct?

Ok the override.css is turned on and same problem with scrolling on phone

Ok, now it works. Please let me check that issue again.

One more thing - does this happen on homepage only or on other pages also?

Only homepage.

Maybe that is because the other pages are almost empty.. not sure..

Ok, the problem is really awkward... It seems that android phones "resizes" its screen size when menu (where you can set site address) shows and hides. This way when you are starting to scroll down, at the first moment only menu hides - and you can see bottom of header mod. But our template tries to always display header with width same as screen size (so it is full screen) - to bu using JavaScript it detects the screen size has changed - and redraws the header (so the header bottom dissapears and you can see small "jump").
Now I don't have any idea how to fix it just now. I can report that issue, but it seems to be a browser quirk and I'm not sure if it can be addressed.

What is interesting - same happens on our demo server:
https://demo.gavick.com/joomla3/quark_ecommerce/

Yeahh it is really akward ahahahahhahaha!!

Hope to hear soon from you with more info about the fix, because my website is not ok now!

Its awkward from programistic point of view which is even worse...
I'm also waiting for dev response. I'll write back as soon as I get an answer.

Hi Teitbite,

Thanks for answering, but it doesn't work.

This problem has nothing to do with my first post of topic. Without this code it also doesn't work:

Code: Select all

@media (min-width:840px) {
.gkStoreInfo {
  margin: 500px auto 0 auto;
}


So this code is not the problem the problem is probally quark.

Thanks in advance

as I said it was a guess. You can clearly see that the formatting is changing. I believe it's the content of header pushing the header window down while changing. It's hard to catch this on a device without developer tool. Anyway I can see programmers assigned this bug for fix an hour ago, so it should be done soon.

Thanks Teitbite for the information!

If there is any other news in the future please let us know!

Cheers!

I'll post an info as soon as I'll get an reply from our devteam.

Its awkward from programistic point of view which is even worse...
I'm also waiting for dev response. I'll write back as soon as I get an answer.

Hi any news? it is been 2 months now.. and the bug is still here...

Hi any news now 4 months.. please an answer....

Hi

Maybe I'll be able to help. Please tell me the url to the page and point to the element You want to center.

Hi

Maybe I'll be able to help. Please tell me the url to the page and point to the element You want to center.

The centering is not the problem anymore read this:

Ok, the problem is really awkward... It seems that android phones "resizes" its screen size when menu (where you can set site address) shows and hides. This way when you are starting to scroll down, at the first moment only menu hides - and you can see bottom of header mod. But our template tries to always display header with width same as screen size (so it is full screen) - to bu using JavaScript it detects the screen size has changed - and redraws the header (so the header bottom dissapears and you can see small "jump").
Now I don't have any idea how to fix it just now. I can report that issue, but it seems to be a browser quirk and I'm not sure if it can be addressed.

The jump is the problem, try it on a android phone please.

https://demo.gavick.com/joomla3/quark_ecommerce/

Hi

Can You please be a little bit more specific ? I'm checking it on with Android device, but I cannot spot any jumping.

It is like the topic starts from the beginging.. damm

here the video.....

https://youtu.be/65S-UIzbx0o

Please give a solution as soon as possible. The template steakhouse has the same isseus...

Hi

None of my phones is showing an issue as on Your video. So lets make some test to learn what can be causing it. Add this to override.css:

Code: Select all

@media only screen and (max-width:600px) {
.frontpage #gkHeaderMod {
    height: auto !important;
    max-width: none !important;
    min-height: 0 !important;
}

.gkStoreInfoAdditional {
    padding-bottom: 35px;
    padding-top: 35px;
    position: relative;
}
}


Didn't work and it did make the header smaller....

It is on an android 5 phone samsung galaxy s4

Hi

I've reported this to programmers. Hopefully they will be able to help here.

Hi

Please try edit file /js/gk.scripts.js and remove:

Code: Select all

      jQuery(window).resize(function() {
         adjust_header();
      });


Didn't work, i removed that but same isseu

Hi

That's interesting, because this removed header resizing entirely. I'm gonna ask them again and get back to You.

Hi

Programmers asked to check if mobile browser cache was cleared and if yes than remove this function too:

Code: Select all

      jQuery(window).resize(function() {
         parallax_heights = [];
         parallax_tops = [];
         
         jQuery(parallax_containers).each(function(i, container) {
            container = jQuery(container);
            parallax_heights.push(container.outerHeight());
            parallax_tops.push(container.offset().top);
         });
      });


Cleared cached, removed both functions and still same problem