-2

My goal is to get a big button to show on the website when it's on mobile. I want it to show when the screen is at 600px width maximum. Also, I've written some code with my classmates.

We want it to show the div tag when it's on a mobile device. We'd love your guidance, thank you.

@media screen and (width:600px;){
.button {
display: url(http://examplepicture.com/blablabla);
   }
}
Martin.html
  • 61
  • 9
  • 4
    `url` is not a valid [display value](http://www.w3schools.com/cssref/pr_class_display.asp) – APAD1 Sep 28 '15 at 19:29
  • possible duplicate of [Div show/hide media query](http://stackoverflow.com/questions/11796297/div-show-hide-media-query) – Chris Sep 28 '15 at 19:52

5 Answers5

2
@media screen and (max-width:600px){
   .button {
      display: block; /* alternatively inline-block */
   }
}

to show on mobile. You can then have the "default" setting in your main css file to have that div hidden:

.button {
   display: none;
   background-image: url('http://examplepicture.com/blablabla');
   /* other properties go here */
}

This will make the .button class object be hidden on viewports greater than 600px, and visible if lower.

Demo

Chris
  • 57,622
  • 19
  • 111
  • 137
1

There is no such thing as "css = mobile". You have to bind some css rules to the screen resolution.

Since all mobiles have different screen resolution, you will have to subjectively choose a limit where you consider the screen being a mobile one.

Putting:

@media screen and (max-width:600px){
   .button {
      display: block;
   }
}

Will show the button class to every screen with a resolution less than 600px, being a mobile or a small windowed computer browser. And it will not show on tablets with more than 600px width.

Any Windows or Linux or MacOS user on a desktop computer will be able to see the "mobile" version of a website if they shrink their browser's window.

EDIT: I updated the code.

MMB
  • 425
  • 3
  • 9
0

make sure you have this in your <head> section of your HTML:

<meta name="viewport" content="width=device-width, initial-scale=1">

You have some syntax errors in your css. Try this: https://jsfiddle.net/DIRTY_SMITH/esptpmwk/8/

@media (max-width:600px){
.button {
width: 200px;
height: 200px;
background-image: url("http://lorempixel.com/400/200/");
   }
}

And if you want the button not to be visible over 600px do this: https://jsfiddle.net/DIRTY_SMITH/esptpmwk/10/

.button {
display: none;
width: 200px;
height: 200px;
background-image: url("http://lorempixel.com/400/200/");
}
@media (max-width:600px){
.button {display: inline;}
}
Adam Buchanan Smith
  • 9,422
  • 5
  • 19
  • 39
  • Not an invalid solution, but I think it's better to have all styling in the main `css` file, then in the Media Queries have only the properties that change. Just a thought. – Chris Sep 28 '15 at 19:35
  • @Chris depending on what the OP wants it very well can be a valid solution. If OP wants a button to start with and want to can its appearance, then yes, this is the best way to do it. now if OP wants it to be hidden then appear my second solution would work best. – Adam Buchanan Smith Sep 28 '15 at 19:39
  • "go back to school"? :) – Chris Sep 28 '15 at 19:43
0

Step 1 : <meta name="viewport" content="width=device-width, initial-scale=1">

Step 2 : <div class="onphone">Hello</div>

Step 3 : 

.onphone{display:block;}

@media screen and (max-width:768px){

.onphone{display:none;}

}
Dheeraj Verma
  • 38
  • 7
-1

It's typically better to create individual CSS sheets for mobile devices... In that case you can do media selectors for your CSS sheets... Here is basically what I use in most cases 

<!-- Desktop: Firefox , Chrome , IE -->
<link rel="stylesheet" media="all and (min-device-width:769px)"href="/CSS/Style.css"/>
<!-- Mobile devices: phone and ipad -->
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)"href="/CSS/phone_portrait_style.css" />
<link rel="stylesheet" media="all and (max-device-width: 640px) and (orientation:landscape)"href="/CSS/phone_landscape_style.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)"href="/CSS/ipad_portrait_style.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)"href="/CSS/ipad_landscape_style.css" />

Then in each of those sheets, you can create the CSS you want to be shown on whichever specific device you'd like. So for a phone maybe the button is 240px when in portrait, but 320px in landscape.

Just be careful, because the way you have it, your CSS for phones will ONLY be displayed if the resolution is exactly 600px.

You should also note that in your mobile portrait css sheet you should have:

.button {
   display: block; 
   width:100px;
   background-image: url('http://examplepicture.com/blablabla');
}

and in the desktop css:

.button {
   display: none;
}

And if you don't like this method, I was just trying to get you bonus points for different sized buttons for different phone/tablet orientations ;)

so on phone portrait css

.button{
   display: block;
   width:200px;
   background-image: url('http://examplepicture.com/blablabla');
}

And BAM! You got some device-reactive CSS sheets that will impress mom and dad!

Christopher
  • 790
  • 12
  • 30
  • Also note that if for some ungodly reason someone is using a low resolution on a desktop, they will still see your button. – Christopher Sep 28 '15 at 20:00