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 10 months ago.
Improve this question
I have a piece of CSS that validator.w3.org gives an error CSS: Parse Error. It is related to the {}. Please help me check it. Thanks in advance!
enter image description here
#media only screen and (min-width: 768px){
.table td, .table th {
padding: 5px!important;
.svg-5 {
width: 1rem!important;
height: 1rem!important;
}
span.text-title {
font-size: 14px!important;
}
}
}
body.yivic-main .yivic-post-single .entry-content > p:first-of-type:first-letter {
float: unset;
font-size: unset;
line-height: unset;
margin: unset;
}
body.yivic-main .yivic-post-single .entry-content {
line-height: unset;
text-align: unset;
font-size: unset;
}
You have to compile in:
#media only screen and (min-width: 768px) {
.table td, .table th {
padding: 5px !important;
}
.table td .svg-5, .table th .svg-5 {
width: 1rem !important;
height: 1rem !important;
}
.table td span.text-title, .table th span.text-title {
font-size: 14px !important;
}
}
You can do it online on several sites like: https://www.cssportal.com/scss-to-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
There are these utility classes. I'm a beginner in CSS, and I want to organise my CSS in a better way.
.shadow {
box-shadow: 0 0 10px red;
}
.padding {
padding: 10px;
}
.radius {
border-radius: 10px;
}
.card {
background-color: red;
border: 1px solid red;
}
There appears to be no formal definition of 'utility class'.
However, a common use of the phrase applies to simple, often single setting, classes with some semantics attached to the class name.
So in your examples perhaps a more 'utility' view would be to recognise that there may be several padding settings, for example and set the nomenclature accordingly.
.shadow-10-red {
box-shadow: 0 0 10px red;
}
.padding-10 {
padding: 10px;
}
.radius-10 {
border-radius: 10px;
}
.card-red {
background-color: red;
border:1px solid red;
}
However, these are utilities, very basic, and so are used rather differently from a normal class that sets several properties at once.
In the change of padding shown in the discussion on Charles Lavalard's answer, I worry that the p-1 class, which initially appears to have a link to the semantics - viz 1em, then gets changed to mean 1.5em. That isn't my understanding of a utility class.
But then perhaps it's all getting a bit subjective because utility classes don't have a standard definition. And perhaps the p-1, etc. in that example was not intended to have anything to do with the property values, but it was saying 'the first of the padding choices' which would be logical.
You can use more specific names for your class, so if you want a specific padding for example, you can have multiple options:
.block {
color: white;
background-color: teal;
margin: 10px;
}
.p-1 {
padding: 1rem;
}
.p-2 {
padding: 2rem;
}
.p-3 {
padding: 3rem;
}
#media only screen and (max-width: 600px) {
.p-1 {
padding: 1.5rem;
}
.p-2 {
padding: 2.5rem;
}
.p-3 {
padding: 3.5rem;
}
}
<div class="block p-1">Padding 1</div>
<div class="block p-2">Padding 2</div>
<div class="block p-3">Padding 3</div>
You can take a look at Tailwind CSS, for example.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm trying to tighten the border under the navigation menu. This is the CSS code I have:
CSS:
li.current_page_item a {
border-top: 0;
border-bottom: 3px;
border-style:solid;
line-height: 0;
border-bottom-color:green;
}
My website http://www.verbatimagency.com
Try this:
li.current_page_item a {
border-top: 0;
border-bottom: 2px;
border-style:solid;
line-height: 0;
border-bottom-color:green;
line-height: 0px;
height: 0px;
padding-bottom: 10px;
}
li.current_page_item {
line-height: 0px;
padding-bottom: 0;
height: 0;
}
It was the padding-bottom on the <a> tag. See the corrected preview:
You may need to adjust it accordingly.
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 8 years ago.
Improve this question
I m looking for the best way to write css property code (not class name and organization but inside a css block).
In order to make it more maintainable, efficiency and readable by front-end team but also understandable by back-end team.
For now, i lean on two ways:
Box model convention:
.class {
display: block;
position: absolute;
width: 123px;
margin: 27px;
font-size: 13px;
color: blue;
background: red;
}
Alphabetical:
.class {
background: red;
color: blue;
display: block;
font-size: 13px;
margin: 27px;
position: absolute;
width: 123px;
}
According to you, what is the best solution and why? this or another method.
I follow #mdo's order from his code guide, here.
I find this really easy to understand and very clear especially with the spaces.
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I ran into a problem while designing a layout for my new website.
I want to center my text within a horizontal line, like this using CSS but found no way of doing it:
------- Title -------
Any suggestions ?
See example: http://jsfiddle.net/qm9mk/1/
/* this code is pulled from:
https://gist.github.com/kjantzer/5436097
*/
/* creates a divider line with text
expects <el><span>Title Here</span></el> (where el = h1, h2, etc)
*/
.divider {
position: relative;
color: #999;
}
.divider span {
background: #fff;
position: relative;
padding-right: 10px;
}
.divider > span + span {
padding-right: 0;
padding-left: 10px;
}
.divider.align-right {
text-align: right;
}
.divider.align-right > span { padding-left: 10px; padding-right: 0;}
.divider.align-center {
text-align: center;
}
.divider.align-center > span { padding-left: 10px; padding-right: 10px;}
/* create the dashed line */
.divider:before {
content: '';
position: absolute;
left: 0;
top: 50%;
height: 1px;
width: 100%;
border-top: solid 1px #ccc;
}
.divider.dashed:before {
border-top-style: dashed;
}
This can be achieved with some simple css, I use the border bottom to create the dashed line, and an inline-block span element to cover over it.
http://jsfiddle.net/aqsPb/
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 am trying to code a design into HTML and CSS. It is a small snippet. I am having issues with the positioning and cant seem to put elements in their correct places.
My webpage can be found at http://www.sarahjanetrading.com/js/j/index.html
The design that I want to copy can be found here: http://www.sarahjanetrading.com/js/j/people-list.png
I also want the checkbox input to look like the one in the design. Can checkboxes be styled?
Change Your CSS like this :
#people-list #content h2 {
font-size: 16px;
float: left;
margin-left: 10px;
margin-top: 5px;
width: 355px;
}
#people-list #content small {
font-size: 12px;
color: #8F9092;
margin: 5px 0 8px;
display: block;
float: left;
width: 355px;
display: block;
margin-left: 9px;
}
#people-list #content .tags {
border-radius: 7px;
box-shadow: inset 0px 6px 2px 8px #f5f5f5;
border: 1px solid #E3E3E3;
padding: 2px;
font-size: 9px;
margin-right: 3px;
margin-left: 10px;
}
and Check this link for styling checkbox
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
yes ,checkbox can be styled, try to put the buttons in a div and change the display attribute to inline