Solved

CSS only for desktop (twitter bootstrap)

Posted on 2013-12-08
9
1,757 Views
Last Modified: 2014-02-14
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
Comment
Question by:Rowby Goren
  • 4
  • 3
9 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39704718
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39704721
Note to above you can also use display:none inside of your media query if you don't want a div  to show.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39704807
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
Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39704908
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
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39704914
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39705053
Hi

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

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39742684
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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question