Need a Debugging Strategy

HTML & CSS
1

For reasons I cannot yet fathom, a style defining a grid in which my content should be displayed has quit working. I’ve checked the usual . . . <div> tags are properly placed and properly closed with </div>; spelling is correct, syntax is correct (passes validation test); href URL is correct (all other styles in that CSS file that should apply do apply as determined by DevTools inspection); HTML and CSS files are in the same folder; . . .

The problem must be more than I thought because even this Codepen isn’t reflecting my CSS. The .background class is selected but doesn’t appear. In fact this codepen doesn’t reflect any of my stying. By all indications, this should be a problem linking my CSS to the HTML, but I cannot see the problem. Of course, the codepen issue might be unrelated to the original issue, as well.
:roll_eyes:
I need suggestions for what to look for.

2

You didn’t close the media query with the extra bracket.

@media screen and (max-width: 600px) {
  .scrapbook-frame {
    display: block;
}

It should be:


@media screen and (max-width: 600px) {
  .scrapbook-frame {
    display: block;
  }
}

Without the bracket you have accidentally enclosed your whole site in a media query and the styles will only be seen on screens smaller than 600px.

The media query shouldn’t be at the top of the file either because it gets overwritten by the code below it. I have explained this in one of the other posts :wink: Keep your media queries after the base rules to which they refer.

2 Likes
3

The media query got misplaced in the shuffle to organize my CSS. It was at the bottom of the group of common elements that got put at the top of my CSS file.

I haven’t used the media query enough to embed it in my ancient brain. Maybe this incident will help me remember its proper placement in CSS files.

Thanks again for the help.

1 Like