Change layout on Mobile & tablet mode

Hello my friends,

i have a question for the forum. I have noticed that on PC mode the logo on the top of the page http://www.pentagon-store.com it appears correctly but on mobile or on the tablet version logo holds the dimensions of the PC's logo. How can i change the preferences in order to make the logo appears smaller on tablet and bit smaller on mobile?

Can someone help me on it?

Thanks a lot..

I would suggest to use override.css and medie queries that correspond to those used with loading stylesheets:

Code: Select all

<link rel="stylesheet" href="http://www.pentagon-store.com/templates/gk_storebox/css/small.desktop.css" media="(max-width: 1100px)" />
<link rel="stylesheet" href="http://www.pentagon-store.com/templates/gk_storebox/css/tablet.css" media="(max-width: 1030px)" />
<link rel="stylesheet" href="http://www.pentagon-store.com/templates/gk_storebox/css/small.tablet.css" media="(max-width: 820px)" />
<link rel="stylesheet" href="http://www.pentagon-store.com/templates/gk_storebox/css/mobile.css" media="(max-width: 700px)" />


to access logo You should use:

Code: Select all

#gkLogo img {
width: 100px;
}


(size is just an examlpe).

So working media query in override.css should look this way:

Code: Select all

@media (max-width: 1100px) {
  #gkLogo img {
    width: 300px;
  }
}
@media (max-width: 1030px) {
  #gkLogo img {
    width: 250px;
  }
}


etc.

Ps. - remember to enable override.css in template settings.