Solved

CSS only for desktop (twitter bootstrap)

Posted on 2013-12-08
9
1,855 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
9 Comments
 
LVL 53

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 53

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
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!

 
LVL 53

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 53

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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS style formatting? 2 62
Fix Form size HTML 16 40
Put check in your check box 7 26
Increase image taller on inner pages 2 53
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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 …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

752 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