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 6 years ago.
Improve this question
I wanted to know which would be best practice for media queries.
If you were to target a screen size I would generally do something like:
section#about {
background-color: yellow;
color: black;
padding: 5px 20px;
#media (max-width: 600px) {
padding: 0;
}
}
.button-small {
margin-bottom: 12px;
#media (max-width: 600px) {
margin-bottom: 6px;
}
}
Would the following be better:
section#about {
background-color: yellow;
color: black;
padding: 5px 20px;
}
#media (max-width: 600px) {
section#about {
padding: 0;
}
}
.button-small {
margin-bottom: 12px;
}
#media (max-width: 600px) {
.button-small {
margin-bottom: 6px;
}
}
Instead of nesting #media queries inside classes, you would create a standalone #media query and add the class you would need changed?
NB: Sorry all, I'm using a preprocessor (SASS). I'm thinking of ways to organize code legibility.
Media queries can't be nested like this in pure CSS. Only CSS preprocessors (like LESS and Stylus) allow you to do that. The CSS preprocessor itself will take the code you've given in example 1 (which is invalid CSS, but valid in a CSS preprocessor) and convert it into something similar to example 2 (valid CSS).
If you're using a CSS preprocessor then example 1 is probably the best approach if you have a long chain of nested elements, but if you're not using a CSS preprocessor then example 2 is the only one which will give you any results.
Using SASS I prefer the first approach tbh. Also, if I were to write that code I'd most definitely have one file for _buttons.scss and one for the _about-section.scss. Meaning both wouldn't be able to share a media query anyway. I would however recommend defining your media queries as variables you can re-use:
$bp-medium: (min-width: 600px);
And then later:
#media #{$bp-medium} {
// Code here...
}
One reason I prefer the media query inside selector approach is because when you're nested inside SASS you still want to keep your media queries in the same area as the original styling. For example:
.button {
background: blue;
padding: 1rem 2rem;
// Large Buttons
&--large {
padding: 1.5rem 3rem;
#media #{$bp-medium} {
padding: 2rem 4rem;
}
}
}
It would be annoying to have to "leave the scope" just so that the media query isn't inside the class.
Related
I'm currently working on this:
https://codepen.io/juanor/pen/gxELZN
I am having trouble getting my queries for fonts working correctly for two specific parts. They work fine for the entire project but for these two: p.maininfo and .ejkanji, .ejkana, .ejes.
This is my query:
#media screen and (max-width: 800px) {
html {
font-size: 20px;
}
I'm using for all the elements rem units, and they seem to work just fine with the query. Can someone tell my why these two are the only ones not working?
Thank you in advance!
It won't work! as It'll be overridden by already written css styles. this concept is called as specificity. Please have a look on this link. you have written styles on elements like.. body, h1-h6, li, p, etc.. so you need to override the same.
E.g,
body{
font-size: 18px;
}
h1{
font-size : 30px;
}
#media screen and (max-width: 400px) {
body {
font-size: 10px;
}
h1{
font-size : 20px;
}
}
You should not use html as the selector to change type. You can use body. I would suggest revising some of your classes and using web developer tools to make sure they are not being over-written by others.
I looked at your code and noticed that your queries can be improved upon. Look for most-used media queries.
Instead of using html as selector use *, something like as follows...
Following code is working...
*{font-size: 60px;}
#media screen and (max-width: 400px) {
* {
font-size: 20px;
}
<h1>Hwllo World</h1>
I'm creating a responsive site, and I'm currently making some media queries. I write them as I go, like this for example:
.status-reply-disabled {
color: #B1B1B1;
font-size: 14px;
margin-top: 10px;
position: absolute;
margin-left: 65px;
}
#media screen and (max-width: 600px) {
.status-reply-disabled {
font-size: 10px;
margin-left: 35px;
}
}
then a little later I'll have something like this:
.status-reply-avatar {
border: 1px solid #d8d8d8;
width: 45px;
border-radius: 50%;
position: absolute;
}
#media screen and (max-width: 600px) {
.status-reply-avatar {
display:none;
}
}
Would it be better, for processing times, to have all media queries of, say, 600px in one big querie? Like this:
#media screen and (max-width: 600px) {
.status-reply-avatar {
display:none;
}
.status-reply-disabled {
font-size: 10px;
margin-left: 35px;
}
...
All other styles for this width
...
}
or is what I'm doing fine?
If you don't have a HUGE amount of code, it doesn't really matter concerning performance. Lately I prefer to write media several media queries, always close to the general rule of a particular element, simply to keep control over things (like in your first two codeblocks). I actually like that more. In terms of speed if wont make much difference.
There is no difference at all. In terms of organization, you could code like you were doing before and organize your code in sections, or create another CSS file only for media queries.
Sure, place your code in one media query, it will do the same thing and you will write less rows of code, and you will follow the DRY principle (Don't Repeat Yourself).
If you define the same media query twice in one file, it's not a very good practice...
Try to put all the code together under a specific query, say max-width=600px. This is better for a clean and semantic code. Go from desktop to the narrower screen which is for the mobile say around 400px. Its always better. You'll confuse if you come back at it after a week or so. Start wide and then narrow as you go. Don't code for an element in max-width=600px if you still didn't do the 900px stop.
Intro
this is similar to this question but unfortunately the answer only applies to greasmonkey (which only works on firefox). Further, this was asked on the stylish forum but the answer was ambiguous.
Question
I want to remove the left column in the azure help page and
expand the main body to make it cover the widht of the screen.
The first part can easily be done by this
#sidebarContent {display:none}
How ever the second part must conver this
media (max-width: 1199.99999px)
to this
media (max-width: 100%)
But I have no idea how to do that using stylish.. ideas?
To override a media query you just need to load another media query - that also applies to your device - after it.
Well...you want a blunt media query that applies to everything. The best way is to use #media (min-width: 1px) since that includes all devices.
Now, put it all together - along with some other CSS cleanups like padding and margin removal and setting a new width for .mainContainer and you get this
#sidebar {
display: none;
}
#media (min-width: 1px) {
.mainContainer {
margin: 0 auto;
width: 100vw;
padding: 0;
}
body>.container {
padding: 0;
}
}
New code: (with different selector for width)
#sidebar {
display: none;
}
#media (min-width: 1px) {
.mainContainer { /*example styles*/
margin: 0 auto;
width: 100vw;
}
body>.container {
padding: 0;
}
body>.mainContainer>main {
max-width: 100vw!important;
}
}
You still have to adjust the padding to your preference as setting the padding to 0 breaks the design a little bit but this should be good starting point.
Before:
After:
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 7 years ago.
Improve this question
When I want to create a responsive website, say there are two devices with different screen.
What should I create #media screen {} for different file, like code below:
#media screen and (min-width: 676px) {//Some code here}
or write #media screen {} directly for same file?. This example my code:
.home {
.container {
padding: 10px 0 20px 0;
#media screen and (max-width: 480px) {
padding: 2px 0 10px 0
}
}
}
And please include examples as my reference material.
Thanks.
You can try one of the below approaches:
Use one media query for all elements that will be added it the
bottom of your scss file.
Add each media query with it's element, like you did. I don't prefer
that approach because it will make it harder to find/edit your code
when working on large projects.
Example 1
.section--about {
text-align: center;
p {
color: #727272;
}
}
#include mobile {
.section--about {
p {
font-size: 1.5em;
}
}
}
Exmple 2
.section--about {
text-align: center;
p {
color: #727272;
}
#include mobile {
p {
font-size: 1.5em;
}
}
}
Further reading:
Approaches to Media Queries in Sass
Sass Guidelines
Write Better Media Queries with Sass
Media Queries mixins for Sass
I am looking for a solution where I define 1 variable globally and than overwrite it inside a media query - without putting the entire code in it (like LESS CSS set variables in media query?).
I thought something like that(defining):
#media (min-width: 768px) {
#BWInputHeight: 40px;
}
#media (max-width: 768px) {
//responsive screens
#BWInputHeight: 20px;
}
And using it like that:
.dataTables_filter input {
.form-control;
max-width: 135px;
display: inline-block;
height: #BWInputHeight;
padding: 1px 6px;
margin-right: 15px;
}
The problem here, "#BWInputHeight" is a undeclared variable. How can I solve this with LESS ?
You can sort of achieve this by using list arrays for each property and screen-width (like the below sample):
#BWInputHeight: '20px','40px','60px'; // Height of the button for min-width=320 and min-width=768 respectively
#minwidths: '320px','768px','1024px'; // The widths for which you need the media queries to be created
.loop-column(#index) when (#index > 0) { // Loop to iterate through each value in #minwidths and form the corresponding output
.loop-column(#index - 1);
#width: extract(#minwidths, #index); // extracts width based on array index
#media (min-width: e(#width)){
.dataTables_filter input{
height: e(extract(#BWInputHeight,#index)); // extracts button height for the corresponding screen width
max-width: 135px;
display: inline-block;
padding: 1px 6px;
margin-right: 15px;
}
}
}
.loop-column(length(#minwidths)); // calling the function
Demo in Code-pen - Modify output area width to see difference and click the eye icon in CSS tab to see compiled CSS.
Note: As per this Stack Overflow thread, both dotless and less.js should be 99% compatible and hence I have given this answer. In case this doesn't work for you, I will happily have this answer removed.