I am having trouble with my media queries in Sass - I am a beginner. If you have time can you take a look at my project and let me know if you can see why my media query is not working? I have one in the _body partial.
https://w.trhou.se/grhzs023qb
columns {
#media #{$break-narrow} {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
}
Thank you.
Related
I start using sass, at the moment I start to discover mixin and writing my own one.
I have a mixin:
#mixin column-set ($number, $width, $gap, $rule-style, $rule-width, $rule-color, $col-span) {
-webkit-column-count: $number; /* Chrome, Safari, Opera */
-moz-column-count: $number; /* Firefox */
column-count: $number;
-webkit-column-width: $width; /* Chrome, Safari, Opera */
-moz-column-width: $width; /* Firefox */
column-width: $width;
-webkit-column-gap: $gap; /* Chrome, Safari, Opera */
-moz-column-gap: $gap; /* Firefox */
column-gap: $gap;
-webkit-column-rule-style: $rule-style; /* Chrome, Safari, Opera */
-moz-column-rule-style: $rule-style; /* Firefox */
column-rule-style: $rule-style;
-webkit-column-rule-width: $rule-width; /* Chrome, Safari, Opera */
-moz-column-rule-width: $rule-width; /* Firefox */
column-rule-width: $rule-width;
-webkit-column-rule-color: $rule-color; /* Chrome, Safari, Opera */
-moz-column-rule-color: $rule-color; /* Firefox */
column-rule-color: $rule-color;
-webkit-column-span: $col-span; /* Chrome, Safari, Opera */
column-span: $col-span;
}
I would like to use it but not always with all arguments, for this reason I put them in order of how I think I will need them. But it looks like when I call this mixin I need to enter all arguments. Is there any way to avoid this?
for example:
call1
#include column-set(3, 40px);
call2
#include column-set (2, 40px, 10px, solid, 1px, blue);
I try to find there answer but with no success. Can anyone help?
You can set a default value, if don't set a value in the #include the default value is used:
#mixin column-set ($number:3, $width:200px, $gap:20px){
...
}
You can set to null also.
#mixin column-set ($number:3, $width:null, $gap:null){
...
}
In the include you can call the parameters you want to use:
.class{
#include column-set($gap:10px)
}
The menu is fixed and will follow on scroll. This does not work well with touch devices.
I want to call the script, using Modernizr, when it detect no-touch devises. But I'm unsure how to do this.
Also, is there elements from the Modernizr download-page that I need to accomplish this?
Here is my script:
$(document).ready(function() {
$(window).scroll(function() {
var header = $('#fixed-bar').outerHeight(true);
console.log(header);
var scrollTopVal = $(this).scrollTop();
if ( scrollTopVal > header ) {
$('nav').css({'position':'fixed','top' :'0px', 'border-bottom':'4px solid #ff5454'});
} else {
$('nav').css({'position':'absolute','top':'90px', 'border-bottom':'none'});
}
});
});
But I'm unsure how to do this.
You don't want to just use javascript, you want to use mostly css, and just toggle classes with javascript. Its more performant (which is super important with something like scroll loops).
#fixed-bar {
position: fixed;
top: 0px;
border-bottom:4px solid #ff5454;
}
.touch #fixed-bar, #fixed-bar.at-top {
top: 90px;
border-bottom: none
}
also, you don't want to directly attach to window.scroll. Instead, you want to use requestAnimationFrame (shimming where needed) to get the most buttery smooth animations possible. Here is a coffeescript example for jQUery.With that, you would be looking to do something like this
$(document).ready(function() {
// the height doesn't change, so we don't need to look it up on scroll.
var headerHeight = $('#fixed-bar').outerHeight(true);
$.request_scroll(function() {
var scrollTopVal = $(this).scrollTop();
if ( scrollTopVal > headerHeight ) {
$('nav').addClass('at-top');
}
else {
$('nav').removeClass('at-top');
}
});
Also, is there elements from the Modernizr download-page that I need to accomplish this?
just the Modernizr.touch test.
Be warned, this doesn't detect touch screens, just devices that support touchevents. That means new windows 8 laptops will be detected as .touch, and windows phones will not (they use pointer-events, not touch events).
I now have a fiddle with help from Patricks answers, but as you can see, the bar does still not go to the top, when you scroll as it should, like on my website.
Is there a solution for this? Tablets and phones don't like effects, which have $(window).scroll(function().
Currently I have this javascript on my website (the id's are different):
$(document).ready(function() {
$(window).scroll(function() {
var header = $('#fixed-bar').outerHeight(true);
console.log(header);
//this will calculate header's full height, with borders, margins, paddings
var scrollTopVal = $(this).scrollTop();
if ( scrollTopVal > header ) {
$('nav').css({'position':'fixed','top' :'0px', 'border-bottom':'4px solid #ff5454'});
} else {
$('nav').css({'position':'absolute','top':'90px', 'border-bottom':'none'});
}
});
});
While most tablets have problems with $(window).scroll(function(), it works on desktop pc. Not much consolation though.
Is there an alternate way of getting this to work? Using touch- and pointer events, maybe someone has a working fiddle og example?
I have been using sass for a while and for ages I have been using the following px to em function for my media queries:
$browser-context: 16; // Default
#function em($pixels, $context: $browser-context) {
#return #{$pixels/$context}em
}
However, I am now wanting to set up a different base font size depending on width of screen. SO for instance for mobile sizes
$browser-context: 14; // Default
and for bigger screens:
$browser-context: 16; // Default
But Im not sure how to wrap this all up in sass. Any ideas?
Thanks,
I'm pretty sure that this won't be achievable in SASS without thinking outside the box.
SASS, as you know compiles before getting sent to the browser, therefore, at that point we have no idea what browser, let alone what screen size. Therefore, media queries are out.
What you could do (I'm theorising here) is:
Set up you em function to produce a series of font sizes specific to different browser widths e.g.
#function em780($pixels, $context: $browser-context) {
#return #{$pixels/$context}em
}
and
#function em420($pixels, $context: $browser-context) {
#return #{$pixels/$context}em
}
etc.
This should produce the correct em size for each specific screen width. Then, assign those em sizes within a normal media query
#media all and (max-width: 420px){
h1{ font-size: $em420;
}
#media all and (max-width: 780px){
h1{ font-size: $em780;
}
Does that make any sense ?
Obviously, don't copy the 'code' I've written here but hopefully the general idea is valid.
This is my mixin:
#function em($px, $base: 16px) {
#return ($px / $base) * 1em;
}
use it like font-size: em(24px);. I think it is more clear then just typing values
My Footer is not fixing in my Windows mobile app.
code :
.newFooter {bottom:0; position:absolute !important; width:100%;}
Note: This codes works for Android,BB,Ios.
Can any one help me with some Good Solution.Thanks.
Solution :
/* Start - Used to display the footer at the bottom of the page */
html,
body {
margin:0;padding:0;height:100%;
}
#container {
min-height:100%;position:relative;
}
#header {
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
width:100%;position:absolute;bottom:0;left:0;
}
/* End - Used to display the footer at the bottom of the page */
I have a 'responsive' website but there are some links I only want on 'pc browsers' only and not on 'tablet landscape' becasue they link off to flash objects.
So far this is what I have done but it't not a 100% fix as some android tablets such as 'Lenovo think pad' which have a bigger screen.
I am using media queries to make my site responsive and this is what I'm currently using...
#media only screen
and (max-device-width : 1024px)
and (orientation:landscape)
{
header.Site
{
nav.Site > ul > li { line-height: 2 ; }
div.BidSessionCountdown,
a.LiveOnline { display: none; }
}
}
Is there any CSS fixes you can think of?
Thank you in advance
Tash :D
Using media queries isn't really the appropriate technique to detect if flash is supported or not. My suggestion would be to determine this using JavaScript, and assign a class to the body element such as "no-flash". Your JavaScript might look like this:
//Using jQuery here
if(typeof navigator.plugins['Shockwave Flash'] == 'undefined') {
$('body').addClass('no-flash');
}
Then, your CSS could be as follows:
body.no-flash a.LiveOnline {
display:none;
}
Note: The javascript code that checks the navigator plugin comes from Here.
When you are using the orientation:landscape, you have to consider whether the keyboard popup will change the display, once the width size is larger than the height size, the css will consider it as landscape.