La fonction de suggestion automatique permet d'affiner rapidement votre recherche en suggérant des correspondances possibles au fur et à mesure de la frappe.
janv. 10, 20197:31 AM - modifié janv. 10, 201911:41 AM
Contributeur de premier rang
Page not picking up stylesheet rules
Résolue
I am working on this page. A lot of my CSS is not being executed.
An example of some rules not being applied are the two images at the top. There is only supposed to be one image. With the CSS hiding a module depending on what device the user is on. The two classes for both of these images are:
desktop-hide and mobile-hide
I'm not sure why the code isn't pulling through. I have had a number of issues with this pages and pages like it that use the same base stylesheets.
I took a look at this for you. Using the Search panel in Chrome's dev tools, I see that you have a rule at the bottom of your Features_page_-_Parent_Site.css stylesheet that looks like this:
Pulling up the style rules for the .desktop-hide element when the viewport is wider than 480px, I don't see that display declaration being applied, like you said. Here's a screenshot of that:
But we know it's there in the stylesheet that the browser loaded. So since we know that the code is there, it's a question of figuring out why it's not being applied (as opposed to why it's not present in the first place). Often times a syntax error will prevent declarations from being applied. So my first thought is togive that specific rule a quick glance to see if there are syntax errors. And I do see two errors. The first is that you're querying for screen and also viewport width, but you're missing the "and" keyword. It should read "@media only screen and ()" . The second syntax error here is in the width query. You're missing a semicolon between "min-width" and "481px". So in total this @media rule should look like:
@media only screen and (min-width: 481px) {
.desktop-hide {
display: none;
}
}
Additionally, a few lines above this there's another syntax error. You have code like this:
...for making it clear which section this is. But the equal signs are outside of code comments. This is preventing the rest of these rules from being applied as well. You could instead do something like:
And that will allow the browser to parse the rest of your CSS correctly. After making these changes, if we again look back at the .desktop-hide element and look at the style rules, we should see them pulling through, like so:
In ^this case the display declaration isn't the computed value because the selector in this rule isn't specific enough. Something like .body-container-wrapper .desktop-hide would do the trick. I hope this helps. Let me know if there are other declarations not applying or if you have questions about any of the above or how I was able to troubleshoot it.
I took a look at this for you. Using the Search panel in Chrome's dev tools, I see that you have a rule at the bottom of your Features_page_-_Parent_Site.css stylesheet that looks like this:
Pulling up the style rules for the .desktop-hide element when the viewport is wider than 480px, I don't see that display declaration being applied, like you said. Here's a screenshot of that:
But we know it's there in the stylesheet that the browser loaded. So since we know that the code is there, it's a question of figuring out why it's not being applied (as opposed to why it's not present in the first place). Often times a syntax error will prevent declarations from being applied. So my first thought is togive that specific rule a quick glance to see if there are syntax errors. And I do see two errors. The first is that you're querying for screen and also viewport width, but you're missing the "and" keyword. It should read "@media only screen and ()" . The second syntax error here is in the width query. You're missing a semicolon between "min-width" and "481px". So in total this @media rule should look like:
@media only screen and (min-width: 481px) {
.desktop-hide {
display: none;
}
}
Additionally, a few lines above this there's another syntax error. You have code like this:
...for making it clear which section this is. But the equal signs are outside of code comments. This is preventing the rest of these rules from being applied as well. You could instead do something like:
And that will allow the browser to parse the rest of your CSS correctly. After making these changes, if we again look back at the .desktop-hide element and look at the style rules, we should see them pulling through, like so:
In ^this case the display declaration isn't the computed value because the selector in this rule isn't specific enough. Something like .body-container-wrapper .desktop-hide would do the trick. I hope this helps. Let me know if there are other declarations not applying or if you have questions about any of the above or how I was able to troubleshoot it.