Re-sizing your logo image on smaller screen devices

When using a responsive layout you may find on smaller screen devices that your logo is to big for the smaller space available. This will result in your logo overlapping some of the other elements in the header of your template or extending out beyond your screen.

Using media queries along with the background-size property you can re-size your logo to better fit each of the smaller screen sizes.

The first example determines your logo size when opened in a screen size smaller than 768px (mobile phone - landscape). To use this CSS you can add it to the Custom CSS field of your Joomla templates parameters.

@media only screen and ( max-width: 767px ) {
h1.logo a {
    background-size: 400px auto;
}}

The 400px will be the new width to your logo when displayed in landscape on a mobile phone. You can edit this to best suit your template and logo.

The next example would be the most likely one you would use as it deals with screen sizes less than 440px (mobile phone - portait). Both examples can be used together as long as you add this example after the first. Once again you can add this to the Custom CSS field of your templates parameters.

@media only screen and (max-width: 440px) {
h1.logo a {
    background-size: 300px auto;
}}

Where 300px is the new width to your logo when displayed in portrait on a mobile phone. Once again edit this to best suit your template and logo.

  • Thursday, 12 September 2013

Who's Online

We have 670 guests and 2 members online

Join Our Newsletter

Free Classic Template

Sign up to our Newsletter and receive news on template releases and discount coupons along with free access to our 'Classic' Joomla template.

Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.