Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I can't figure out why this media query is not working. The media query is always referring to the first instance of the :root variables instead of the :root variables inside the media query.
// Outside media query
:root {
--default: 10px;
}
DIV {
width: var(--default);
}
//Inside media query
#media screen and (max-width: 55rem) {
:root {
--default: 500px;
}
DIV {
width: var(--default);
}
}
This always results in the h1 tag being 10px wide instead of 500px wide, even if the media query. (Testing in Chrome and iOS Safari.)
Any tips?
I'm following this guide: https://www.freecodecamp.org/news/how-to-make-responsiveness-super-simple-with-css-variables-8c90ebf80d7f/
DEMO
const log = () => console.log(getComputedStyle(document.documentElement).getPropertyValue('--default'));
log();
window.addEventListener('resize', log);
:root {
--default: 10px;
}
h1 {
width: var(--default);
}
#media screen and (max-width: 55rem) {
:root {
--default: 500px;
}
h1 {
width: var(--default);
}
}
<h1>HEADING</h1>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
it is totally different to Line break (like <br>) using only css
I need:
/* in window FULL */
.contentbreak{
content:'';
}
/* in window PHONE */
.contentbreak{
content:'<br />';
}
but maybe I also need usedOTHERS tags.
is possible without use JavaScript ?
You can simply use
<br class="mobile">
with according css styles:
#media screen and (min-width: XYZpx) {
/*XYZ: your breakpoint; every value bigger than the one here would hide line break*/
.mobile {
display: none;
}
}
Another possibility (pure CSS):
#media screen and (min-width: XYZpx) {
#content::after{
/* #content is the line before line break */
content: "\a";
white-space: pre;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I was wondering if there as a reason why I couldn't wrap a media query I have for the home page with the .home{} class so that it only fires there.
So instead of
#media (max-width:416px){
.home .et_pb_code_0 {
border-right:0 !important;
}
.home .et_pb_code_1 {
border-right:0 !important;
border-left:0 !important;
}
.home .et_pb_code_2 {
border-left:0 !important;
}
}
I would use:
.home {
#media (max-width:416px){
.et_pb_code_0 {
border-right:0 !important;
}
.et_pb_code_1 {
border-right:0 !important;
border-left:0 !important;
}
.et_pb_code_2 {
border-left:0 !important;
}
}
}
Thanks!
You can't do that, it's not the right syntax, may be you could use that with preprocesors like SASS and LESS, but not in pure CSS.
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.
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 have a menu bar that slides opened and closed. Its closed state is also what it looks like when the screen is sufficiently small. So, I basically have the same styles twice: once as a class and once as a media query.
Is there any way to avoid this?
Edit ¹:
I want to avoid having a media query style AND a class. It would be nice if there was some clever way of applying the same style via both a class and media query.
Edit ²:
Code example (for illustrative purposes):
menu {
width: 100px;
}
menu.closed { /*triggered via class addition in javascript */
width:10px;
}
#media (max-width:1000px) {
menu { /*notice how this is the same as the closed class*/
width:10px;
}
}
You have achieved the most compact code using pure CSS.
To achieve an even more dry CSS code, you can use a CSS preprocessor.
They are tagged as dynamic-css. Some of them are less, and sass.
Less example:
#small-menu: 10px;
menu {
width: 100px;
}
menu.closed {
width: #small-menu;
}
#media (max-width:1000px) {
menu {
width: #small-menu;
}
}
Sass example:
$small-menu: 10px;
menu {
width: 100px;
}
menu.closed {
width: $small-menu;
}
#media (max-width:1000px) {
menu {
width: $small-menu;
}
}