http://www.joomla51.com/forum/8-commercial-templates/5358-calibra-mobile-logo#11185
http://www.joomla51.com/forum/8-commercial-templates/5523-calibra-mobile-view#11658
and the tutorial at these links:
http://www.joomla51.com/tutorials/item/re-sizing-your-logo-for-smaller-screen-devices
I was still getting the horizontal scrolling on small screens because the width property on the logo tab of the template was defining the width of the logo container which remained wider than the screen on small screens.
My logo graphic is 720px wide so I had to define the width on the logo tab as 720px, otherwise it gets clipped on larger screens. However, this results in the horizontal scrolling on small screens even though the logo graphic is scaled down.
So I'm posting my solution here for the benefit of other users. I don't know if there is a way to shorten this code or not but it works for me. This provides two steps in scaling the logo down. You can add additional steps by duplicating the sections for each additional step. Just be sure to add both a logo scaling section and a logo container scaling section.
The site is at http://www.prairielawgroup.com
/*This section scales the logo to 450 px on screens less than 768px*/
@media only screen and (max-width: 767px) {
h1.logo a {
background-size: 450px auto;
}}
/*This section scales the logo to 300 px on screens less than 440px*/
@media only screen and (max-width: 440px) {
h1.logo a {
background-size: 300px auto;
}}
/*This section scales the logo container to 450px on screens less than 768px to solve the horizontal scrolling problem */
@media only screen and ( max-width: 767px ) {
.logo_container, h1.logo, h1.logo a, #logo {
width: 450px !important;
}}
/*This section scales the logo container to 310px on screens less than 440px to solve the horizontal scrolling problem */
@media only screen and ( max-width: 440px ) {
.logo_container, h1.logo, h1.logo a, #logo {
width: 310px !important;
}}I hope this helps!
Credit to Ciaran for these solutions in various threads! I just put them all together in one location after much trial and error.
