I have a situation where a multiple select is somehow getting it's width via javascript dynamically but I can't seem to find where. I have nothing in my CSS that specifies a width of 411 px.
Website of Problem here
The width of the sidebar is the same always so I tried the following CSS and it is ignored? Am I missing some syntax? I've tried both of these and they do not work:
#widget-wrap .chosen-container-multi {width:200px !important;}
and
.widget-wrap .chosen-container-multi {width:200px !important;}
the control misbehaving is ul.chosen-choice so please set css as follows:
ul.chosen-choice {width:200px !important;}
There seems to be some inline styles declared in the widget template itself, rather than generated with JS.
Ideally you should remove the inline style from the template; otherwise this CSS will work just fine:
.chosen-container {
width:123px !important;
}
I can't see why your existing CSS wouldn't work other than it simply not being uploaded.
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>;
}
I have to use two different headers in the print version: one for the first page and one for the other pages. I would like to put a header (fixed on the top) for the other pages and use the css display: none for the first page. But I have not any effect with #page :first.
This is my code:
#page :first {
.header {
display: none;
}
}
I tried also putting !important in the css but nothing happens.
What should I do?
:first allows only few CSS properties. You can only change margins, page breaks and windows with it.Other CSS properties will be ignored. So i assume display:none may not work.
Though you can refer more about how to use #page and with what type of CSS properties it works.
https://developer.mozilla.org/en/docs/Web/CSS/:first
According to: https://developer.mozilla.org/en/docs/Web/CSS/#page
The #page CSS at-rule is used to modify some CSS properties when
printing a document. You can't change all CSS properties with #page.
You can only change the margins, orphans, widows, and page breaks of
the document. Attempts to change any other CSS properties will be
ignored.
And also for the :first https://developer.mozilla.org/en-US/docs/Web/CSS/:first
Note: you cannot change all CSS properties with :first. You can only
change the margins, orphans, widows, and page breaks of the document.
All other CSS properties will be ignored.
So since you're trying to remove one of your own elements - try using media queries instead:
#media print {
.header { display: none; }
}
https://benfrain.com/create-print-styles-using-css3-media-queries/
It looks like it's a Mozilla bug.
I am not able to get margins working, even when following their own example here:
https://developer.mozilla.org/en-US/docs/Web/CSS/:first
Both pages are printed in an identical way, no difference.
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 a div like this:
<div class="mobile">Some mobile content</div>
This content is hidden by default (core.css):
.mobile{display: none;}
Now, I want to show this div, when browser resolution is lower than 1024px and it doesn't work:
#media (max-width: 1024px) {
.mobile{display: block;}
}
How can I show this div? Opposite way works fine - showing and then hiding when resolution changes.
Since you use the same selector, it will always use the last called selector.
See this fiddle : http://jsfiddle.net/9KtHg/
It is working perfectly since the media query is called last (so it override the CSS when the condition are met).
But here : http://jsfiddle.net/9KtHg/1/
It is not working since the display:none is last and will override the other CSS.
To avoid that, you need to use greater specificity selector in the media query like :
div.mobile <-the tag name containing class='mobile'
[.][#][tag]parent .mobile <- use the parent in the selector
.mobile{display:block!important}<- using important is a bad pratice, avoid it.
You could also include the core.css before your CSS files containing your mediaqueries.
In conclusion, welcome to the fabulous world of CSS override!
By the way, CSS mean "cascading style sheets". As it said in its name, it work as a cascade where the last declared CSS will be used!
I have this problem and I don't know how to fix it. In my project many html files have defined for div an width style, for example:
<div style="width:200px" id="boom">/*****/</div>
In css file if I put a condition like:
`div#boom{width:auto !important;}`
is ignored because style is defined in html for that div and from what I know html condition beat css condition.
How is possible to fix that? I don't want to edit all html pages because I would take a long time.
You are doing something wrong. Because !important makes the style the highest priority, so it always use the width: auto; and not the inline CSS.
An live example that this works: http://tinkerbin.com/wzrFiyaq
And a tutorial: http://css-tricks.com/override-inline-styles-with-css/
div[style] {
width:auto !important;
}