Only display on mobile device

[vivajustice]

Hi, i want to display a “call” button on mobile screens but hide it for all other devices. I cant for the life of me get the element to disappear when the screen size is adjusted to be larger than mobile (480px for example).

My code below, very simple as i am just testing…

html

Call Me

the css

.callbtn {
display: none;
}

/*

---

> make button <

---

*/
@media and screen (max-width: 480px) {
.callbtn {
background: #32cbff;
padding: 0.2em;
width: 6em;
-moz-border-radius:0.5em; /* 8px */
-webkit-border-radius:0.5em; /* 8px */
-o-border-radius:0.5em; /* 8px */
}

.callbtn a{
display: block;
width: 6.25em; /* 120px */
background-color:#32cbff;
text-align: center;
-moz-border-radius:0.5em; /* 8px */
-webkit-border-radius:0.5em; /* 8px */
-o-border-radius:0.5em; /* 8px */
border-radius:0.5em; /* 8px */
border: 1px dashed #bfe2f9;
color:#fff;
font-size:0.75em; /* 12px */
font-weight:bold;
padding:0.375em 0.75em; /* 6px 12px */
text-decoration:none;
font-family: helvetica;
}

.callbtn a:hover {
background-color:#444;
}

.callbtn a:active {
position:relative;
top:1px;
}

}

Thanks in advance for any help

[pixelgrid]

change your media query to this

/*

---

> make button <

---

*/
@media screen and (max-width: 480px) {
.callbtn {
display:block;
background: #32cbff;
padding: 0.2em;
width: 6em;
-moz-border-radius:0.5em; /* 8px */
-webkit-border-radius:0.5em; /* 8px */
-o-border-radius:0.5em; /* 8px */
}

.callbtn a{
display: block;
width: 6.25em; /* 120px */
background-color:#32cbff;
text-align: center;
-moz-border-radius:0.5em; /* 8px */
-webkit-border-radius:0.5em; /* 8px */
-o-border-radius:0.5em; /* 8px */
border-radius:0.5em; /* 8px */
border: 1px dashed #bfe2f9;
color:#fff;
font-size:0.75em; /* 12px */
font-weight:bold;
padding:0.375em 0.75em; /* 6px 12px */
text-decoration:none;
font-family: helvetica;
}

.callbtn a:hover {
background-color:#444;
}

.callbtn a:active {
position:relative;
top:1px;
}

}

media query i s changed to @media screen and (max-width : 480px)

and the .callbtn is getting displayed as block

[vivajustice]

i love you (srs).

I did have display block in there before but when i was playing about i must have deleted it, but that media query is the one what has solved it!!

Just for future ref tho (yeh yeh google will tell me i know) what has that query actually done, i see you swapped “screen” + “and” but what is the difference its making?

Thanks

[pixelgrid]

its the same query you had swapping the screen and ‘and’ its the way to write it has a specific syntax
this is a nice read for your situation http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

[vivajustice]

thank you very much!

[Author]

Posts