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>
Related
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 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>
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 a P element with style which I can't change.
I want to enclose it with a DIV to enforce a new font-size.
Why does the inner P ignore the div font-size?
Example:
<html>
<head>
<style>
.para1 { font-size:small; }
</style>
</head>
<div style="font-size:300% !important">
<p class="para1">I must have been asleep, for certainly if I had been fully awake I must have noticed the approach to such a remarkable place. In the gloom the courtyard looked of considerable size, and as several dark ways led from it under great round arches it perhaps seemed bigger than it really is. I have not yet been able to see it by daylight.</p>
</div>
</html>
You can set a class to the wrapping div, like I did here:
http://jsfiddle.net/3Zvrg/
HTML:
<div class="out_of_para1">
<p class="para1">
CSS:
.out_of_para1 p {font-size: 300%;}
EDIT: based on last comment from OP
I know you cant change the class but why cant you do this.
<div style="font-size:300% !important">
<p>I must have been asleep</p>
</div>
and not associate your "p" with any class??
Styles are only inherited if the value of the property is inherit. On the paragraph, the value of the property is small. Thus the font size of the div is 300% but the font size of the paragraph is small.
You have to explicitly set the font size on the paragraph element.
You could do this with a descendent selector in the stylesheet:
div .para1 {
font-size: 300%;
}
I have a DIV to which I want to apply a style currently prescribed for a certain tag (not class).
I want to use that as a base style for my container element, which will be used by its child elements that will use relative offsets for position and percentage for size.
Say, <h2> has font-size:x-large; font-weight:bold; by default. I could do:
<h2>
<div style="font-size: 50%;">something</div>
<div style="font-size: 80%;">something else</div>
</h2>
But this is invalid HTML, because div cannot be inside h2.
So I need a way to say:
<div style="whatever is currently applied to h2">
...
</div>
Is this possible without JavaScript (like sniffing out style properties using .css())?
Couldn't you use span's?
<h2>
<span style="font-size: 50%;">something</span>
<span style="font-size: 80%;">something else</span>
</h2>
And if you need them to be display: block:
h2 span {
display: block;
}
http://jsfiddle.net/HfQWz/
Although I would say you probably want to more specifically select the span's with a class on the h2, wrapping div.className, or something.