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.
Related
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 a particle-slider effect for a logo on a site which transitions to a flat logo image file for screen sizes less than 960px. It works fine on Safari and chrome but on Firefox the image stretches out of shape.
Safari/Chrome
Firefox
Do I need to add some specific code for Firefox to make this work?
Here's how I have the code at the moment -
style.css
/* RWD for logo */
#media screen and (max-width: 960px) {
#particle-slider {
display: none;
}
}
#media screen and (min-width: 960px) {
#logo img {
display: none;
}
}
#media screen and (min-width: 320px) and (max-width: 960px) {
#logo {
height: auto;
}
#logo img {
width: 70%;
height: 30%;
position: relative;
top: 50px;
padding-bottom: 50px;
left: 15%;
}
}
/* ----------------------------------------- */
particle-slider.php
<?php /* Template Name: particle-slider */ ?>
<!-- particle-slider template -->
<div id="particle-slider">
<div class="slides">
<div class="slide" data-src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/havoc_logohight.png"></div>
</div>
<canvas class="draw" style="width: 100%; height: 100%;"></canvas>
</div>
<script type="text/javascript">
var ps = new ParticleSlider({ 'width':'1400', 'height': '600' });
</script>
<div id="logo"> <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/havoc_logo.png"> </div>
<!-- particle-slider template -->
This has only appeared as an issue after I loaded the front-end files onto a Wordpress CMS (I'm using a HTML5 Blank Child theme), they worked fine as a stand-alone front-end site. How do I fix this?
Try is removing the height: 30% style from the img. I am guessing you want the image to retain its aspect ratio so height: auto might work better?
#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.
I'm using Bootstrap CDN. From the 3 rules, the last 2 ones don't work. Neither the image is resized nor the heading change its font color.
HTML
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Custom styles -->
<link rel="stylesheet" type="text/css" href="./stylesheets/portada.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="section1">
<h2 class="text-center">Heading</h2>
<img class="img-responsive" src="./images/8.jpg">
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
CSS
.section1 { // Working
background-color: #363b48;
color: blue;
height: 100px;
}
.section1 .text-center{ // Not working
color: #985475;
margin-top: 20px;
background-color: red;
}
.section1 img{ //Not working
width:20px;
}
Try this, although what you have should work also
.section1 h2{
color: #985475;
margin-top: 20px;
background-color: red;
}
I noticed 2 issues in your code.
First the CDN should not be loaded over http, but https. For
cross domain issues when loading it it's better to use just the //
without the http or https. That way it will load without giving crossdomain issues.
For instance: <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Second is that you are using comments which should be /* */
instead of // single slashes because they are on the same line with
some CSS code.
Look after fixing these how it looks:
.section1 { /* Working*/
background-color: #363b48;
color: blue;
height: 100px;
}
.section1 .text-center{ /* Working*/
color: #985475;
margin-top: 20px;
background-color: red;
}
.section1 img{ /* Working*/
width:20px;
}
DEMO
http://jsfiddle.net/a_incarnati/undmcszz/9/
I can't tell for sure, but I would bet the problem lies in portada.css as it is (presumably) available on your local env, but not on the online code editors.
Css rules have weight depending on specificity. Even when you supply new rules on top of older ones, the weightiest rule will be applied. See this site to help calculate specificity: http://specificity.keegan.st/
Your HTML should has the next code at the first lines:
<!DOCTYPE html>
<html>
<head>
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>