Hey there! Let's dig into why your <main> element isn't hiding on mobile even though you've set display: none in your SASS code. Here are the most common fixes to try:

1. Check CSS Specificity (Most Likely Culprit) #

Chances are, another CSS rule with higher specificity is overriding your display: none declaration. For example, if somewhere else in your code you have something like .page-container main or header + main, those selectors are more specific than just main, so they'll take precedence.

Fix: Boost the specificity of your mobile style to outrank conflicting rules. Try updating your selectors like this:

// More specific selector to ensure mobile style takes priority
body > main {
  display: none;
}

@media(min-width: $mobile-breakpoint) {
  body > main {
    height: 800px;
    display: flex;
    background-color: inherit;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-image: url("./images/main.jpg");
  }
}

(Avoid using !important unless absolutely necessary—it makes future debugging harder.)

2. Verify Your Breakpoint Variable #

Double-check what value you've assigned to $mobile-breakpoint. Your current code says "apply flex styling when the viewport is at least $mobile-breakpoint wide". If $mobile-breakpoint is set to a small value (like 320px), that means the flex style will apply to almost all devices—including mobile—effectively overriding your display: none.

Fix: Make sure $mobile-breakpoint is set to the minimum width of your desktop/tablet view. For example:

// Typical breakpoint for mobile-first design (desktop starts at 768px)
$mobile-breakpoint: 768px;

If you actually want the flex style to apply below a certain width, switch to max-width instead:

@media(max-width: $mobile-breakpoint) {
  // Mobile styles here
}

3. Check for Inline Styles #

If your <main> element has an inline style attribute (like <main style="display: block;">), that will completely override your external CSS. Inline styles have the highest specificity by default.

Fix: Remove any inline styles from the <main> tag, or adjust your CSS selector to target it more specifically (though removing inline styles is the cleaner approach).

4. Clear Mobile Browser Cache #

Mobile browsers love to cache CSS files to save data. If you've recently updated your code but aren't seeing changes, the old cached CSS might be loading instead.

Fix: Clear your mobile browser's cache, or add a version query string to your CSS file reference (e.g., <link rel="stylesheet" href="styles.css?v=2">) to force a fresh load.

内容的提问来源于stack exchange，提问作者John Bra