CSS响应式段落设置问题：移动端样式未生效

Hey there! I totally get how frustrating it is when your responsive styles don't kick in—let's break down the most likely issues and fix this together.

Common Causes & Fixes #

1. You're Missing a Media Query (The Most Likely Culprit) #

Mobile/tablet styles won't activate automatically unless you wrap them in a media query that targets smaller screen sizes. If you just added the mobile CSS without this, it's either being ignored or conflicting with your desktop styles.

Here's how to wrap your mobile rules properly (adjust the max-width to match your desired breakpoint—768px is a common tablet/mobile cutoff):

/* Desktop/global styles first */
#aeromexico p {
  float: left;
  position: fixed;
  text-align: left;
  max-width: 25%;
  padding: 0;
  display: inline-block;
}

/* Mobile/tablet styles (wrap in media query) */
@media (max-width: 768px) {
  #aeromexico .col-sm p {
    position: static; /* Override desktop's fixed positioning */
    object-position: top;
    text-align: left;
    max-width: 100%;
    display: block;
    padding-bottom: 60px;
    float: none; /* Cancel out desktop's float */
  }
}

2. CSS Specificity or Order Issues #

Even if you have a media query, if your mobile selector isn't specific enough, or if you placed it before your desktop styles, it'll get overridden.

• Order matters: Always put your media query styles after your global/desktop styles. CSS reads code top-to-bottom, so later styles take precedence.
• Check specificity: Your desktop selector #aeromexico p has a specificity score of 101 (100 for the ID + 1 for the element). Your mobile selector #aeromexico .col-sm p has a score of 111 (100 + 10 for the class + 1), which is higher—so it should override the desktop styles if the media query is triggered. If it's still not working, use the browser's dev tools (F12) to inspect the element and see which styles are being applied (look for strikethrough text, which means a style is being overridden).

3. Selector Mismatch #

Double-check your HTML structure to make sure the mobile selector actually matches your elements:

• Desktop: Is your paragraph directly inside #aeromexico? Like <div id="aeromexico"><p>...</p></div>?
• Mobile: Does that paragraph get wrapped in a .col-sm container on smaller screens? Like <div id="aeromexico"><div class="col-sm"><p>...</p></div></div>?

If the .col-sm class isn't present on the parent of the <p> in mobile view, your selector won't target anything.

4. Unoverridden Desktop Properties #

Your desktop style uses position: fixed and float: left—these can mess with your mobile layout even if you set display: block. Make sure to explicitly override these in your mobile styles (like adding position: static and float: none as I did in the code example above).

Quick Debugging Tip #

Open your browser's dev tools (F12), switch to mobile view, and inspect the <p> element. Look at the "Styles" tab to:

• See if your mobile media query styles are even showing up (if not, your breakpoint is wrong or the media query is miswritten)
• Check if any styles are crossed out (this means they're being overridden by a more specific selector)

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