I am a CSS newbie and I have to change some code where it looks like they are inheriting styles from bootstap..
<style>
.thumbnail{display:table !important}
</style>
<div class="thumbnail">
So thumbnail is a cell inside a table and I need to change the height and weight of this cell, any suggestions on how I can do that? I am not seeing any height or width attributes for that style?
Thanks.
Do not modify bootstrap classes just add new class like this
CSS
.thumbnail-custom{
background-color:red !important;
}
I think even !important is not needed
HTML
<div class="thumbnail thumbnail-custom">
...
</div>
If you are using LESS
.thumbnail-custom{
.thumbnail;
background-color:red !important;
}
And HTML
<div class="thumbnail-custom">
...
</div>
Related
Please help me with making a text size bigger with style in the following code.
<div class="hidden-overlay"> MASTER CLASS AIR 2.0 TITANIUM </div>
You can try this by adding a modifier for the class, allowing you to change the font size, respectively, the current font size (%, em, rem), or you can specify a static size for example 20px,
<div class="hidden-overlay hidden-overlay--large-percent"> MASTER CLASS AIR 2.0 TITANIUM </div>
<style>
.hidden-overlay--large-percent{font-size: 150%}
.hidden-overlay--large-rem{font-size: 1.5rem}
.hidden-overlay--large-rem{font-size: 1.5em}
.hidden-overlay--large-px{font-size: 20px}
</style>
for hover effect
<div class="img-wrapper">
<img src="some-img.jpg">
<div class="hidden-overlay <div class="hidden-overlay hidden-overlay--large-percent">MASTER CLASS AIR 2.0 TITANIUM</div>
<div>
<style>
.img-wrapper:hover .hidden-overlay--large-percent{color: blue}
.img-wrapper:hover .hidden-overlay--large-rem{color: #00f}
.img-wrapper:hover .hidden-overlay--large-rem{color: #00f}
.img-wrapper:hover .hidden-overlay--large-px{color: #00f}
</style>
Since you want to do it from style in the div you've provided, you can try this:
<div class="hidden-overlay" style="font-size: 20px;"> MASTER CLASS AIR 2.0 TITANIUM </div>
style attribute is added to div in which you can write regular css code.
If you want to apply to several places in HTML then you'll have to use CSS classes.
You can try something like this:
<div style="font-size:40">(insert your text here)</div>
You can change the size instead of the "40" as you want.
One solution is to simply set the font size for everything in the div like so:
<div class="hidden-overlay" style="font-size: 3em;"> MASTER CLASS AIR 2.0 TITANIUM </div>
A nicer way of doing it would be to make the text a heading by nesting it in an h1 (maybe try and h2 or h3 aswell)
<div class="hidden-overlay"><h1>MASTER CLASS AIR 2.0 TITANIUM</h1></div>
see a live sample here.
Extra Note: If you didn't want this css to be inline instead of style="font-size: 3em;" you could just apply this css to the class hidden-overlay like so:
<style>
.hidden-overlay {
font-size: 2em;
}
</style>
I would change the style of p-inputSwitch component of Primeng library
I would get something like this:
Here's my code :
<div class="contner">
<div class="toggle-area">
<p>SEARCH BY</p>
<div >
<p class ="toggle-inline">Business group</p>
<div class="toggle-btn toggle-inline">
<p-inputSwitch [(ngModel)]="checked"
onLabel=""
offLabel=""
styleClass="ui-inputswitch"
></p-inputSwitch>
</div>
<p class="toggle-inline">Borrower</p>
</div>
</div>
I started by deleting labels but width changes also and I don't know how to increase it
I started by deleting labels but width changes also and I don't know how to increase it
Override PrimeNG ui-inputswitch class :
.ui-inputswitch {
width: 80px !important;
}
See Plunker
you can replace your div element with following
<p-toggleButton onLabel="Business Group(s)" offLabel="Borrower(s)"
onIcon="fa-toggle-on" offIcon="fa-toggle-off" [(ngModel)]="checked"></p-toggleButton>
I'm trying to change an elements class, but it doesn't seem to affect it.
The CSS file is loaded in <head>, but the class doesn't seem to have any effect.
My HTML:
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
and my CSS:
.col-sm-3 {
background-color:black;
height:500px;
}
this is because your bootstrap file is loading after the css file ,or try giving
.col-sm-3{
background-color:black !important ;
height:500px !important;
}
but giving !importantis a bad idea since it overrides the bootstrap class.Hence try swapping the files make sure you css loads after the bootstrap file.
Try to avoid !important.
Include your custom css after bootstrap.
Use custom class to overwrite bootstrap style
HTML
<div class="col-sm-3 black-bg">.col-sm-4</div>
<div class="col-sm-6 black-bg">.col-sm-4</div>
<div class="col-sm-3 black-bg">.col-sm-4</div>
CSS
.col-sm-3.black-bg{
background-color:black;
height:500px;
}
do one thing, nest you css, write rules like this
html body .col-sm-3{
background-color:black;
height:500px;
}
it is the right way to override css
Media query width is not applying to col-md class. Below is my code. I am using latest version of Bootstrap.
<div class = "col-md-8 article-container-fix">
<div class = "articles" >
<article class="clearfix">
<header>
line 1
line 2
line 3
</header>
</article>
</div>
</div>
CSS code
#media(max-width: 1199px){
.article-container-fix {
width: 400px;
margin-left: 1em;
background: black;
color: white;
}
}
Except width, all three other properties apply to this class ".article-container-fix" but not that "width: 400px". I don't know where I am missing anything.
I would suggest you to try it with a bit less max-width than 1199, something like 720px to see if it works or not. Other way to output this would be the following
HTML:
<div class="col-md-8">
<div class="article-container-fix">
Content here!
</div>
</div>
And use the same CSS you used before. It's complicated with bootstrap to actually get some things in place the way you want it, and for this, it could be interfering with pretty much anything. Hopefully this will work for you.
ITS Due to you have write your article-container-fix class with col-md-8 class. col-md-8 is a Bootstrap framework class. By default there is a default width given in bootstrap.css.
There is two way to overcome from this problem:
Either you have to write !important in your media query like width: 400px !important;
Or
You have to re-positioning your css in your <head> tag, include most last your responsive.css in your <head> tag.
I have the following setup
<div id="outerDiv" style="width:100%;">
<div id="innerDiv">
<center>
<a href="http:/..." title="..">
<img src="http://...jpg" width="800" height="xxx" alt="..">
</a>
</center>
</div>
<div>
The width of the outerDiv can change based on browser view-port. Is there a way to restrict the width on the innerDiv just by using a style attribute, such that it overrides the included image width (800 in this example). Currently the image spans beyond the viewport and I would like the div/browser to shrink the image to the inner-div-size.
Am looking for something like:
<div id="outerDiv" style="width:100%;">
<div id="innerDiv" style="attribute:xxx;" or something similar>
<center>
<a href="http:/..." title="..">
<img src="http://...jpg" width="800" height="xxx" alt="..">
</a>
</center>
</div>
<div>
Please note that : the innerDiv is rendering 'variable' data coming from a stored parameter for instance. I only have control on the style on the innerDiv to make sure that things like 'center' or 'width' on the innerHtml does not go beyond what the outerDiv is setting. I have tried to use 'max-width' on the outer-div, but that didn't seem to work (I am not an expert on html/css - so I could have done it incorrectly).
Many thanks for all your help !
max-width property can help you.
Remove width attribute from img tag and write additional css code:
<style>
#innerDiv { text-align: center; width: 800px; }
#innerDiv a > img { display: inline-block; max-width: 100%; }
</style>
ComFreak has the complete answer.
Remove the center tag and instead add some css. Also add an id to that image if you want to target only that image specifically as far as its size.
#innerDiv {
max-width:800px;
margin:0 auto;}
img {/*use 'img#idOfimage' instead of 'img' if you end up adding an id to image */
width:100%;
height:0 auto;}
This should take care of it. You can put the css in a style tag in the header or better yet in a separate css file.
Don't use center tag. It defentinatly is outdated. Instead use margin: 0 auto; That will center the content. And use the max-width property for the innerDiv id. This is a great reference source. http://www.w3schools.com/cssref/pr_dim_max-width.asp