Hi - I'm having trouble with getting @media only screen to work
www.bizzybounce.co.uk/newsite
At the bottom of the page I have a purple bar, with logo floated left, and text floated right.
I want the logo and text to centre for mobile devices. This is the CSS I'm using:

@media only screen and (min-width: 320px) and (max-width: 680px) {
.logo {
display: block;
margin-left: auto;
margin-right: auto;
}
}
@media only screen and (min-width: 320px) and (max-width: 680px) {
.phone {
text-align: center;
}
}

It's not working for me,
Anyone any idea where I'm going wrong?
Thanks
Ian

Hi Ian,

Looking on a desktop at that width it looks ok to me

Is this fixed?

Cheers
Paul

Hi Paul - thanks for getting back to me.
Fine on a desktop, but the logo and text won't centre for smaller devices - i.e. my iPhone.
It's going to be user error yet again

With that cloud image I'd use background-size

css-tricks.com/perfect-full-page-background-image/

Looks a bit odd on my large screen

Cheers
Paul

Ah - lucky you with a large screen!
Thanks for the tip. I'll follow it up.
The whole thing is at experimental/development stage right now. And I've got so much going on I'm only working on it in bits.
I'm struggling too with the new template, and anyway I've got loads more things to learn, such as responsive tables. Google has thrown up some interesting leads but I'm sure I'll be back here for help in large doses.
But no thoughts from you as to why my css is not centring the logo and text in that bottom panel?
Best wishes

Ian

Unfortunately I don't have an i-phone - looks fine on my ipad though

Cleared cache and all that?

Cheers
Paul

hmm the top logo and telephone center on the emulate in Chrome as well

You need to remove the floats on the bottom logo and text and add a text-align:center; on the bar class

Cheers
Paul

Hi Paul

Top logo and phone are fine - just centred throughout.

Bottom logo and phone I want to float left and right on desktops and tablets, but centre underneath each other on mobiles.

Here's the CSS for the bottom bar, logo and phone number:

.bar
{
height:35px;
background-color:#a100ff;
border-radius:20px;
}

.logo
{
float:left;
margin-left:20px;
margin-top:3px;
line-height:35px
}

.phone
{
float:right;
margin-right:20px;
line-height:35px;
font-family: 'comic sans ms', sans-serif;
color: #ffffff;
font-size: 120%;
font-weight:900;
}

@media only screen
and (min-width : 320px)
and (max-width : 680px)
{
.logo {
display:block;
margin-left:auto;
margin-right:auto;
}
}

@media only screen
and (min-width : 320px)
and (max-width : 680px)
{
.phone {
text-align:center;
}
}

If I remove the floats, it won't look right on larger screens.

I've added the @media only screen to centre the logo and phone number on small screens.

I can't see what I've done wrong so it doesn't work. It must be something in the @media only screen bit.

Any ideas?

Thanks

Ian

Hi Ian,

Sorry I've largely been looking at the wrong area of the site

I see the work logo and look at the top of the page

Hi Ian,

Your code is a little confusing but you need to add this inside media queries

.bar {
margin: 0 auto;
text-align: center;
}

.phone {
float: none;
}

.logo {
float: none;
}

Comment out all the content of this media query

@media only screen and (max-width: 680px) and (min-width: 320px) {
.logo {

Cheers
Paul

Hi Paul - thanks for getting back to me.

I copied the code from a tips site - I'm still not able to tap out css without cribbing from somewhere!

I'll have a look at this tomorrow now. My brain is numb after getting to grips with a responsive table. See www.bizzybounce.co.uk/newsite/index.php/halls-to-hire.

Not sure if this is the right way to handle this info. Any thoughts?

And I haven't had a chance yet to fix the clouds background

Thanks again

Ian

Hi Ian,

Table looks alright

With only 3 columns you should be able to use css rather than a js solution

Hate tables

Cheers
Paul

You're absolutely right about tables, but I think the css might have defeated me.
Something to sort if ever my brain returns.
Thanks again for your help…

Enjoy your long weekend

Cheers
Paul

Thanks Paul - it's raining, so I'll carry on working

Bottom bar and main clouds pic now fixed. Thanks for the tips…

You have a good break too,

Ian

No worries - raining here as well

Working alas all weekend

Cheers
Paul

Ah - in that case I'll probably be worrying you again before the sun comes out.
Struggling with @font-face now…
Don't work too hard
Ian

Cheers
Paul