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.
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 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...
I need the anchor text to wrap to the second line and still maintain the layout.
I have tried everything and I am not sure what I am doing wrong here.
Above is how I want it. My demo site where u can see the live layout : http://www.iamvishal.com/residen/?q=node/54
I have tried many variations
max-width
word-wrap
but nothing seems to work.
The strange wrapping is due to the use of padding on an inline element. You should either move the padding to the li elements instead of the anchors or change the anchors to display: block or display: inline-block.
I played arnd with your CSS on your website. This seems to do the trick. Do post your css and html on jsFiddle so we can better help you.
#navigation .links, #navigation .menu {
text-align: -moz-center;
}
I'm having a problem with overriding some plugin CSS. Editing that CSS directly is not really an option, as it would make updating the plugin more risky.
The problem: an element has absolute positioning, and has top:0px in the original. I want to override it by bottom:0px.
For the sake of example
.element {position:absolute; top:0;}
/* in another file */
.my .element {bottom:0;}
On firefox this works ok (bottom:0 is the applied style), but safari/chrome don't seem to be get over the top:0.
I can work around this problem, but it would be nice to come up with a clean solution.
Use top: auto to "reset" top to its initial value.
bottom is a totally separate property to top (an element can have both a top and bottom), so perhaps you won't need bottom anymore.
Also, make sure your override selector is specific enough, but it doesn't sound like that's the problem in this case.
.my .element { position: inherit !important; top: auto; }