How Do You Fix Strange CSS Bugs or CSS Media Query Bugs?

Amazon When I was working on the next generation homepage at http://michael.chtoen.com/ using the Bootstrap framework, things started out great. I did not change the original CSS styles that come with the framework, specifically the offcanvas template. Instead I tried to override the styles to accommodate my needs. In the process I ran into the following strange layout-related or CSS-related problems. Read on to see what they are and how I solved them.

Problem #1

I added the following CSS 3 media query styles in the external style sheet so that the container's width adjusts based on the width of the browser's viewport.

@media (min-width: 0) {
  .row2 {
    width: 250px;
    margin: 0 auto;
  }
}
@media (min-width: 500px) {
  .row2 {
    width: 500px;
    margin: 0 auto;
  }
}
@media (min-width: 750px) {
  .row2 {
    width: 750px;
    margin: 0 auto;
  }
}

Then I realized that the media query style was correctly applied to my website when the browser's viewport is above 500px wide. However, when the browser's width is below 500px, the first media query did not get executed, meaning the width of ".row" did not become 250px as mandated by the first media query!

Why?

Solution

It turns out that I had an extra curly bracket somewhere in the external CSS style sheet. Once I removed it everything was working as expected.

This is bad because CSS is not a compiled language like Java. When your CSS is broken you cannot reliably tell. Therefore you should always use a CSS validator on the Internet to help you validate the syntax of your CSS, if such strange layout problems or issues occur on your website.

Let's look at another problem I've encountered.

Problem #2

In the very beginning of my external CSS file I added a comment so that the beginning looks like this:

/*
 * edit styles following /* my own styles to customize offcanvas */
 * do NOT edit other styles cuz they come from offcanvas template from Bootstrap framework
 */
html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
  padding-top: 70px;
}
...

Obviously I didn't get any CSS warnings because there are no such things. My website was rendered beautifully except that the horizontal bar always exists on my smartphone! The offcanvas template promises that the template would prevent scroll on narrow devices. Why is it happening?

Solution

The problem is there is an error in my CSS comment. You cannot have nested comments! This error somehow disables the first CSS style which prevents scroll on narrow devices. I simply changed the comment to the following to fix the problem:

/*
 * edit styles following "my own styles to customize offcanvas"
 * do NOT edit other styles cuz they come from offcanvas template from Bootstrap framework
 */
html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
  padding-top: 70px;
}
...

The problem goes away!

The bottom line is make sure your CSS is fully validated and well-formed. Each CSS block has correct curly brackets. Every CSS block must be well-formed. The CSS syntax must be correct.

If you have any questions let me know and I will do my best to help you!