I am trying to change the background-color of an h1 class, but any changes I try to make have no effect, this is the code I have written:
.entry-title {
background-color: #f0eaca;
}
The title appears white instead of beige like everything else: https://apatheticpaper.wordpress.com/2015/02/13/raf-simons/
Any help would be greatly appreciated.
don't use !important.
the issue is, it has a style for background. so,
.single .featured-portrait .entry-title, .page .featured-portrait .entry-title
{
background : none repeat scroll 0 0 #f0eaca;
}
will do.
Your title class seems to be overridden by some media query:
#media only screen and (min-width: 1359px)
.single .featured-portrait .entry-title {
color: white;
}
}
You either need to override it with specificity or !important (not advised):
.single .featured-portrait .entry-title {
color: #f0eaca;
}
this class is over riding your property
.page .featured-portrait .entry-title
{background-color:white;}
Instead change it to
.page .featured-portrait .entry-title
{background-color:#f0eaca;}
try with !important as another option
As i can see currently on your code :
h1.entry-title {
background-color: #f0eaca !important;
}
So to update your code, you need to made the same or upper priority on like :
h1.entry-title {
background-color: #123456 !important;
}
You should read this article about priority on css
Related
I'm having trouble with the main menu in the header of my Wordpress site here: http://eptestdev.us/qa
The only way I can get it to fill the entire box is by declaring it to have a width of 950px. However, I want it to disappear when the user is on a mobile device leaving just the mobile menu.
My CSS looks like this, but it is not working:
#media screen and (max-width: 900px){#access {display:none;}}
Not sure how I can get it to collapse otherwise. Any help would be appreciated.
You just need to add the !important tag to your css, so that it overrides everything else. Like this:
display: none !important;
I tested this on your site and it worked.
In general it's good to avoid using !important - and instead use CSS's natural way of determining which rule is used.
Earlier rules (at the top of the stylesheet) are overruled by later ones:
.box { width: 200px; border: 1px solid black }
.box { width: 500px; }
The second rule will override the previous width declaration, giving you a 500px box with a black border.
In your case, the reason your media query rule isn't working is because it occurs before the 'normal' one. If you switch:
#media screen and (max-width: 900px){#access, #copyright, .menu-footer-menu-container {display: none;}}
/* ... other rules ... */
#access, #access-footer {
background:#000000;
clear:both;
display:block;
float:left;
margin:0 auto 2px;
width:100%;
max-height:20px;
}
with
/* ... other rules ... */
#access, #access-footer {
background:#000000;
clear:both;
display:block;
float:left;
margin:0 auto 2px;
width:100%;
max-height:20px;
}
#media screen and (max-width: 900px){#access, #copyright, .menu-footer-menu-container {display: none;}}
This rule will work without needing to use !important.
There are other ways to make rules keep: for instance, a more specific rule will be used before one that is more generic:
#menu .submenu-item { color: green; }
.submenu-item { color: red; }
As long as your .submenu-item divs are within a '#menu' div, they'll be green, because the subsequentcolor: red` declaration doesn't have the same level of specificity.
You can read more on this here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I've managed to change the Logo the way I want it using Logo using CSS but I'm struggling to figure out how to change the hover color of it.
I want to change the TEST color on hover from blue to something else
http://test.peterstavrou.com/
At the moment my CSS code is
header#top #logo {
letter-spacing: 2px;
font-size: 35px;
}
your Logo-Text is a link so you should use css-syntax for styling links:
a#logo:link { color: #fff; } /* a Link that has not been clicked yet */
a#logo:visited { color: #fff; } /* a link that has been clicked before */
a#logo:hover { color: #ff0; } /* a link on hover/rollover */
a#logo:active { color: #ff0; } /* a link that is just clicked */
Just do something like:
Solutions 1 Find the logo hover css and change the color property value to whatever color you want
color: red!important; /* change the property value to the color you want */
Solution 2 Create another hover CSS and force a change as shown below, if the above doesn't work
#logo:hover {
color: red!important;
}
Note: Make sure the code above is at the very bottom of your css file. that way, it will override the previous hover property defined, even if it has important
Add this below the code for header#top #logo { ... } that your sample is showing in the CSS.
header#top #logo:hover
{
color:red;
}
I understand CSS basics, but I keep running into trouble with conflicting styles. Consider the following styles.
First, the default font color in my style sheets is black. I want that color applied to all picture captions - unless they're contained in divs with a class CoolL or CoolR...
.CoolL .Caption, .CoolR .Caption { color: #900; }
Now all the captions in the Cool series have brown text. But there are situations where I want the captions to have a black background with white text, so I created this rule:
.Black { background: #000; color: #fff; }
Now consider the following HTML. Class Caption by itself should have black text. However, this is inside a div with a class CoolR, so it displays brown text instead. But I added the class Black to the last div, which should change the background to black and the text color to white...
<div class="CoolR Plus Max300">
<div class="Shadow2">
<img src="">
<div class="Caption Black">Text</div>
</div>
</div>
In fact, the background is displaying black, but the text color is still brown.
I get these problems all the time, and the only way I can fix them is to write long, detailed styles, like this...
.Black, .Caption .Black, .CoolR .Caption.Black, .EverythingElseThatCouldBeBlack .Black { background: #000; color: #fff; }
What am I missing? Thanks.
I think you are over complicating things. This will become a maintenance issue as you add more styles. I would define separate classes and keep things simple. It's also important to understand CSS specificity.
.caption {
color: #000;
}
.cool-caption {
color: #900;
}
.caption-with-background {
background-color: #000;
color: #fff;
}
You could try :
.Black { background: #000 !important; color: #fff !important; }
There are a few fixes, but as previously recommended you should mark all of the settings you want to override previous ones with !important. With that, your code would look like this:
.Black {
background: #000;
color: #fff;
}
Also, not sure if you asked this, but you can apply CSS to all components by using the *, like so:
* {
//blahblahblah
}
you are defining the first case with a descendant selector which overrides the second class, which is merely a class. every answer given already will work but are entirely unnecessary. just add this to your style sheet:
.CoolR1 .Black, .Black{ background: #000; color: #fff;}
/** you could also chain your classes for specificity power **/
.Black.Caption{color:#fff}
that should do it. you can read more about selectors here:
http://docs.webplatform.org/wiki/css/selectors
I think that generally a more specific rule overrides a more general one, thus the more specific '.CoolR .Caption' is overriding the more general .Black. You'll probably be able to override this with !important, but a better style might be to reduce the complexity of your rules:
.Cool .caption { color: #900; }
.Cool .caption.black { color: background: #000; color: #fff; }
And put .L and .R in separate classes
.Cool.L { . . . } /* For things specific to CoolL, but not CoolR */
.Cool.R { . . . } /* and vice-versa */
I'm attempting to use some media queries for a website I'm building. The problem I'm having however, is while the media query styles are actually being applied, they're being overridden. I can't for the life of me tell why because I'm using the same exact selectors. Can anyone point out something that I'm not seeing?
ORIGINAL CSS
#global-wrapper-outer > #global-wrapper-inner {
width: 85%;
height: 100%;
margin: 0 auto;
position: relative;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
background: #fff;
padding-bottom: 20px;
box-shadow: 0 4px 2px -2px gray;
}
MEDIA QUERY CSS
#media screen and (max-width:1024px) {
#global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
The second media query is working fine, where I set the nav to have a display of none. However, when I try to set the width of #global-wrapper-inner to 100% it doesn't apply. I can see the style being "applied" when I press F12 and select that element. However, the style itself is crossed out and not actually applied and it still has the original width of 85%.
The selectors in your original CSS have the same specificity as the selectors within your media queries (the first declarations are also targeting the same property - width) and because the media query rule set is being overridden I'm going to assume that it appears before the original rule set.
The second media query selector works because it's targeting a property that wasn't set in your original CSS, so specificity isn't relevant.
To have the first media query selector take precedence, prepend an ancestor element to it:
#media screen and (max-width:1024px) {
body #global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
You need to link the media query file (queries.css) later than the normal css file (style.css). That way the rules in the queries.css will override those in style.css.
I have been at least 2 hours trying to find the override CSS problem till I found that my line comments where wrong... And the second definition of CSS wasn't working:
So, don't be so stupid as I !:
/* LITTLE SCREENS */
#media screen and (max-width: 990px) {
... whatever ...
}
/* BIG SCREENS */
#media screen and (min-width: 990px) {
... whatever more ...
}
never use: Double bar as I did:
// This is not a comment in CSS!
/* This is a comment in CSS! */
Here is the answer. (at least what worked for me)
I've had this problem before, and it took me a while to realize what I did, but once I figured it out it's actually pretty easy.
Ok so imagine I have this as the html
<main>
<div class = "child1"> </div>
<div class = "child2"> </div>
</main>
and then this as the CSS
main .child1{
height: 50px;
}
/* now let's try to use media quaries */
#media only screen and (max-width: 768px) {
.child1{
width: 75%;
}
}
The code above won't affect the .child. Just like someone mentioned above, the main .child1 overrides .child1. So the way you make it work is to select the element just like we did at the very beginning of the CSS above.
/* this will work */
#media only screen and (max-width: 768px) {
main .child1{
width: 75%;
}
}
So as a conclusion... select the elements the same way every time.
Meaning ... for example in the above code, in your CSS, you should either select it as main .child1throughout the whole CSS or .child1 or else they get mixed up, one ends up overriding the other.
From the code you submitted, this probably won't resolve your issue. However, in your CSS if you are nesting styles inside of one another:
.main-container {
.main {
background: blue;
}
}
A media query for .main won't work because of the nesting. Take .main out of .main-container and then the media query will work as assumed:
.main-container {
}
.main {
background: blue;
}
Check if your media query braces are equal.
Sometimes it is very subtle but when you miss a single brace the rest of the media queries mentioned for certain break points will not work
example:
#media(min-width: 768px) and (max-width: 991px){
#media (max-width: 767px){
.navbar-brand p {
font-size: .6em;
margin-top: 12px;}
.navbar-brand img {height: 20px;}
#collapsable-nav a {
font-size: 1.2em;
}
#collapsable-nav a span {
font-size: 1.2em;}
}
Here you can see i have started the braces for max-width:991px but forgot to end so the next set of codes in media query for max-width:767px will not work.
It is a very simple mistake but took hours because of lot of braces in the codes.
Hope it helps. Happy Coding!
What about using !important? If you range your media query from ( min-width: 176px ) and ( max-width: 736px ) or even up to 980px?
There can be some reasons because of which this type of error may occur.
I myself faced this issue where I was not able to understand what I am needed to do and was confused that, does media query just overrides the elements.
Here's what I understood:
MEDIA QUERY CSS:
#media screen and (max-width:1024px) {
#global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
here you were able to override #global-wrapper-inner > nav i.e., 2nd media query selector, by display: none;
because you never added the display line in the original css, because of which there was nothing to override you just have given that display type should be none.
Whereas just in the 1st media query selector you already had given width:80%;
Basically media query doesn't override as far as I have understood but it take precedence, like already explained by one of them
by which media query comes to work:
https://stackoverflow.com/a/19038303/15394464
also if still did not get your doubt clear, https://www.youtube.com/watch?v=acqN6atXVAE&t=288s
then this might help.
Hi I'm using wordpress and i am using the gallery shortcode, but the problem is that my images have borders around them.
I set the padding to 0 and i set the border to 0 in css but my thumbnails still have borders around them.
Here is the css ---> https://gist.github.com/mihadaiko/5011743#file-style-css
and here is what it looks like:
you need to use css
img { border: none; }
Try this
a img { border: 0 none; }
Also added your code in jsfiddle here: http://jsfiddle.net/HkTDK/2/ and there are no borders on images, so it might be inherited from somewhere else.
Another solution would be to add:
#gallery-1 a, #gallery-1 img { border:0 none !important; }
If this doesn't work, it means that border is a background image, so just add background: none !important too to the above line
Thanks a lot!
works perfectly for Wordpress if you are using Elementor.
If you are using several galleries (1,2,...,n) u need to add to your Custom CSS:
#gallery-1 a, #gallery-1 img { border:0 none !important; }
#gallery-2 a, #gallery-2 img { border:0 none !important; }
...
#gallery-n a, #gallery-n img { border:0 none !important; }
and so on.