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.
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 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>
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 4 years ago.
Improve this question
In css, I have class 'current-cat-parent' and class 'hide-it'. One is on the top of page and 2nd is in mid of page.
Now the thing is, I want to make appear 'hide-it' class's content only if class 'current-cat-parent' exist somewhere in the page, otherwise hide that content.
Please let me know how can make it possible
Thank you
The problem with Amir's answer is that the length of a div that exists on the page is 1 not 0. Also none should be "none"
see below
var parent = document.querySelectorAll('.current-cat-parent');
console.log(parent.length)
if (parent.length === 1) { // or > 0
document.querySelector('.hide-it').style.display = "none";
}
.current-cat-parent {
height: 100px;
width: 100px;
background: Red;
}
.hide-it {
height: 100px;
width: 100px;
background: blue;
}
<div class="current-cat-parent">
</div>
<div class="hide-it">
</div>
var parent = document.querySelectorAll('.current-cat-parent');
if(parent.length == 0){
document.querySelector('.hide-it').style.display = none;
}
If both of your HTML elements are sibling selectors, for example if you have something like below:
<div class="current-cat-parent">
</div>
---- other contents -----
<div class="hide-it">
</div>
Then you can simply achieve that using CSS only. Try this:
.hide-it {
display: none;
}
.current-cat-parent ~ .hide-it {
display: block;
}
You can do it also through css.
.current-cat-parent .hideit{ display:none; }
This code work when page has not current-cat-parent class
.hideit{ display:block; }
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 7 years ago.
Improve this question
Inputs and buttons have a lot of predefined styles, that had been reseted in the first place, for example borders and backrounds. If borders and backgrounds are styled later differenty, is there a way to make the declaration shorter?
.mybutton1,
[role="button"].mybutton1,
input[type="submit"].mybutton1,
input[type="rest"].mybutton1,
input[type="button"].mybutton1,
button.mybutton1 { {
font-size: 10px;
background-color: red;
border: solid;
}
.mybutton2,
[role="button"].mybutton2,
input[type="submit"].mybutton2,
input[type="rest"].mybutton2,
input[type="button"].mybutton2,
button.mybutton2 { {
font-size: 10px;
background-color: blue;
}
Use common style in to input styles and differentiate with your class, check below codes.
[role="button"],
input[type="submit"],
input[type="rest"],
input[type="button"],
button {
font-size: 8px;
}
.mybutton1 {
font-size: 10px;
}
.mybutton2 {
font-size: 14px;
}
Fiddle: https://jsfiddle.net/nikhilvkd/s12643k1/
[Updated]
OR
You can do with sass like below codes
#mixin buttonStyle($class, $fontSize) {
[role="button"].#{$class},
input[type="submit"].#{$class},
input[type="rest"].#{$class},
input[type="button"].#{$class},
button.#{$class} {
font-size: $fontSize;
}
}
#include buttonStyle(mybutton1, 20px);
#include buttonStyle(mybutton2, 40px);
#include buttonStyle(mybutton3, 60px);
Fiddle demo: https://jsfiddle.net/nikhilvkd/s12643k1/1/
Note: First method is more good for less css codes
You can use mixins for that I guess:
#mixin generate_size($class_num, $size) {
.mybutton{$class_num},
[role="button"].mybutton{$class_num},
input[type="submit"].mybutton{$class_num},
input[type="rest"].mybutton{$class_num},
input[type="button"].mybutton{$class_num},
button.mybutton{$class_num}
{ font-size: $size; }
}
#include generate_size("1", 10px);
#include generate_size("2", 15px);
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