Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I am looking into #media and was wondering what would be the most effective way of creating a site that changes depending on the width of the webpage.
Here's what I am using at the moment (background color change is to show the changes):
#media (min-width: 1001px) {
body {
background:#000;
}
}
#media (max-width: 1000px) and (min-width: 700px) {
body {
background:#555;
}
}
#media (max-width: 699px) and (min-width: 520px) {
body {
background:#AAA;
}
}
Would writing out a #media query each time be the most effective/"best" way to do this?
You should try to go 'mobile first', which means to develop for mobile screens and then edit you styles in media queries depending on what needs changing for different screen sizes.
'min-width' means it will effect styles for screen sizes that have a minimum width of the value you set, so there's no need for max-width.
#media screen and (min-width: <Enter width in px>) { }
#media screen and (min-width: <Enter width in px>) { }
#media screen and (min-width: <Enter width in px>) { }
There is no best way because the best way is to define your media queries as needed. Device sizes are constantly changing and if you build your site based on someone else's recommended sizes, those sizes could very well be obsolete in less than a year..
Microsoft.com is actually one of my favorite examples. If you take a look at their site and expand it as far as your screen allows you'll notice that the page is designed to look good at every pixel size, not just at preset points.
Start with the small screen (that you want to support) first, then expand until it looks like shit. Time for a breakpoint! -Stephen Hay
Further
7 Habits of Highly Effective Media Queries
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to reduce the the width by which col-md-offset-1 of bootstrap assigns margin-left at a certain place. I would prefer this to be done by using LESS.
You don't really need Less for this since the solution there would be exactly the same as in pure CSS. Just override the corresponding property:
#media (min-width: 992px) {
.col-md-offset-1 {
margin-left: 42%; /* <- your value here */
}
}
In Less you could modify the method Bootstrap generates all such offset classes (by overriding/cascading these mixin and variables) but that would be an overkill for that tiny change you actually need).
#seven-phases-max wrote:
You don't really need Less for this since the solution there would be
exactly the same as in pure CSS.
I don't agree with that. Bootstrap uses Less to help you code DRY (don't repeat yourself). When your start hard coding your changes, your changes will break in future when you change some of the framework parameters.
Changing the behaviour of the .col-md-offset-1 depends on the #screen-md-min variable which sets the min-width for the media query, see: http://getbootstrap.com/css/#grid-media-queries
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
So in my opinion your Less code should look like that shown beneath:
#import "bootstrap"
#media (min-width: #screen-md-min) {
.col-md-offset-1 {
margin-left: 42%; /* <- your value here */
}
}
Using the above you should notice that you can not recompile Bootstrap without running the autoprefixer, see: http://bassjobsen.weblogs.fm/compile-bootstrap-less-v2-autoprefix-plugin/
To keep you changes future proof you should also consider to make your modification only be applied for the situation where you need it (and do not change the properties of the predefined .col-md-offset-1 itself). For instance by using a unique parent of your grid;
html
<div id="maincontent"><div class="container"><class="row"><div class=".col-md-offset-1">
less
#import "bootstrap"
#media (min-width: #screen-md-min) {
#maincontent .col-md-offset-1 {
margin-left: 42%; /* <- your value here */
}
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I would like to know how you are handling Responsive design combined with SCSS in SASS. The main question is about media queries.
1) Are you writing media queries straight inside styled element using breakpoint mixin like this:
.element{
width:40%;
#media screen (min-width:700px){
width:100%;
}
#media screen (min-width:1000px){
width:50%;
}
}
// CSS
#media screen (min-width:700px){
.element{
width:100%;
}
}
#media screen (min-width:700px){
.element2{
width:50%;
}
}
2) Or are you writing them to special separate partial file? Like this for instance:
/* _responsive_wide_screen.scss */
#media screen (min-width:1000px){
.element{
width:50%;
display:inline-block;
}
.element2{
width:20%;
}
}
More faster to do is probably example number 1, but the problem is that the media query statement is generated for each element and the CSS file size is getting bigger and bigger. Should I avoid this approach?
I’m using example number 2 but sometimes is not so user friendly to switch between the files.
Thanks
My own preference is to use the first approach you showed. I like the benefits it provides in terms of localizing media queries to a specific element; I find it speeds up responsive workflow and encourages making adjustments where they are needed for the design/layout rather than just at specific breakpoints.
For large projects where it's worth the extra time, I then go through and consolidate media queries with identical min-width and max-width values. Having to do this secondary optimization is certainly a drawback of this approach -- I am hopeful that an upcoming release of Sass will automate this feature for us.
This question already has answers here:
How to use particular CSS styles based on screen size / device
(5 answers)
Closed 2 years ago.
I have a crazy web app going on, with all kinds of dynamic widths and heights and vertically centered stuff. It looks great on just about every resolution except 1366x768 and 1280x800. I know how to fix it with some CSS rule overrides. I want to target these SPECIFIC resolutions ONLY (meaning I do NOT want to target 1280x1024 with a min-width: 1280 and max-width: 1280). Please don't lecture me about best practices and stuff, I need a quick and dirty answer.
How can I do this? Surprisingly Google isn't giving me any good results.
You could use:
#media screen and (min-width: 1280px) and (max-width: 1280px)
and (min-height: 800px) and (max-height: 800px) {
/* Crazy CSS overrides here */
}
/* Second variant left as an exercise for the reader */
However, you will probably do better in the long run if you take the time to refactor now - later never seems to get here.
Try this:
#media screen and (max-width: 1280px) and (max-height: 800px)
{
/*write CSS here*/
}
Im using 960gs adaptive CSS in all the pages of my site. I have the script below in all the pages:
<script>
var ADAPT_CONFIG = {
path: '/css/960gs/',
dynamic: true,
range: [
'0px to 760px = mobile.min.css',
'760px to 980px = 720.min.css',
'980px to 1280px = 960.min.css',
'1280px to 1600px = 1200.min.css',
]
};
</script>
<script src="/js/adapt.min.js" type="text/javascript"></script>
My problem is that when a user go to another page, the selection of appropriate stylesheet is visible to the user specially when using Mozilla Firefox. What I mean is that at first, the layout takes all the screen and in less than a second, the lay-out changed to the appropriate one. I don't know how to describe this thing. But what I want is to improve it's performance in loading the appropriate stylesheet.
Thanks
On the 960.gs site it states
"A potential drawback of Adapt.js is the possibility of a brief flash of unstyled content as a new stylesheet is being fetched (think of it as “Ajax” for CSS). I have done my best to mitigate this by keeping CSS files small (3 KB). It is worth noting this is a proposed, not prescribed, approach to a problem with multiple solutions"
So this is a known issue. I have to say I'm not a big fan of doing this with javascript, CSS is perfectly capable of handling different resolutions. If you have your basic CSS and add some separate properties for handling different resolutions as follows:
#media only screen and (min-width: 980px) and (max-width: 1280px) { <<<CSS Here>>> }
#media only screen and (min-width: 760px) and (max-width: 980px) { <<<CSS Here>>> }
#media only screen and (max-width: 767px) { <<CSS for mobile portrait>> }
#media only screen and (min-width: 480px) and (max-width: 767px) { <<CSS for Mobile landscape>> }
This question already has answers here:
Using Sass Variables with CSS3 Media Queries
(8 answers)
Closed 7 years ago.
I'm using saas via the compass framework and the blueprint/grid dependency. I want to be able to set the width of a column using a media query, like so:
// /src/partials/_base.scss
$blueprint-grid-columns: 18;
#media screen and (max-width: 1024px){
// If screen res is 1024 or lower, then set grid width to 46px
$blueprint-grid-width: 46px;
}
#media screen and (max-width: 1280px){
$blueprint-grid-width: 50px;
}
#media screen and (max-width: 1600px){
$blueprint-grid-width: 76px;
}
$blueprint-grid-margin: 8px;
This compiles to in /stylesheets/screen.css:
#media screen and (max-width: 1024px) {}
#media screen and (max-width: 1280px) {}
#media screen and (max-width: 1600px) {}
But the values in the rest of screen.css are not set accordingly. I guess that makes sense, since the $blueprint-grid-width variable is read at compile time, not run time.
Is there a way to output a layout with different grid widths by using a media query to get screen resolution?
Related github issue:
https://github.com/chriseppstein/compass/issues/302
This was a bug in SASS. It's been fixed as of version 3.1.0:
http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html#310
I'm trying to figure out the same thing but there doesn't seem to be a good way to get this working the way I want it to. Like you said, the variables get set at compile time, not runtime so it's hard to figure. I think you could do something like this:
#media screen and (max-width: 1024px) {
$blueprint-grid-width: 46px;
#import 'blueprint';
// do everything else you need to with this size
}
But then you'd have to do this same, brute force kind of reset of Blueprint for every media query you want to run.