Hello

You can try adding the following to the Responsive Custom CSS fields in the 'Responsive Options' tab of your templates parameters, editing the top and left of each to suit your logo..

h1.logo a {

    top: 0px;

    left: 0px

}

Ciarán

Thanks for your quick response.

I tried your solution but it failed to work, even after noticing the missing semi-colon at the end of left: 0px

But it did get me thinking of a possible different approach, believe my logo was being cropped somehow. Maybe larger than the maximum area allotted to it. So I made a smaller logo and tried the following in the Responsive CSS (this is a great feature, BTW).

h1.logo a {
display:block;
position:relative;
z-index:0;
width:100%;
background: url(../images/logosmall.png) 0 0 no-repeat; z-index:10;
}

At first it didn't work either, I tried it originally in phone portrait. Then in tablet portrait thinking that maybe my larger smart phone (Samsung AtivS Windows 8). I was just about to give up when I added the CSS style to the phone landscape mode.

And viola it worked .

Thanks for your help in pointing me to the solution.

Fred

Nice work Fred and thank you for posting your solution!

The following article might interest you regarding logo sizes across different screen sizes.. http://www.joomla51.com/tutorials/item/re-sizing-your-logo-for-smaller-screen-devices

Ciarán

Turns out you must use absolute paths as the relative one I used above does not display on the sub pages.

I also tried the info at the other link you provided.

This works fine in the Custom CSS

@media only screen and ( max-width: 767px ) {
h1.logo a {
display:block;
position:relative;
z-index:0;
width:100%;
background: url(http://webmasternotrequired.com/images/logosmall.png) 0 0 no-repeat; z-index:10;
}}

@media only screen and ( max-width: 440px ) {
h1.logo a {
display:block;
position:relative;
z-index:0;
width:100%;
background: url(http://webmasternotrequired.com/images/logosmall.png) 0 0 no-repeat; z-index:10;
}}

Fred