I am having a HTML content like this.
It has a padding of 70. I tried to reduce the padding by adding using another css rule like this
padding-top: -20px !important
All I want to do is, already existing property value 70px should be added with the additional rule -20px so the result should be 50px.
I am able to accomplish this by doing padding-top: 50px !important
But still I want to do this mathematical calculations in the css as I asked. Please help.
Note: The already existing value is in separate css rule and this added one is in separate rule.
Unfortunately, you can't do cross class calculations in CSS
If you want to do mathematical calculations of any kind, check out the calc() function
It allows you to do things like: padding-top: calc(10em - 60px)
As long as you're not using it for background-position; calc should be backwards compatible to IE9 and work on pretty much any other browser bar Opera Mini
Related
I have made a complete Bootstrap grid system. I am now uploading my code to a CMS system, and can see there is some CSS from the backend, there is messing up my grid.
If I untick the following code in the inspector window, everything is looking perfect. When the following code is ticked in the inspector window everything is messed up. Is it possible to overwrite this code somehow, so the class is not used?
.cms-area img {
width: 100%;
}
You can use !important in such cases but use it sparingly. Best is to remove the unwanted code and not use !important. !important might cause issues later that are difficult to debug. If possible include your css after other css is included in the code. In CSS, rules that appear later take precedence over earlier rules
Edit:
Set width to auto instead of 100% to fix your alignment issue
Below given is the ideal way to manage css since it allows you to attribute your style content and lets you override the style already applied elsewhere.
.cms-area .your-class img {
width: <your choice>;
}
IN order to keep the CSS rule I want for a div I have to add: "padding-left:70px!important" to apply generally.
but for the mobile, i would like padding-left:0px.
So I simply add to the media query of the mobile size "padding-left:0px!Important"
So I thought that automatically when switching to mobile size it will take the CSS style inside the media query as the one to use as both have!Important.
But does not happen, it still keeps the 75px padding.
Thanks
Order matters, later one with !important will overwrite previous (!important) one, see example below, whatever media query works for your mobile, make sure you order them correctly
(move your global CSS to top, and media query to bottom)
.test {
color: red !important;
}
.test {
color: green !important;
}
<span class="test">TEST TEST TEST</span>
CSS styles will take the most specific rule you supply, so make sure that your padding-left:0px!important rule is still more specific than the one declaring padding-left:70px!important.
If the specificity is identical, then CSS will use the last rule defined, so also ensure that your mobile override appears after the initial padding-left rule.
This is where you can check and understand specificity:
https://www.w3.org/TR/css3-selectors/#specificity
Bonus: calculate selector specificity: https://specificity.keegan.st/
I have a weird one that I can't seem to be able to figure out. I am new to CSS and decided to use bootstrap to assist with styles etc.
the problem I have is when I try to assign two classes to a div element, 1 being the bootstrap column and another from my own stylesheet.
the code from my stylesheet seems to be ignored in some cases. now i have taken that one bit of code and css out and put it into the jsfiddle but it works fine. its only when combined with the rest of the html does it seem to have issues. also note that if i use inline styles it works...
I copied the entire code to js fiddle now so that you guys can replicate the issue. the section I am having issues with is the 4 images that are side by side
class="services-boxes"
anyway any assistance will be appreciated, as well as general feedback as I am new to this all! :)
https://jsfiddle.net/d9bv0grx/1/
Due to the way cascading style sheets work it (styles are be applied in order AND by specificity). It is most likely that styles you are expecting to see are being overridden by specificity.
Give this guide a read.
An example is that for <div id="selector">
#selector {background-color:red;}
div {background-color:green;}
You can expect to see a div with a red background, even though the green background is set afterwards, the id selector has greater specificity.
Then try and alter the specificity of your selectors in your css so that they will take precedence over in bootstrap.
Also just going to add, you have casing issues - you declare the class with lowercase in css, capitalised in your html.
You also have syntax issues in your css. Your css should look like:
.services-boxes {
padding:0;
max-height:500px;
width:100%;
}
Sort all this and you should be golden! jsfiddle
Looks like a combination of syntax errors. Your style should be declared like this:
.services-boxes {
padding:0px;
max-height: 500PX;
width:100%;
}
Note that the class is all lowercase (which should match style where declared which is currently Services-Boxes), a colon separating property and value (you has used = in some instances) and one set of curly braces per declaration (the above class .logo-image has 2 closing braces). Just a bit of formatting should see your code recognised
When you don't have total control over your HTML, you can use the !important property in css to give a priority to your styles.
.services-boxes {
color: red !important;
}
However keep in mind that you have to avoid the !important property as much as possible and do not use it unless you can't do it any other way.
I have next situation, look at the picture, please.
How can I change this padding value? I need reduce it.
The RWT Theming Reference lists a Table-Cell CSS rule that has a padding property, that
Defines the padding (i.e. the inner distance between border and content) for a table cell.
Without having tried, you should be able to specify a custom padding with
Table-Cell {
padding: 2px;
}
See also the RWT Theming chapter of the developer's guide for more.
I am using Bootstrap 3 to build my personal website and have been searching for a way to do the following:
I would like to assign unique gutter widths to specific rows in my layout.
The rest of the website will make use of the underlying gutter width.
Is it possible? Any help would be much appreciated. Thanks in Advance / Trev
The simplest way to change the spacing between columns (gutter) is to use CSS to override the default padding (15px)..
.row .col:not(:first-child),.row .col:not(:last-child) {
padding-right:5px;
padding-left:5px;
}
Demo: http://bootply.com/94849
Yes. Add a unique CSS class, say my-personalized-row to the row you want to edit. Then in your CSS, add a section for this as following:
.my-personalized-row {
margin-bottom: 5px !important; //If you want 5px of gutter width.
}
Now, whatever you put between the two braces will apply only to this row and the rest of the site will use the underlying gutter width.
UPDATE:
I have added the style rule you would want to use to reduce the gutter width for a specific row to 5px. The !important is to ensure that specificity rules will not interfere with your declaration. Note that it is not mandatory to use !important since Bootstrap declares styles with a single class as well.