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
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 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 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;
}
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 have 2 controls which must have 100% width. So I have a question what is better:
1) declare CSS style name for each control (CSS style will contain only width: 100% declaration)
2) declare only one CSS style name which will be applied to all widgets requiring 100% width?
I mean:
.myFirstWidget {
width: 100%;
}
.mySecondWidget {
width: 100%;
}
vs
.maxWidthWidget { width: 100%; }
Use .maxWidthWidget it will be easier to update a site if you stick to these naming conventions. Only separate if they ever need to be different.
Maybe like this?
.myFirstWidget,.mySecondWidget {
width: 100%;
}
I'd go for the one-class fits all. It's more descriptive as a name, and it's easier to maintain, and uses the principle of reusability. :-)
A better solution is:
.myFirstWidget, .mySecondWidget {
width: 100%;
/* Other shared properties... */
}
.myFirstWidget {
/* Properties specific to this widget... */
}
.mySecondWidget {
/* Properties specific to this widget... */
}
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 8 years ago.
Improve this question
I want to display embeded video in my page in 720px x 405 px so I reduced the default size defined in theme which was 922px but after making changes there is an extra space which is creating an issue and I want to remove this space. Here is the screenshot which I got while using Firebug :-
link :- http://personal.t15.org/Untitled-2.jpg
link :- http://bit.ly/129HyJm
Can anyone tell me how to remove this space?
Add this CSS:
.fluid-width-video-wrapper {
position: relative !important;
bottom: -90px !important;
}
.embed-vimeo {
margin-top: -90px !important;
}
Add this to your css
.embed-vimeo iframe, .embed-youtube iframe{max-height:auto !important;}
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 9 years ago.
Improve this question
Created a div with a unique class applied to it in the file bootstrap unique styles, but when the page loads, they disappear. How to understand that their erasure and fix it?
.slider-container {
height: 100%;
position: absolute;
z-index: -11;
}
My site is - http://tourlly.com/new/
http://i.imgur.com/MvkTHzT.png
in your CSS. Check it. And try use validator for markup