Issue with the Steakhouse Logo

GK User
Mon Oct 13, 2014 6:33 pm
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
User avatar
Junior Boarder

teitbite
Mon Oct 13, 2014 9:39 pm
Hi

Please show me Your site.
User avatar
Moderator

GK User
Mon Oct 13, 2014 10:32 pm
teitbite wrote: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
User avatar
Junior Boarder

GK User
Tue Oct 14, 2014 8:08 pm
Hi,

Is it clear? Can you help me?
User avatar
Junior Boarder

teitbite
Thu Oct 16, 2014 1:29 pm
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.
User avatar
Moderator

teitbite
Sun Nov 02, 2014 12:43 pm
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;
}
}
User avatar
Moderator

GK User
Sun Nov 02, 2014 7:21 pm
teitbite wrote: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.
User avatar
Junior Boarder

GK User
Mon Nov 03, 2014 10:30 pm
teitbite wrote: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...
User avatar
Junior Boarder

teitbite
Wed Nov 05, 2014 11:58 am
Hi

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

GK User
Wed Nov 05, 2014 7:45 pm
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; }
}
User avatar
Junior Boarder


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.