I have to style an image with the class offer-img
<section class="offer">
<div class="container">
<div class="row">
<div class="col-2">
<!-- The image I want to style -->
<img src="img.png" class="offer-img">
</div>
<div class=".."> ... </div>
</div>
</div>
</section>
In my style.css, when I try to access it with
/* somewhere above the hierarchy */
.col-2 img{
max-width: 100%;
padding: 50px 0;
background-size: cover;
}
/* Not working
.offer-img {
padding: 40px;
}
*/
/* Works fine */
.col-2 .offer-img {
padding: 40px;
}
Edited:
When I try to access the .offer-img directly, my style is not applied.
It only works when I change .offer-img to .col-2 .offer-img
Why .col-2 img's padding is overriding .offer-img's padding?
Is .col-2 img more specific than .offer-img
Yes. You can access the class directly and there is nothing wrong with your code.
You are seeing CSS Specificity in action here
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.
The three css classes you used:
.offer-img: an element with the class .offer-img (less specific)
.col-2 img: img element inside an element with class-name .col2 (more specific)
.col-2 .offer-img: an element with class-name .offer-img inside an element with class-name .col2 (most specific)
The most specific style for the element will be applied if there are conflicts.
there's a typo here you've missed closing Quotation mark class="row> it should be class="row"> besides code is working just fine, i could select the class you're referring to without any issues & see if you're overriding styles.
.offer-img{
padding: 50px;
width: 500px;
}
<section class="offer">
<div class="container">
<div class="row">
<div class="col-2">
<!-- The image I want to style -->
<img src="https://wallpaperaccess.com/full/193101.jpg
" class="offer-img">
</div>
<div class=".."> ... </div>
</div>
</div>
</section>
Check If there is any css for only "img" tag in your style sheet which override your this class
Else give "!important" like
.offer-img {
padding: 40px !important;
}
The '!important' rule in CSS is used to add more importance to a property/value than normal
Related
Here's some code that contains a tags, one which contains an image.
<div class="container">
Not styled
<img src="image.png">
</div>
If I only want to style the image, how would I do it (without creating a class or something similar)?
For example, if I want to style all the a tags, I could use the following CSS:
.container a {
/* styles here */
}
If I want to style all the img tags, I could use this:
.container img {
/* styles here */
}
Is there a way to apply this same logic to an img in an a tag?
Edit: Here are the styles I'm applying. For some reason, when I use .container a img it adds extra padding/margins.
.container a {
padding: 9px 10px 5px 10px;
}
Edit 2: I think the problem lies elsewhere. Whenever I try any of the suggested responses (i.e. .container a img, #img, src="image.png") they all lead to the amount of vertical padding/margin increasing. Should I delete my post? It seems all it is getting is downvotes right now.
Yes You can do that, Have a look into the demo, it will be applied to all the images under a tag
.container a img {
/* styles here */
}
If you just want a single image to be applied for css, try giving it an ID, then apply css to an id
Demo which applies to all
.container a img{
filter: sepia(100%);
}
<div class="container">
Not styled
<img src="https://www.whistler.com/images/placeholders/200x200.gif" />
<img src="https://www.whistler.com/images/placeholders/200x200.gif" />
</div>
Demo which applies to single id
#img{
filter: invert(100%);
}
<div class="container">
Not styled
<img src="https://www.whistler.com/images/placeholders/200x200.gif" />
<img src="https://www.whistler.com/images/placeholders/200x200.gif" id='img' />
</div>
You can do a nested CSS
.container a img {
/* styles here */
}
.container a img {} is the best way to do it, but every IMG will use the amount of padding/margin that you've given in the .container a {padding: etc }. So try to position the IMG with margins.
I think you can simply use CSS to point exactly to the image like below:
img[src="image.png"]{
}
your question: If I only want to style the image, how would I do it (without creating a class or something similar)?
Now, if you only want that specific image no problem, but if later more and more images will behave the same way you better create a class
note: you didnt specify what styles you wanted for the image, so I asummed you wanted this ones padding: 9px 10px 5px 10px
<div class="container">
Not styled
<img style="padding: 9px 10px 5px 10px;" src="image.png">YES styled
</div>
Give your image a seperated class and then style it in your css
You just to need to write CSS with a in heirarchy as
.container a img {
// your code
}
I'm trying to remove the margin-left on http://insightcxo.com/epicwin/
The problem is when I target the class .container, it shifts the whole website over - I only want to target the div on the specific page.
This is the code I'm using that makes the page work but shifts the whole website over as well:
.container {
margin-left: 0;
}
Most WordPress themes (including yours) include the page ID as a body class name. In this case, the <body> tag looks like the following:
<body class="page page-id-731 page-template-default page-shadow responsive-fluid ">
This means that you can target this page via:
.page-id-731 .container {
margin-left: 0;
}
More about WordPress's body_class() function can be found in the Codex.
As per the page you are linking, it seems you are using an page-id as a class in your body, so this might work:
.page-id-731 .container {
margin-left: 0;
}
I am not sure if I understand completely, but I think what you need to do is add an id to the div you want to target.
Here is a JSFiddle of what I mean:
https://jsfiddle.net/dT9Yk/25/
HTML:
<div class="div1"></div><br>
<div class="div1" id="marginleft"></div><br>
<div class="div1"></div><br>
CSS:
.div1 {
width: 100%;
height: 50px;
background: red;
}
#marginleft{
margin-left:10%;
}
As you can see they all have the same class name but the middle one has an additional id tag.
Add a class to the body on that page only and then use specificity to target the container on only that page. For instance, add body class epicwin on that page and then use
.epicwin .container {
margin-left:0;
}
to target it.
Adding margin-left: 0px; to your CSS file is conflicting with the default .container class of bootstrap.
To fix your issue apply the class directly inline, it will solve your issue, like so:
<div class="container" style="margin-left: 0px;">
You can create something like this in the stylesheet you are using:
.Container_Div { padding: 0px 0px 0px 0px;}
Add this to your HTML:
div class="Container_Div"
Try this and let me know.
You can target a div with class/id .you can target directly or with reference of parents div class/id as follow.
<div class="parent">
<div class="child"></div>
</div>
direct target
.child{}
with reference to parent div .It will only apply style to class/id that exist in parent with specific id/class
.parent .class{
}
I am a newbie to bootstrap. I have developed a weppage using bootstrap3. I'm using these two classes on the same element, but the css is not having any effect:
HTML:
<div class="col-md-4 auminascroll">
dfgdgdfgdfgsdfgh cxzvdzfhfdbfd fbfddf
</div>
<div class="col-md-4 auminascroll">fghfdghfdhdfhfdsh</div>
<div class="col-md-4 auminascroll">dfgdsgdsfg</div>
Css:
.col-md-4 .auminascroll {
height: 50px;
overflow-y: auto;
}
I am not getting a scroll when using above code. If I put height: 50px; overflow-y: auto; in a style tag, my code works fine. Why is this css not having an effect when using it with this bootstrap class? Is there any problem with my code?
Any help will be greatly appreciated!!!
You're nearly there! When using a selector to choose two classes there should be no space between the class names - they just need separating with a dot.
.col-md-4.auminascroll { /* no space between the two classes */
height: 50px;
overflow-y: auto;
}
Your code (where there's a space between the two classes: .class-a .class-b would actually look for an element of class-b inside and element of class-a.
<div class="col-md-4">
<div class="auminascroll">
</div>
</div>
You are using the wrong css selector. You need to use it like:
.col-md-4.auminascroll {
height: 50px;
overflow-y: auto;
}
I want my homepage to feature multiple Jumbotrons, but when I try to style the Jumbotron class in my css.css file, they stylings are applied to each jumbotron. Without using inline css, how can I modify jumbotrons individually within my css file?
My css.css file, jumbotron class. Currently the changes are applied to both jumbotrons on my home page, when I just want the css below to be applied to the first.
.jumbotron{
width:100%;
height: 1400px;
background-color:#f39c12;
padding:0px;
margin:0px;
opacity: 0.7;
text-align: center;
}
My homepage. I would like the two jumbotrons to be different
<div class="jumbotron">
<div id="firstJBox">
</div>
</div>
<div class="jumbotron">
</div>
Add another class for specificity..
<div class="jumbotron jumbotron-special">
<div id="firstJBox">
</div>
</div>
<div class="jumbotron">
</div>
CSS
.jumbotron-special{
width:100%;
height: 1400px;
background-color:#f39c12;
padding:0px;
margin:0px;
opacity: 0.7;
text-align: center;
}
Demo: http://www.bootply.com/122798
Classes work, but they are meant to be re-usable. an ID seems more suited for this situation, since it is used to identify unique DOM objects, and can only be used once.
Used this to work
html
<div class="jumbotron" id="jumbotron-body"> </div>
css
.jumbotron#jumbotron-body { background-color: red; }
I am building a website using singularity.gs which I am fairly new to.
I am having trouble giving a div a background-color, this is my html structure:
http://oi44.tinypic.com/205xt1i.jpg , the "green" part is my about div.
<div class="about">
<div class="photo">
<img class="photoBorder" src="images/foto_jeroen.png" alt=""/>
</div>
<div class="text">
<h1>Hello I'm Jeroen Druwé</h1>
<p>...</p>
</div>
</div>
To achieve this affect is had to set a height for the div:
#include breakpoint(70em) {
.about {
height: 340px; //This property will set the height of the div
}
.about .photo {
padding: 1em;
#include grid-span(2, 4);
}
.about .text {
padding-top: 7em;
padding-left: 1em;
display: inline;
#include grid-span(4, 6);
}}
If I remove the "height:340px" no background will be drawn:
http://oi39.tinypic.com/2s16ezl.jpg (only my thin borderline)
Is there a way to let the div wrap its height around its content (.photo,.text)?
Note: if i remove #include grid-span for .photo and .text the background shows but I do not want to lose the singularity functionality
Thanks in advance!
Don't span the container.
The problem you experience happens because Singularity columns are floated, and floated elements are taken out of the flow. This means that the container does not "know" about your columns any more, so it behaves like an empty element.
There's a property called clear that positions an element below any nearby floated element. If you create an extra element inside the container after all your columns, the clear: both; rule applied to it will push it below the floated columns, effectively stretching the container as high as columns are:
<div class="about">
<div class="photo">
<img class="photoBorder" src="images/foto_jeroen.png" alt=""/>
</div>
<div class="text">
<h1>Hello I'm Jeroen Druwé</h1>
<p>...</p>
</div>
<div class=clear></div>
</div>
.clear { clear: both; }
But don't add an extra element, that's not semantic. Instead, use the :after pseudo element that appears at the end of an element's contents. Using :after is just like creating a blank element at the end of element's contents.
.about {
&:after {
content: ''; // This is required for the pseudo-element to exist
display: block; // Default display is inline, have to change that for `clear` to work.
clear: both; // Yay, magic!
}
}
This technique is called "clearfix".
This can be done even simpler with the multi-purpose Toolkit extension from Team Sass, the authors of Singularity:
#import 'toolkit';
.about { #extend %toolkit-micro; }
The %toolkit-micro extendable has some additional rules that makes the clearfix trick work in older browsers. There's also the %clearfix-legacy extendable that works even in ancient browsers.
I fixed it.
Forgot to add an #include grid-span(12, 1); for my .about