Issue with the Steakhouse Logo

Hi,

I'm configuring the SteakHouse template.
I would like to add a bigger logo (for example 640x250) on the header page. So I altered the size of the logo in the template.css file. I also removed the default "h1" and "h2" headings in the header module, as I only want to show the logo and the icons buttons. I played around with the logo-size so that the logo and icons are on the page. Perhaps not the most efficient way to do this? ... but it looks ok

However I'm having some layout problems... When resizing the browser window the header page is not being scaled correctly. It has something to do with the logo and heading changes, as it is correctly working with the default logo and headings.

Thanks for your input.

Regards,
Koen

Hi

Please show me Your site.

Hi

Please show me Your site.

The site is not published yet.
You can easily simulate this by using a larger logo size (wide & height; for example take the original size of steakhouse logo) in template.css, and removing the h1, h2 and discover button from the the header module. So only logo and widget icons are shown.

When resizing the browser, with the larger logo, the dimensions are a bit stragen.... with the original data this works perfectly (small logo, with h1, h2 and discover button). Normally the widgets are nicely kept on the same position and the background is also well rescaled...

Regards,
Koen

Hi,

Is it clear? Can you help me?

Hi

I'm afraid I do not get same result when I'm trying to mimic this. Please ignore the problem for now and get back to me when it will be online.

Hi

I can finally see Your site, but what help do you want from me? I think Your logo look perfect like it is now.

Anyway the code to resize it for a desktop layout only and leave the smaller logo for mobile will be:

Code: Select all

@media only screen and (min-width:650px) {
#gkLogo.cssLogo {
    height: 250px;
    width: 600px;
}
}


Hi

I can finally see Your site, but what help do you want from me? I think Your logo look perfect like it is now.

Anyway the code to resize it for a desktop layout only and leave the smaller logo for mobile will be:

Code: Select all

@media only screen and (min-width:650px) {
#gkLogo.cssLogo {
    height: 250px;
    width: 600px;
}
}


I just want the logo to be bigger (to compensate the text and button that i removed) AND nicely fill up the browser window, just as with the steakhouse setup. With the steakhouse quickstart setup the header page is always nicely resized to the size of the browser.

Hi

I can finally see Your site, but what help do you want from me? I think Your logo look perfect like it is now.

Anyway the code to resize it for a desktop layout only and leave the smaller logo for mobile will be:

Code: Select all

@media only screen and (min-width:650px) {
#gkLogo.cssLogo {
    height: 250px;
    width: 600px;
}
}


Hi,

I managed to solve the problem. Thanks for pointing me in the right direction...

Hi

No problem. Can you tell us the correct solution? Just in case someone will need it.

Sure.

So i removed the h1, h2 and button from the header module. Then changed the css logo and css resizing dimensions. The result is that i have now a header page with a larger logo that is still nicely resizing to used browser-size.
Following was added to override.css

/* Override template.css: change CSS logo margins and height*/
#gkLogo.cssLogo {
margin: 100px auto 0 auto;
height: 485px;
width: auto;
}

/* Override gk.stuff.css: change header dimensions*/
#gkHeaderMod .gk-short-menu {
margin: 580px 0 150px 0;
}
@media (max-height: 1400px) {
/*#gkHeaderMod .gk-short-menu { margin: 300px 0 150px 0; }*/
#gkHeaderMod .gk-short-menu { margin: 500px 0 130px 0; }
}
@media (max-height: 1300px) {
/*#gkHeaderMod .gk-short-menu { margin: 250px 0 100px 0; }*/
#gkHeaderMod .gk-short-menu { margin: 400px 0 130px 0; }
}
@media (max-height: 1200px) {
/*#gkHeaderMod .gk-short-menu { margin: 150px 0 50px 0; }*/
#gkHeaderMod .gk-short-menu { margin: 310px 0 120px 0; }
}
@media (max-height: 1100px) {
/*#gkHeaderMod .gk-short-menu { margin: 130px 0 50px 0; }*/
#gkHeaderMod .gk-short-menu { margin: 210px 0 120px 0; }
}
@media (max-height: 1000px) {
/*#gkHeaderMod .gk-short-menu { margin: 80px 0 50px 0; }*/
#gkHeaderMod .gk-short-menu { margin: 190px 0 110px 0; }
/*#gkLogo.cssLogo { margin: 30px auto 0 auto; }*/
#gkLogo.cssLogo { margin: 80px auto 0 auto; }
#gkLogo.cssLogo { height: 435px; }
}
@media (max-height: 900px) {
#gkHeaderMod .gk-short-menu { margin: 120px 0 110px 0; }
#gkLogo.cssLogo { margin: 70px auto 0 auto; }
#gkLogo.cssLogo { height: 415px; } /*180*/
}
@media (max-height: 800px) {
/*#gkHeaderMod .gk-short-menu { margin: 32px 0 50px 0; }*/
#gkHeaderMod .gk-short-menu { margin: 140px 0 110px 0; }
#gkLogo.cssLogo { margin: 60px auto 0 auto; }
#gkLogo.cssLogo { height: 395px; } /*180*/
}

@media (max-height: 700px) {
/*#gkHeaderMod .gk-short-menu { margin: 20px 0 50px 0; }*/
#gkHeaderMod .gk-short-menu { margin: 105px 0 110px 0; }
#gkLogo.cssLogo { margin: 40px auto 0px auto; }
#gkLogo.cssLogo { height: 350px; } /*180*/
}
@media (max-height: 600px) {
#gkHeaderMod .gk-short-menu { margin: 108px 0 110px 0; }
#gkLogo.cssLogo { height: 285px; } /*150*/
}
@media (max-height: 500px) {
#gkHeaderMod .gk-short-menu { margin: 66px 0 110px 0; }
#gkLogo.cssLogo { height: 240px; } /*120*/
#gkLogo.cssLogo { margin: 30px auto 0 auto; }
}