Solved

CSS only for desktop (twitter bootstrap)

Posted on 2013-12-08
9
1,797 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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

828 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