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 have a margin variable in SASS like:
$space-xxl: 8vw;
I'm using it with elements like
.element {
margin-bottom: $space-xxl;
}
This works fine because the margin depends on the screen width. I need a fallback for older browsers, is this the best way to do it?
$space-xxl: 8em;
$space-xxl: 8vw;
No, I think the fallback needs to be in the element itself, because SASS variables will not be read by the browser after you compile them.
.element {
margin-bottom: 8em;
margin-bottom: $space-xxl;
}
Related
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 months ago.
Improve this question
.service-acc {
display: flex;
gap: 10px;
width: 100%;
&-activity {
width: 70%;
}
&-password {
width: 30%;
}
}
In the above SCSS code I am trying to assign the width for flex items by dividing them 70% and 30%, because I want the first item is bigger than the second.
The above SCSS works fine but I want to know whether this approach is correct or some other solution(or CSS properties) to do better than this. Thanks.
This is not really a great solution. How are you going to do this on mobile?
Here is some documentation to get you along:
Controlling Ratios of Flex Items Along the Main Axis
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 1 year ago.
Improve this question
I was looking around at some examples and noticed that there were two CSS rules with the same selector, doing two different things. Is there a reason they couldn't have been merged?
Example:
.example {
padding: 0.5em;
text-align: center;
}
.example {
background: #ffffff;
}
What's the difference from this?
.example {
padding: 0.5em;
text-align: center;
background: #ffffff;
}
There is no reason at all. It is personal preference to keep them on seperate or keep them together. You can choose to either seperate them or keep them together. No matter which you choose, the end result remains the same.
The reason is a mistake.
If the class has been defined earlier, it should contain all properties here. Duplicating a class is not good practice. It seems to be even a mistake.
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 2 years ago.
Improve this question
I have the following text displayed on a website
<h2 font-weight="33">H2 Heading which I want thinner</h2>
The above doesn't work.
<h2><font-weight="33">H2 Heading which I want thinner</font></h2>
I know I can use the CSS like so:
h2 {
font-weight: bold;
color: #fff;
font-size: 24px;
}
but I have several complex and different internal and external existing css already in place, hence the requirement to override it in-line.
What is the best way to make the H2 tag thinner. I also ask the question because I read that font-weight is depreciated in html5.
Best practices and a solution in line with modern requirements would be appreciated.
try this it:
<h2 style="font-weight: 33">H2 Heading which I want thinner</h2>
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 8 years ago.
Improve this question
I can not understand why does not work property css
#media only screen and (min-width:974px) {
#bg_top {
background:url(../img/bg_top.jpg) no-repeat center top;
}
#left_column {
float:left;
width:22.4%;
}
}
Everything written is true, but on the site, this property does not work. I ask you to explain what my mistake.
The DOM doesn't see your condition, only the last (
#media only screen and (min-width:973px) and (min-width:973px)
)
In the row upside, you used the wrong syntax.
The correct syntax comment in css is:
/* ÐœÐ¾Ð±Ð¸Ð»ÑŒÐ½Ð°Ñ Ð²ÐµÑ€Ñтка */
Perhaps the wrong code invalidate your condition. Try the correct syntax
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 8 years ago.
Improve this question
I set width and height same time often, so I wrote like this.
#mixin size($width,$height){width:$width + px; height:$height + px;}
Is there better way to do it?
I thought there is a default mixin like this, but I couldn't find it.
Take out the + px. Doing so will give your mixin more flexibility:
#mixin size($width, $height) {
width: $width;
height: $height;
}
Then, when using the mixin, you can specify various units such as pixels, em's, percentages, etc:
#element {
#include size(50%, 100px);
}
demo