Some CSS styles are not being applied in Firefox, Safari or Chrome

Question

I have a WordPress site and for some reason, some of my CSS styles does not being applied in any browser.

/* This rule is rendered in the browser */
.post-date,
.author {
  font-weight: bold;
}

/* This two rules doesn't render in the browser */
figure.alignright,
figure.aligncenter {
  text-align: center;
}

@media screen and (min-width: 500px) {
  figure.alignright {
    float: right;
    margin-left: 20px;
  }
}

<p class="post-date">Some published date</p>
<p class="author">Author</p>

<div class="wp-block-image">
  <figure class="alignright is-resized">
    <img src="someImgageURL" width="100" height="100">
  </figure>
<div>

For example I have the figure style which doesn't get applied.
And when I look in the Style Editor in Firefox or Inspector in Chrome I can't find the style. It's like it doesn't exists, and I can't figure out why.

You should also post a snippet of the HTML. It will help debug — Clyde Lobo, Sep 03 '19 at 13:43
Always post HTML to CSS to better help us understanding your problem. — cloned, Sep 03 '19 at 13:47
there is no `post-date` or `author` in your html, so you can't see them in your browser. — cloned, Sep 03 '19 at 13:58
@cloned I just wanted to show that some styles do get rendered to the browser and some styles doesn't. I can add the HTML for that part, but it won't add anything as to why some styles aren't rendered to the browser. — hbrovell, Sep 03 '19 at 14:07

score 0 · Answer 1 · answered Sep 03 '19 at 14:28

0

You are using this:

@media screen and (min-width: 500px) {
  figure.alignright {
    float: right;
    margin-left: 20px;
  }
}

It's mean browser has min-width 500px will run this css, so this css is overide your code above.

You should use

@media only screen and (max-width: 500px) {
  figure.alignright {
    float: right;
    margin-left: 20px;
  }
}

answered Sep 03 '19 at 14:28

vnsharetech Phong Nguyen

91
6

The media query is correctly, and that's not why the css styles isn't rendered to the browser. – hbrovell Sep 03 '19 at 14:31
So you should update your browser, maybe your browser doesn't understand html5 – vnsharetech Phong Nguyen Sep 03 '19 at 14:35
BTW, did you inspect element and check the css appear? – vnsharetech Phong Nguyen Sep 03 '19 at 14:36
The CSS file appear, it gets a 200 response. It is just these styles that doesn't show up anywhere in the browser. – hbrovell Sep 03 '19 at 14:40

score 0 · Answer 2 · answered Sep 03 '19 at 14:31

0

Most browsers cache websites and their style-sheets, images and so on to safe bandwith.
This means you will have to force your browser to update the css file, which you can do by manually deleting the cache, or to disable caching completely!

answered Sep 03 '19 at 14:31

itzFlubby

2,269
1
9
31

I have deleted the cache memory multiple times and restarted the browser. It has no effect. – hbrovell Sep 03 '19 at 14:33
If you have the possibilty to use chrome, enter "view-source:" and check if it is any different from the css-source-file. If it is, reload that page, if it's still different, then the problem does not have anything to do with the browser, but with the server not delivering the new css-file instead. – itzFlubby Sep 03 '19 at 14:35
The url is correct, and the styles are in the CSS when I check the file on the server and in the Wordpress. But when I check the CSS in the browser these styles doesn't exists. – hbrovell Sep 03 '19 at 14:39
Ok, this is good! It narrows down what is wrong! So the problem is not related with updating the css file or anything like that, this means that the problem occurs somewhere in the interpreting process of the file... check if your browser supports everything in your css file. This site will help: https://www.w3schools.com/css/ – itzFlubby Sep 03 '19 at 14:43
Well I think it should, I use CSS-grid and that works like a charm. So older styles than that shouldn't be a problem. – hbrovell Sep 03 '19 at 15:00
You're trying to center an image right? `text-align`won't work in that case, as explained here: https://stackoverflow.com/questions/7055393/center-image-using-text-align-center – itzFlubby Sep 03 '19 at 15:18
Yes I know, but I'm not centering the ``````tag. I'm centering the block container of the image, and therefore it should work with ```text-align:center;```. – hbrovell Sep 03 '19 at 16:05

score 0 · Answer 3 · answered Sep 03 '19 at 15:24

Maybe you have some CSS syntax error before the line. (maybe extra bracket opened or something else) I read all the comments you wrote and came to this conclusion. You can test it with the below method. Please remove all the CSS code in the CSS file and just leave the CSS section you want to test. If it works then review the CSS code you just removed and check the typo. Hope this helps you. Thanks

score 0 · Answer 4 · answered Sep 03 '19 at 16:35

0

I finally found out what the problem was. It was Wordpress own caching of the stylesheet that gave the problem. After clearing the Wordpress cache, everything is working as expected.

answered Sep 03 '19 at 16:35

hbrovell

547
6
17

Some CSS styles are not being applied in Firefox, Safari or Chrome

4 Answers4