Grow your CSS skills. Land your dream job.

Only display on mobile device

  • # April 13, 2013 at 11:15 am

    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
    < !doctype html>




    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

    # April 13, 2013 at 11:39 am

    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

    # April 13, 2013 at 11:44 am

    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

    # April 13, 2013 at 11:56 am

    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/

    # April 13, 2013 at 12:02 pm

    thank you very much!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".