#media all and (min-width: 641px) {
.small-screen {
display: none;
}
}
<div class="small-screen">
<h1 id="club-offcial-name-small">Hercules Club</h1>
<h2 id="no-training-small"><q>Aqui nadie entrena</q></h2>
</div>
.small-screen is still there when going above 640px.
Guys, total noob here, stuck badly here :/
I think it's just a browser support problem. In Chrome (codepen) it works perfect for me. Which browser are you using? Here is a table of the media query support: http://caniuse.com/#search=%40media
Codepen: http://codepen.io/anon/pen/ZWYLBJ
Ok I think I know your problem. You need to put a style-tag around the css code in the like this:
<!DOCTYPE html>
<html>
<head>
<style>
#media all and (min-width: 641px) {
.small-screen {
display: none;
}
}
</style>
</head>
<body>
<div class="small-screen">
<h1 id="club-offcial-name-small">Hercules Club</h1>
<h2 id="no-training-small"><q>Aqui nadie entrena</q></h2>
</div>
</body>
</html>
Try this
#media only screen and (min-width: 641px) {
.small-screen {
display: none!important;
}
}
If you've found it helpful please mark this as the accepted answer to your question. Thanks.
Related
In my html, there are header, sidebar, footer, and <main>. They are convenient when reading on browser, but when reader print the page, I want them to print only the <main> part because sidebar... etc are not necessary when printed on papers.
Can i select the visible parts when printed?
Here is what I have used to print only the desired content.
<head>
<style type="text/css">
#printable { display: none; }
#media print
{
#non-printable { display: none; }
#printable { display: block; }
}
</style>
</head>
<body>
<div id="non-printable">
Side Bar Content
</div>
<div id="printable">
Main Content
</div>
</body>
sure, you use a media query.
using a media query in your css
#media print {
… css goes here
}
You could also use a seperate print.css file
here is an article that goes into greater details
Try window.print for printing:
<button onclick="myFunction()">Print this page</button>
<script>
function myFunction() {
window.print();
}
</script>
Then use css to style the items for printing:
#media print
{
header{
display: none;
}
}
I've been trying to have different images show up on my main page based on screen size. None of the solutions I've seen online are helping. Instead, both images are showing on all screens. Here is one of the methods I've tried. First, in my stylesheet, I put:
.screen-only {
display: block;
}
.mobile-only {
display: none;
}
#media screen and (max-width: 480px) {
.screen-only {
display: none;
}
.mobile-only {
display: block;
}
}
Then, in my main page, I have:
<div id="titleBar" class="screen-only">
<img src="assets/images/screenpic.png" class="screen-only" />
</div>
<div id="titleBar" class="mobile-only">
<img src="assets/images/mobilepic.png" class="screen-only" />
</div>
I'm confused if I should be putting the class in the div or in the image section, but either way I put it, or if I put it twice like I did in the example here, both images show up on all sizes.
you code seems correct except that your second "div" does not have the same class in the "div" and "img" tags. Your "img" tag should have a class of "mobile-only" not "screen-only"
One possible source of error and confusion is you are using screen-only and mobile-only as a class names. Maybe it is allowed but it is confusing and not hard to avoid.
Another possible error is that you have marked both images with the class screen-only.
The following is I think a bit clearer and should actually work:
in css
div.responsive {
background-image: url("assets/images/screenpic.png");
}
#media only screen and (max-width: 480px) {
div.responsive {
background-image: url("assets/images/mobilepic.png");
}
}
in html
<div id="title-bar" class="responsive"> </div>
here is a complete html file with inline styles that show what you are after. I have used images from SO just to show that it works, you should replaace the img tags with your images.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div.responsive {
background-color: lightgreen;
}
#mobile-title {
display: none;
}
#desktop-title {
display: block;
}
#media only screen and (max-width: 480px) {
div.responsive {
background-color: lightblue;
}
#mobile-title {
display: block;
}
#desktop-title {
display: none;
}
}
</style>
</head>
<body>
<div id="mobile-title" class="responsive">
<img src="https://i.stack.imgur.com/9LROA.png?s=32&g=1" width="32" height="32">
</div>
<div id="desktop-title" class="responsive">
<img src="https://www.gravatar.com/avatar/598b1b70f462d6708ff9a459a102d500?s=32&d=identicon&r=PG&f=1" alt="" width="32" height="32">
</div>
</body>
</html>
I have this button which contains Upgrade my account.
I'd like to have a rule that says for screens less than 990px, it should be Upgrade instead (as Upgrade my account is too long)...
Can I cleanly achieve that in CSS (not by adding both version and having one display: none while the other one is displayed ...) ?
I tried
#media(max-width: 990px) {
.navbar-btn {
content: 'Upgrade'
}
}
but it won't work...
Thanks
Use a span and show/hide it according to the screen size:
HTML
<button class='navbar-btn'>
Upgrade<span> my Account</span>
</button>
CSS:
#media(max-width: 990px) {
.navbar-btn span {
display:none;
}
}
JSFiddle
Say your html is in the following
<div class="navbar">
<span>Upgrade my account</span>
</div>
Your media query can be
#media(max-width: 990px) {
.navbar:before {
content: 'Upgrade'
}
.navbar > span {display:none;}
}
Example
See
Fiddle
The content property only applies to the :before and :after psuedo elements, it also means you'll be putting content (the text) in your CSS..which I wouldnt tend to recommend..
HTML
<div class='navbar-btn'></div>
CSS
.navbar-btn {
position:relative;
}
.navbar-btn:after {
position:absolute;
left:0;
content:'Upgrade my Account';
}
#media(max-width: 990px) {
.navbar-btn:after {
content:'Upgrade';
}
}
I would suggest something along the way i did in this demo
CSS:
#media(min-width: 990px) {
.navbar-btn:after {
content: ' account'
}
}
HTML:
<button class='navbar-btn'>Upgrade</button>
So, I've boiled this down to just the bare minimum. As nearly as I can tell, some bootstrap mixins are just not working. Specifically .make-md-column() and .make-sm-column() flat don't seem to do anything.
At first, I thought it was WebEssentials not compiling the .less file correctly, so I kicked over to just using less.js and compiling on the client-side. Still no love
So in the page below, the labels Span1 and Span2 appear in 2 columns at medium size and in 1 column on smaller views.
Based on my .less, I think taht spans 3 and 4 should be exactly the same (except green -- I added that just to be sure that something was coming through) Spans 3 and 4 never go 2-column. What am I doing wrong here?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap/bootstrap.less" rel="stylesheet/less" type="text/css"/>
<link href="Content/testless.less" rel="stylesheet/less" type="text/css" />
<script src="Scripts/less-1.5.1.min.js"></script>
</head>
<body>
<div class="container">
<!-- this row uses no LESS-->
<div class="row">
<div class="col-sm-12 col-md-6">
<span>Span1</span>
</div>
<div class="col-sm-12 col-md-6">
<span>Span2</span>
</div>
</div>
<div class="row">
<div class="div-container">
<span>Span3</span>
</div>
<div class="div-container">
<span>Span4</span>
</div>
</div>
</div>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</body>
and here's the less
#import (reference) 'bootstrap/bootstrap.less';
//#import 'bootstrap/bootstrap.less';
.div-container {
color: green;
.make-md-column(6);
.make-sm-column(12);
}
Smallest to Largest
The order of your make-xx-column(X) calls is important. Your code:
.div-container {
color: green;
.make-md-column(6);
.make-sm-column(12);
}
Generates this CSS for the media queries:
#media (min-width: 992px) {
.div-container {
float: left;
width: 50%;
}
}
#media (min-width: 768px) {
.div-container {
float: left;
width: 100%;
}
}
In this order, the cascade of the CSS selectors is working against you, because the 768px minimum is after the 992px, so when you are at say 1000px, both media query blocks apply since both are under that number, but the css cascade chooses the last one defined, which will always be 768px (single column). SEE EXAMPLE FIDDLE WITH THIS ORDER. So you need this:
.div-container {
color: green;
.make-sm-column(12); /* reversed order */
.make-md-column(6);
}
Generates this CSS for the media queries:
#media (min-width: 768px) {
.div-container {
float: left;
width: 100%;
}
}
#media (min-width: 992px) {
.div-container {
float: left;
width: 50%;
}
}
Now, at 1000px the 992px applies, but if it drops below 992px, then the min-width condition prevents that one from applying, and the 768px takes over. SEE EXAMPLE FIDDLE WITH THIS ORDER.
So the order of your make-xx-column(X) calls must be from smallest to largest.
I used a css sprite to display backgrounds on a fixed width design. Im changing to fluid layout, but because of the background positions the background image goes wonky when the browser resizes.
Is it possible to use a css sprite with a fluid grid background, where it resizes eith the layout?
I need layout compatible with ie 7 and 8 with other latest browsers
Adding to what #brianMaltzan wrote about #media you can use different resolution groups to have a different stylesheet
<link rel='stylesheet' media='(max-width: 700px)' href='css/small.css' />
<link rel='stylesheet' media='(min-width: 701px) and (max-width: 1024px)' href='css/medium.css' />
<link rel='stylesheet' media='(min-width: 1025px)' href='css/large.css' />
or block of css code for the style of your page:
#media (max-width: 860px) {
body {
width: 600px;
}
}
#media (min-width: 861px) and (max-width: 1024px) {
body {
width: 800px;
}
}
#media (min-width: 1025px) {
body {
width: 1000px;
}
}
I would suggest to use a few fixed sizes which will alter with each stylesheet, rather than percentages (if you are using them). Can you show us an live example of the sprite in place with your fluid layout so that we can see the issue?
I have not tried this, but there are people doing this with CSS Clip.
http://bowdenweb.com/wp/2011/08/making-responsive-accessible-high-dpi-css-sprites.html
http://chiefalchemist.com/responsive-css-sprites-proof-of-concept-v0-1-0/
#media may work for you. Not sure about ie7&8 though.
No, that's not possible. The recommended solution is to use the sprite map in an inline image and have that element's height and width set in your CSS. Here's a link explaining how to do this. This allows your images to resize with the layout.
If you'r ok to use some JS, it's possible, like this snippet.
I use jquery but you can convert it easly in pure js.
I scale the sprit with a ratio calculate between the sprit width and its parent width. I set some negative margin on it, because scale a div with css transform property change the aspect but not the calculate size.
var $sprits = $('.sprit');
$sprits.each(function() {
$(this).data('originalWidth', $(this).width());
$(this).data('originalHeight', $(this).height());
$(this).data('originalParentHeight', $(this).parent().height());
})
function setSpritsScale() {
$sprits.each(function() {
ratio = $(this).parent().width() / $(this).data('originalWidth');
marginWidth = $(this).data('originalWidth') - $(this).parent().width();
marginHeight = $(this).data('originalHeight') - $(this).data('originalParentHeight') * ratio;
$(this).css({
'transform': 'scale(' + ratio + ')',
'margin': (-marginHeight / 2) + 'px ' + (-marginWidth / 2) + "px"
});
})
}
$(window).resize(setSpritsScale);
setSpritsScale();
.columns {
float: left;
width: 20%;
}
.sprit {
display: inline-block;
background-image: url('http://changlee.com.br/cascavel/wp-content/uploads/2013/10/sprite2l-500x500.jpg');
background-repeat: no-repeat;
min-width: 75px;
min-height: 75px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="columns">
<div class="sprit"></div>
</div>
<div class="columns">
<div class="sprit"></div>
</div>
<div class="columns">
<div class="sprit"></div>
</div>
<div class="columns">
<div class="sprit"></div>
</div>
<div class="columns">
<div class="sprit"></div>
</div>