Change size of svg container

Hello,
I am using the events template, but the header logo is cut while the small logo is ok, was just wondering what I could do to expand the width of the header logo so that it all fits.
Thank you. (currently working on localhost so I cannot post a reasonable link.)

Hi

This I need to see unfortuantely to tell right dimentions for Your logo. Please ignore it for now and get back to me when site will be online,

Hello,
Site is up now at http://www.fceafrica.org,
[edited by moderator]

Hi

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

#gkLogoSmall.cssLogo {
    background-position: center -36px;
    background-size: 100% auto;
    height: 74px;
    width: 200px;
}


Hello,
I have pasted the code into override.css, and enabled css override in the template features, but it doesn't solve my problem with the header on the main page, it is still cut.
The other pages have it in full, but there is barely a margin between the top of the page and the logo, I would like it if that space could be increased as well.

Thank you.

Hi

I do not see it cut. Can You show me a screenshot ? Also tell me how would You want it. I could not left any space since logo gets really small when trying to fit in this small bar. I've make it as big as possible.

header.jpg

Hello,
I think we are misunderstanding each other.

I am attaching a picture of the logo I'm trying to fix as requested.

Hi

Yes, I was thinking about a logo on frontpage. For this use code like:

Code: Select all

#gkHeaderNav.static #gkLogoSmall {
    top: 0;
}


Hello,
Thank you, but even the logo on the front page is cropped; the image is there, but the words are cropped, I'd like them to all be visible; It is supposed to be, "Foundation for child Education, Africa," all that is visible is, "ion for child educat" which doesn't make sense.
Please refer to the first picture above to see what I mean

Hi

The acctual size of the big logo are:

Code: Select all

#gkLogo.cssLogo {
    height: 298px;
    width: 421px;
}


so try use this code. And to scale it in mobile use:

Code: Select all

@media only screen and (max-width:421px) {
#gkLogo.cssLogo {
    background-size: 100% auto;
    background-position: center center;
    width: 100%;
}
}


Hello,
I eventually managed to sort myself out by directly editing the template.css file.
Thank you very much, you did point me in the right direction.

Hi

Ok. Glad it's resolved. Closing this thread than.