Change logo alignment AND size
URL to the page in question:
http://www.thelavendereffect.org/
-
I know this should be relatively simple, but I cannot figure this out. It seems that after we’ve updated our Foundation theme (at least I think we did – I can’t find a place on the organized themes site that states what the current version number is of each theme.) our logo is taking up the full width of the header and is no longer centered (I think I may have made the major mistake of altering the main CSS file instead of just adding custom CSS in the theme options and of course that CSS got overwritten when we updated). I’d like to have our logo centered and about 50% of the current size, but the CSS I’ve attempted can do one of those, but not the other. Can you help?
Sample CSS that I’ve tried that isn’t working:
#logo,
#text-logo {
float: none;
max-width: none;
width: 50%;
text-align: center;
}
Also, I’ve searched the forums for all the themes and I’ve noticed that a lot of your clients ask for this functionality to be part of the base theme (for Foundation and other themes as well). Is this a possibility for a future update?
Thanks!
You can center the logo and restrict its size to be 50%. Here’s how I would approach it:
@media only screen and (min-width: 768px) {
#logo {
width: 100%;
float: none;
text-align: center;
}
#logo img {
max-width: 50%;
}
}
That makes the container for the logo span the full width. By doing that we can more easily center the logo. That also sets the maximum width for the actual image to be 50%. It’s all wrapped in a media query so this will only affect larger devices. Smaller screens already do that and we don’t want to make the logo tiny on a phone.
Hope that helps out.
Enjoy your weekend,
Bill
WOW! Thanks for such a speedy response, Bill, especially on a weekend. However, it looks like it’s not working. The logo is aligned to the left and is about 20% of it’s regular size, not 50%.
Michael
Glad that helped out. If you end up needing help with the tagline, just let me know.
Bill
Our Executive Director jumped in and just replaced the logo with a new image that incorporates the tagline. We may go back to them being separate elements if I can work out how to keep the logo centered.
If you end up needing help with the new logo, let me know.
Have a great week,
Bill
- The topic ‘Change logo alignment AND size’ is closed to new replies.