I have this css from bootstrap.min:
.rew {
margin-right: auto;
margin-left: auto;
margin-top: 20px;
width: 1050px;
}
.rew2 {
margin-right: auto;
margin-left: auto;
margin-top: 20px;
width: auto;
}
And my div like this (I've red examples from question and answer in stackoverflow):
<div class="rew rew2">
content.....
</div>
The (rew2) it's for responsived css, but before that I was wrote the css on my responsive css file, but it's not working the "div tag" always calls css from bootstrap.min css file. So I wrote two classes in the bootstrap.min css file, but not working also. The "div" tag only called the "rew" class and the "rew2" was ignored.
******** The class on responsive css file was deleted and I wrote the class on bootstrapmin css file
The differences it's only on width, if the site opened from desktop it would have 1050px width, and for the responsive (opened from smartphone) it will automatically adjust the template with the smartphone screen as "auto".
*Huft...I'm so confused why it's not working. I need help from you guys.
Thank you,
Best regards,
Kris
Why would you customize bootstraps .css file on your own? Just create your own rules and attach them to your div.
CSS stylings are always used one by one. So if you, for example, include your bootstrap.min.css file before your own styling rules, your own ones would overwrite all bootstrap stylings.
In other words:
First of all include bootstrap.min.css, then your own .css file.
Let's assume you've got this markup
<div class="foo bar"> </div>
You could style it through the 2 classes foo and bar.
.foo {
color: red;
}
.bar {
color: blue;
}
Using this would end up in the blue color, according to the declared order.
Let's even try to be a bit more specific.
You can also overwrite rules by using some more complex selectors.
.foo.bar {
color: black;
}
The above code would overwrite both of the previously defined rules, because they are 'stronger' selectors than a simple single-class selector.
Conclusion
If you want to overwrite bootstraps styling, try to stick to the order. If bootstrap uses some complex selectors and your custom ones won't trigger, try to use a bit more complex ones. Look here to learn more about complex selectors.
A little hint at the end:
Try to avoid !important! A rule, declared as !important, will overwrite all other rules, regardless of whatever you have declared up before.
Don't customize bootstrap.min.css create your own css file, In that you can write your own css as you need.As per you requirement include media query for smartphone in that give width: 100%; for that element.
Related
I have a <label> element in my ASP.NET core MVC project, that splits to multiple lines instead of showing in a single line. I've inspected the element in google chrome to see what css is being applied. It is getting it from my custom.css class. Below is my custom.css file.
body {
padding: 1em;
font-family: Arial, Arial, Helvetica, sans-serif;
}
h1{
margin-top:0;
color: navy;
}
label{
display: inline-block;
width = 50em;
padding-right: 1em;
}
div{
margin-bottom: 0.5em;
column-width = 300px;
}
The css in the inspect element is as below.
I've tried updating the custom.css files in the code, but it still somehow picks the same values for css. Tried cleaning and rebuilding the code. Still doesn't work.
However, when I un-select the width property(as shown below) in inspect element, it shows as expected. I'm removing the width property from custom.css file but it is still coming up during run.
I'm unable to explain why this is happening and how to get the label in a single line. Tried updating the custom.css file in code and the changes simply don't reflect. Why has this been happening and how to fix it.
If you're interested in the entire code source code
your source code link is not working so only just looking at your screenshots i'm suggesting the following changes, see if it helps you.
since you are using tag instead of a class the other classes or id selectors may be applied to your label width, the CSS selector specificity applied(or decrease) on the following order,
ID
class
tags
but don't use ID for this purpose since it's hard to override them in the future, use classes instead.
for now just set the width of the label as 100% so it will take full space of available width and also add !important to make it as high-priority origin that can override any inline styles or other overriding class styles.
label {
display: inline-block;
width = 100% !important;
padding-right: 1em;
}
So, I'm consuming a service from DRUPAL and it comes with its own style.
I tried applying css with !important tag to override it and it seems not to be working. The style from the service is pretty simple and I just want to override the background-color attribute.
.FixBackground{
background-color: rgb(238,238,238) !important;
}
#media all and (max-width: 1920px){
.Container{
max-width: 40vw;
}
}
#media all and (max-width: 1023px){
.Container{
max-width: 80vw;
}
}
#media all and (max-width: 728px){
.Container{
max-width: 90vw;
}
}
#media all and (max-width: 567px){
.Container{
max-width: 90vw;
}
}
This is the code example I'm using. Everything is working. The background is working, but it is not overriding the style from within some partes of the html code that the service gives to me.
The inline style is not marked
The only way that !important does not overwrite the other rules (including inline styles), is that there is another !important rule that comes after yours.
I would suggest using the web developer tools of Chrome (press F12, other browser's tools are very similar) and inspect the element you're interested in. There you can see what rules really apply (in the Computed tab), what rules are overwritten (is stuck through) etc.
A potential issue is also that you specified the wrong selector, so the rule does not apply, then you won't find your rule there (but you know what's the issue then).
Using the inspector is usually the way how to debug issues like this.
Example
For example font-size:100% is overwritten by font-size:13px in the following example:
In tab Computed you see the computed values:
There can you also see all the overwritten rules for a specific property (after a click on the arrow):
The code you posted is correct, see fiddle:
https://jsfiddle.net/unn3uen4/1/
<div class="container">
<p>
Test Container
</p>
</div>
<div class="container fix-background">
<p>
Test Override
</p>
</div>
In my test, the fix-background class is overriding the background color correctly.
The issue you are having must be somewhere else. Possible another class overriding your background color. Can you provide a demo website with the issue you are talking about?
Forgive me if I've worded the question wrongly. I'll try to explain my question briefly and accurately. First of all I am using an online website builder for my website called PortfolioBox.
What I am trying to do is clip an image within a container without the image automatically re-sizing itself to fit to the width of the container. The code I used is simple:
HTML:
<div id="imageContainer">
<img src="http://www.kirupa.com/html5/images/circle_colorful.png">
</div>
CSS:
#imageContainer {
background-color: #333;
width: 350px;
height: 200px;
border-radius: 5px;
overflow: hidden;
}
The following code should result in something that looks like this:
http://www.kirupa.com/html5/examples/clipping_content.htm
However, if you check the result of the same code on my website you will see that the image being clipped is shrinking to fit the width of the container:
http://roryhammoud.com/test-new
Because I am using a webhost/builder, the pages come prebuilt with CSS code. There must be something in the preloaded CSS that is causing this. I however don't have access to that CSS code.
The Question
So my question is, is there anything that I can do to override this issue?? I do have the ability to add CSS code to pages, so I am hoping I can override it somehow. I would greatly appreciate any help..
Here is the page on JSFIDDLE http://jsfiddle.net/0e5nda2b/ (Please note I cannot remove CSS code, I can only ADD)
Thank you in advance.
You have a CSS rule in your file that sets the max-width to 100%. Remove it.
.textContent object, .textContent embed, .textContent video, .textContent img, .textContent table {
max-width: 100%;
width: auto;
}
If you can't simply remove that rule, create your own that sets the max-width to initial and make your rule more specific, or use !important (not recommended). For example, #imageContainer img {max-width:initial;}
Because you are not able to modify the existing CSS, you must override it.
You need to be more specific with your selectors to target the element in question like so:
#imageContainer img {
max-width: inherit;
}
I'm using Bootstrap 3 to design a website, and I would like to ask how could I apply a custom class to an existing col-md-12 for example, so I won't use ids (#cusom-name) ?
should I write my css like
.col-md-12 test {
background: blue;
padding-left: 10px;
}
and my html like:
<div class="col-md-12 test">div content</div>
or should I just stick to something like using a standard col-md-12 and inside it use my custom class with a new div? like
<div class="col-md-12">
<div class="test">
test content
</div>
</div>
I hope it's clear enough... thanks!
In your HTML, load your custom stylesheet file AFTER you load the Bootstrap 3 stylesheet file. Don't ever edit Bootstrap's files, as updating will become difficult.
Then, in your stylesheet just define the class as normal, on its own.
.blue-bg {
background: blue;
padding-left: 10px;
}
Then, as you already have in your HTML, us it like this;
<div class="col-md-12 blue-bg">
div content
</div>
What this will do is apply all the styles from both .col-md-12 (defined by Bootstrap) and .blue-bg (defined by you).
The reason we load your stylesheet last, is for conflicts. If both you and Bootstrap are defining a property. For example, Bootstrap sets the background to red, and then you set it to Blue. Whatever the last stylesheet says, will be obeyed.
In this way, you can define yet another class;
.red-bg {
background: red;
padding-left: 10px;
}
Then use them both as often as you like, however you want. Consider this.
<div class="row">
<div class="col-md-6 blue-bg">
Div with a blue background.
</div>
<div class="col-md-3 red-bg">
Div with a red background.
</div>
<div class="col-md-3 blue-bg">
Another div with a blue background.
</div>
</div>
Just write it like this in your own CSS:
.test {
background: blue;
padding-left: 10px;
}
And like this in the html:
<div class="col-md-12 test">
<p>test content</p>
</div>
Don't change bootstraps css because then it will be harder to update it later on, insteed work with a css you create which overwrites bootstraps rules.
It really depends on what you are styling really. As well as your code style. You could add another modify class to the .col-md-12 class, or nest another class inside that container. There isn't an always or never answer for modifiers. And by modifiers, I mean overrides on BS3's default/core classes.
Also, in your example code, you forgot the period before test. It should be like this if you're going to nest that class inside:
.col-md-12 .text {}
Because .col-md-12 is a grid component, I think it makes sense to nest a div.test inside that component to not muddy up the context of what that element does, or how it behaves. An example that could have unwanted effects would be if you added padding to all .col-md-12 in your app, instead of the one off use of padding. To add the padding in this case, you could nest .test inside of .col-md-12, and add padding to .test (instead of the grid element). In my opinion, you'd have a nice separation of code and it's use. Also, you might be able to use that newly created .test class in other places of your app.
There are a lot of ways to organize your CSS, and keep elements together based on purpose. If you're interested in some reading, you might check out this resource: http://smacss.com/ (among others).
In CSS, you can have properties that will be set for both classes only, but there shouldn't be a space between the class names, as you have. It should be:
.col-md-12.test {
background: lightblue;
padding-left: 10px;
}
you don't need to add additional div, u can have
<div class="col-md-12 test">div content</div>
and define new as well as u can also override bootstrap css for col-md-12 but if u apply directly on it , it will applicable to everwhere where u have used this bootstrap class. so its better to add your custom css on .test e.g
.test {
width: 80%;
padding: 2%;
}
and if your custom css is not overriding bootstraps css u can use !important e.g.
.test {
width: 80% !important;
padding: 2% !important;
}
Defining a rule with the !important 'attribute' discards the normal concerns as regards the 'later' rule overriding the 'earlier' ones.
Take this code:
#wh_wrapper #slider .scrollButtons.left {
width: 100px;
}
the width of 100px is being applied only to:
#wh_wrapper -> #slider -> scollButtons left
If I do this:
.left {
width: 50px;
}
all the
.left
classes has now a width of 50px, including the one from before.
Now, I completely understand how to avoid this error (setting specific classes, putting .left before #wh_wrapper #slider .scrollButtons.left etc..) what I'm asking is if there is a way to specify properties that cannot be overwritten by "global" properties.
I hope I was able to explain myself.
Thanks
EDIT:
I now understand !important :-)
But look at this other example:
#wh_wrapper #slider .scrollButtons.left {
width: 100px !important;
}
.left {
width: 50px;
}
Now #wh_wrapper #slider .scrollButtons.left will still be 100px, but what about:
.left {
width: 50px;
border: 1px solid #000;
}
since I haven't decalred a border before I can't put an important on it, still the #wh_wrapper #slider .scrollButtons.left will now have a border property.
Any way areound this?
Yes, put !important behind them:
.class{
height:100px !important;
width: ...etc
}
Watch out though: Internet Explorer 6 and previous versions simply ignore !important, while IE 7 supports them. More info on this can be found here or here.
!important is something to consider, butyou should try to avoid it. Most of the times it can be avoided by building a better html/css tree or adding a class (try to keep them generic though ;)).
#EDIT: You should always put the most generic selectors on top, and the build down to the more specific ones. for example: put a img{} selector on top to provide a global specifier for all your images, then you go down more and more specific.
wrapper img{}
wrapper container img{}
wrapper container div.something img{}
and so on. Don't try to overdo the classes and ID's, the more generic your html/css is the better. containers and wrappers are often overused and unnescessary. Try to write good semantic html and keep html and css seperated. Don't use css when you should us HTML (and vice versa)
Often it is better to create your whole html file, and when everything looks good, provide css for the finishing touch.
Tried !important?
I tested your code in Opera, Chrome, FF and IE and all prefer the first line over the second one, no matter what the order of the rules is. In the sample you pasted there's a space missing in ".scrollButtons.left" - if I use that code then it (of course) always matches the second rule. Are you sure this isn't the problem?