Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2041
  • Last Modified:

CSS only for desktop (twitter bootstrap)

Hello

I have some css that I only want to "work" when the visitor is looking at the page on a desktop  (I may modify this request to also include tablets.  We'll see....)   On phones I want the css to be totally ignored (there is some existing css that I already have that should kick into action on phones.)

I am using twitter bootstrap.

The css that I want to restrict to desktop is

div.rsform-block.rsform-block-header {
	margin-top: 20px;
	margin-left: -160px;
}

Open in new window


I'd like to do this entirely in CSS (not html) if possible.

Thanks!

Rowby
0
Rowby Goren
Asked:
Rowby Goren
  • 4
  • 3
1 Solution
 
Scott Fell, EE MVEDeveloperCommented:
If you want to do this in your css and not by adding a class in your html, you don't need bootstrap.  Instead of bootstrap, you can use a media query.

Only show when viewport is at least 900px wide.
@media (min-width: 900px {

     div.rsform-block.rsform-block-header {
	     margin-top: 20px;
	     margin-left: -160px;
     }
}

Open in new window


A better option would be to create the div and give it a class
http://getbootstrap.com/css/#responsive-utilities
<div class="visible-lg visible-md hidden-xs hidden-sm>I will show on medium and large screens but not extra small or small</div>
<div class="hidden-lg hidden-md visible-xs visible-sm>I will show on xs and sm screens but not large or medium screens</div>

Open in new window

0
 
Scott Fell, EE MVEDeveloperCommented:
Note to above you can also use display:none inside of your media query if you don't want a div  to show.
0
 
Rowby GorenAuthor Commented:
Hi

I did this.  It didn't seem to have an effect on cell.  I' still seeing it on my cell (android).  Also Pada's comments about display:none sounds interesting.  But not sure how to incorporate it best into the html/css

<fieldset class="formHorizontal formContainer" id="rsform_6_page_0">
	<div class="rsform-block rsform-block-header visible-lg visible-md hidden-xs hidden-sm>">
		<div class="formControlLabel">{Header:caption}</div>
		<div class="formControls">
		<div class="formBody">{Header:body}<span class="formValidation">{Header:validation}</span></div>
		<p class="formDescription">{Header:description}</p>
		</div>
	</div>

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Scott Fell, EE MVEDeveloperCommented:
Try making this sample http://jsbin.com/aWOPuBoH/2/ screen narrow and wide and notice what happens.

If you click on the html button on jsbin you will see
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="big">I am for big screens</div>
    <div class="small">I am for small screens</div>
</body>
</html>

Open in new window

and clicking on the css button will show
@media (min-width: 900px) {
  .small {
    display: none;
  }
  .big {
    display: block;
  }
}
@media (max-width: 899px) {
  .small {
    display: block;
  }
  .big {
    display: none;
  }
}

Open in new window

0
 
Scott Fell, EE MVEDeveloperCommented:
Now using bootstrap's built in feature.  Notice just adding hidden and visible classes does the trick.
http://jsbin.com/aWOPuBoH/3/
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="visible-lg visible-md hidden-sm hidden-xs">I am for big screens</div>
    <div class="hidden-lg hidden-md visible-sm visible-xs">I am for small screens</div>
</body>
</html>

Open in new window

0
 
Rowby GorenAuthor Commented:
Hi

I got the concept.  Thanks for the examples.   I will resume tomorrow and add it to my page(s).

Rowby
0
 
Rowby GorenAuthor Commented:
Sorry for the delay in returning to this question.  I'll get back to it in the a.m.  And work it out and hopefully be able to award the points!

Rowby
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now