I want to know how to remove the responsiveness of a images from a specific div. I am not using any framework, just a plain CSS that responsifies.
Here's the code for all the images tags:
img { max-width: 100%; height: auto; }
Some how i dont want these styles on a specific Div ID or Class.
How can i do that?
To reset or remove the CSS that previously set by using the default values for the respective styles
Try this CSS:
#specificDiv img {
max-width : none;
height : auto;}
Reference
(Update): added the img tag... that's needed according to the question...
Related
I'm working right now on a CMS called TYPO3 v.10 , this CMS is pretty complicated to me.
I have an image and a css-file, I can't give the image a class or an id, I can give the image basically nothing, it's just there and i have to style it.
So my question here is:
How can I style the image without giving it a class or an Id or anything else?(maybe using the source or something like that?)
I've used the img tag in css, but I've changed every single image in the whole CMS.
/* not desired as it effects all images */
img {
width: 100;
height: 100;
}
<div>my missing HTML here</div>
You can select an image by using its parent. For example .image-container img, which will target all the images within the parent, or use .image-container > img, which will target only image within the parent, but not images that are within children.
If your images dont have a parent, you can select them using body element and nth-of-type() selector. For example body img:nth-of-type(2) to target second img withint the body
Can you perhaps find a specific container(s)? If so, you can add a style to that. E.g.
section header .containername img {
}
If not, perhaps you can try other selectors. There are so many e.g. https://www.w3schools.com/cssref/css_selectors.php
If that doesn't work, perhaps you can use javascript to add a class to the specific image, it's container or anything near it.
You're correct, you should be able to target the image using its source URL and the CSS attribute selector:
img[src="img/url.png"] {
/* styles */
}
You can also use *="value" instead of ="value" to select any image whose source contains (but is not necessarily equal to) value.
Read more about attribute selectors on MDN Web Docs.
Are there multiple images on your webpage? If there is only one, you can add styling to the img tag in CSS:
img {
width: 100px;
height: 100px;
border: 1px solid black;
}
You can add CSS to the image by calling the parent class in which you used the "img" tag.
Check the provided attachment!
body .parent-class img { width: 100px; height: 100px;}
I need to change the container padding. Particularly the width. I tried to find the code in style.css and found this code.
.center{ width:85%; margin:0 auto;}
I adjusted the width to 100% but it took the logo and the menu bar to the left side with itself.
I am searching for the solution to this. Also I want to apply this css code to only one page.
If you're changing the width, you're going to change how that element interacts with other elements, so changing the width is a bad idea.
You should stick to just changing the padding.
.center {
width: 85%;
margin: 0 auto;
padding: 10px; //insert whatever padding you want here
}
If this is affecting the width of the element, then try applying:
.center {
//your existing css for this selector, then:
box-sizing: border-box;
}
If you want to apply this change to one page only, your best bet is probably to add a class to the html element that you're trying to modify and target that class with your new padding.
I am trying to change the margin-top property of a div in a WordPress theme, however it does not seem to work. I have added the following line to the custom css stylesheet:
div#primary {
display: block;
margin-top:50px;
}
However the div whose property I want to change does not move down. The example can be found at the following URL: http://who.designbond.co.uk/contact-2/
The div I need to move down is the one containing the text of Phylosophy. Can anyone explain to me what I am doing wrong?
Thanks
That div has an inline style with margin-top: 0px, which is overriding your stylesheet.
You need to remove or modify that inline style, or (in a pinch, and don't tell anyone I said this) add !important to your stylesheet rule).
div#primary {
display: block;
margin-top:50px !important;
}
I know it's not a good thing to do (adding !important), but it can help.
Something is setting some inline styling on that div. You can override it using !important.
#primary {
margin-top: 50px !important;
}
Also, since there is an id on that element you css selector can be simplified to #primary instead of div#primary
I see that the div with id primary has a in line stylesheet. Inline style sheet takes priority over class based style sheet. Your inline stylesheet has margin-top:0px, which is ignoring your class based styling. remove it and it will work.
For awhile I was avoiding upgrading my bootstrap-sass gem in my ruby project because of one single change :
height: auto;
inside the img element.
This property seems to override explicit height properties.
So I have an image that is width 1, height 32 and I use it as such :
<img height="1" width="15" src="/assets/spc.png" alt="">
The height: auto; seems to force the image to display as 15 x 480 (32 x 15 = 480).
I have tried to redefine the img element by adding in-line style in the HEAD of my HTML, (for example img { }) but this does not seem to help.
I am not sure what the appropriate solution is. I use blank images around my site to create specific spaces between other elements. I probably can do this with some other kind of element, like a div or a span?
how about using margin?
you can for example:
.spacerdiv{
height:1px;
width:15px;
}
add the div in the html and define this class to them.
But that's very bad practice. adding redundant elements to DOM
or even better just define margin
You can do it object oriented and define things like:
.margin_left_part_of_site{
margin: 5px 15px;
}
You can then add this class to every element that must have these properties.
A jsfiddle example would allow further help.
The solution I came up with was to use divs. I now use divs such as :
.login-spc {
display: inline-block;
height:40px;
width:5px;
vertical-align: middle;
}
UPDATE: I have tried the suggestions below, but I'm still facing the same problem. I've edited the code below to reflect the new stylesheet. If it helps, the page in question is http://japanesenostalgiccar.com/2011/05/06/friday-video-nissan-cedrics-vs-s30-fairlady-z/
In my wordpress blog I'm trying to create a stylesheet where an image or embedded youtube video is 640px wide, while the text beneath it is only 600px wide.
The wordpress-generated HTML looks like this:
<div class="entry-content">
<p>
<a href="uploads/2011/05/ball.jpg">
<img class="alignnone size-large wp-image-15139" width="640" height="211"
src="uploads/2011/05/ball.jpg" title="Ball" />
</a>
This is a baseball.
</p>
</div>
My external CSS file has the following:
.entry-content p{
overflow: visible !important;
padding : 0px 20px 0px 20px;
}
.entry-content p .alignnone, iframe{
overflow: visible !important;
width : 640px !important;
padding : 0px !important;
}
img.alignnone.size-large{
overflow: visible !important;
width: 640px !important;
padding : 0px !important;
}
However, the image (and the text) always displays at 600px, while the embedded youtube videos (using the iframe tag) display at 640px.
Thinking it was a specificity issue, I even added
style="width: 640px;"
as an IMG attribute, but no dice. Thanks in advance.
Based on your updates, I looked at the page in question. I think I might have an answer for you.
Check out the styles that your theme "TwentyTen" is inserting starting at line 778:
/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img {
max-width: 100%; /* When images are too wide for containing element, force them to fit. */
height: auto; /* Override height to match resized width for correct aspect ratio. */
}
The 'max-width: 100%;' line seems to be the issue. Using Firebug, I just turned that style off for a second and the picture of the Nissan snapped out to be full-width. So to solve it, you should be able to add this to your own stylesheet:
max-width: none;
I hope this helps!!
You have another class on the image of "size-large" - did you check to see what that style is doing to the image? Does that style possibly have a "!important" declaration in it?
I don't know what the other classes on your img are doing, but maybe you could try something like this:
img.alignnone.size-large {width: 640px !important;}
simple:
.entry-content p .alignnone, iframe{
width : 640px;
}
this will take the child element of p, and set it at 640px;
However, you might need to set the
.entry-content p{
overflow-x:visible
}
The image is only 600px wide because of the padding on the paragraph tag.
If you want to display the image and the iframe at 640px, you can add the following:
to the image:
img {
margin: 0 -20px;
display: block;
}
to the iframe:
iframe {
margin: 0 -20px;
}
Did you try separating the div's i.e. tags for the text beneath & that contains the image/video ?
Keep the container that holds (iframe & text) consistent.
Separating the divs for inner elements of the container is a better option.