Hi
J3, Responsive template
www.leadbetters.co.uk/newsite/

I have three logos at the top of the site, one each in headers 1, 2 and 3.
Header 1 is ranged left, 2 is centred and 3 ranged right.
This works fine on desktops and larger tablets (I think), but doesn't work well on mobiles.
Is it possible to centre headers 1 and 3 for mobiles and small tablets only?
Thanks
Ian

Hi Ian,

An example would be

#header3 p {text-align:center; margin:0 auto;}

and then for it being wrapped in a media query

You will need to remove the float right on the image inline styling and use css for it instead and add float: none to the above

Cheers
Paul

Hi Paul - thanks for this. I knew I would have to get to grips with @media eventually…

But I'm doing it wrong.

I've applied this class to the image:

.right{
float: right;
margin-right:10px;
padding-top:10px;
}

And this media query:

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
#header3 p {text-align:center; margin:0 auto; float:none}

Where am I going wrong?

Thanks

Ian

try this

@media only screen and (min-width : 320px) and (max-width : 680px) {
body #header3 p {text-align:center; margin:0 auto;}
body .right {float: none;}
}

replacing max width value as required - I'd suggest targetting tablets as well

Brilliant Paul - works a treat!
Was it just changing this that did the trick: body .right {float: none;}?
Thanks for your help - yet again - today!
Best wishes

Ian

You'd missed an opening bracket and the max / min width bits were wrong

Cheers
Paul

Ah. I see the bracket. End of the day…
The max min widths I copied from css-tricks.com/snippets/css/media-queries-for-standard-devices/
Not clever enough to work it out myself.
Thanks again
Ian

No problem - its how everybody learns and there is always more than one way to skin a cat

Most code isn't new just borrowed or used in a new way

Cheers
Paul