• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2153
  • 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
[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

 
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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