Quark Restaurant css Direct vs. Override editing differences

Hello

When changing LOGO image position and dimensions,
I'm getting different results if I edit directly template.restaurant.css
compared to if I put my code on override.css (after enabled CSS
override on advance template settings)

Original template.restaurant.css code

#gkLogo img {
display: block;
height: auto;
margin: 0px;
max-width: 300px;
}


1- Direct template.restaurant.css editing (css override OFF):

a) Changes:

#gkLogo img {
display: block;
height: auto;
margin-left: 50px; /* changed */
max-width: 400px; /* changed */
}

b) Results:

When I change my browser windows size all responds well and,
although there is some overlapping of the classic menu at a given
point, bellow a certain width (+- 630px) the logo even decreases in
size so it will not overlap the (now) off-canvas menu icon (even with
only 286 px width).

"http://www.webdesignportugal.net/temphost4"


2- override.css editing (css override ON):

a) Changes:

after put back the original code on template.restaurant.css
and enabled css override on the template advanced settings,
on the only code inside override.css file is:

#gkLogo img {
margin-left: 50px;
max-width: 400px;
}

b) Results:

When I change my browser windows size the logo never resizes
itself and after +- 470px width starts the (now) off-canvas menu
icon overlapping it.

Also, if I continue to decrease width, bellow this point (+- 470px),
the logo is cut off by the browser frame and it starts to be only
partially visible.

"http://www.webdesignportugal.net/temphost5"


Questions:

1- Why this difference in editing directly template.restaurant.css
compared to if I put my code on override.css

2- In certain points during browser width decreasing there are black bars
on the left and right of the header image.
Where can I change this to white (as I will use a white image in future)?

Lots of thanks in advance,

Miguel Garcia

I forgot to say this:

This is valid for firefox, chrome, safari and opera (latest version).

As ever, IE is always the same aberration and in this case there is
overlaping of the off-canvas menu even with browser window maximized
(on a 1280x1024 pixel monitor).

Another important update:

if I:

do not edit template.restaurant.css (by leaving it as it originally is),

disable override.css in template advanced settings

and

only put the code I want in the Custom CSS code field,


#gkLogo img {
margin-left: 50px;
max-width: 400px;
}


all work well (tested on localhost xampp)


So, why only editing edit template.restaurant.css to the code above or putting
it directly on Custom CSS code field make things work as they should ?

Given this, why putting the needed code in override.css (and enabling it) is not working?


By the way, can you tell me what is the name and where is located the file that stores Custom CSS field data ?

Thanks again,

Miguel Garcia

Hi

This file is called override.css

What matter here is an order of loading files. If You have overwritten one of the last files than any device related styles will be overwritten and logo will not resize. In such case You need to put an override for certain screen widths with a code similar to:

Code: Select all

@media only screen and (max-width:479px) {
#gkLogo {
width: 100px;
height: auto;
}
}