Page not picking up stylesheet rules

SOLVE
Top Contributor

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.


Any help/advice will be greatly appreciated.

 

Many thanks,

Jamila

CSS
Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
HubSpot Moderator

Hi Jamila,

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:

 

@media only screen (min-width 481px) {
    .desktop-hide {
    display: none;
  }
  
}

 

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:

 

Screen Shot 2019-01-10 at 5.34.04 PM.png

 

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:

 

============================
/* Mobile-first styles */
============================

 

...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:

 

/*
============================
Mobile-first styles 
============================
*/

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:

 

Screen Shot 2019-01-10 at 6.00.07 PM.png

 

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.

2 Replies
HubSpot Moderator

Hi Jamila,

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:

 

@media only screen (min-width 481px) {
    .desktop-hide {
    display: none;
  }
  
}

 

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:

 

Screen Shot 2019-01-10 at 5.34.04 PM.png

 

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:

 

============================
/* Mobile-first styles */
============================

 

...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:

 

/*
============================
Mobile-first styles 
============================
*/

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:

 

Screen Shot 2019-01-10 at 6.00.07 PM.png

 

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.

Top Contributor

Thank you for your help with this! Your advice worked perfectly and has solved a few issues I have been having on a few other stylesheets Smiley Happy

@lscanlan

Reply
0 Upvotes