如何利用@media CSS实现小屏幕分辨率下Jackpot组件区块的下移布局

Got it, let's sort out this layout issue for small screens. The root problem is that your parent container .flex-c keeps the two jackpot widgets side-by-side even when there's not enough space, leading to overlapping content and broken formatting. Here's a step-by-step solution to make them stack vertically properly:

1. Adjust the Parent Flex Container #

First, ensure your .flex-c container is set up to handle responsive layout. Add this base style if it's not already present:

.flex-c {
  display: flex;
  gap: 1rem; /* Adds spacing between widgets */
  flex-wrap: wrap; /* Falls back to wrapping if needed */
}

2. Override Styles for Small Screens #

Modify your existing media queries (or update the existing breakpoint) to force vertical stacking and fix widget sizing. Here's the updated CSS for screens narrower than 1365px:

@media (max-width: 1365px) {
  /* Stack widgets vertically */
  .flex-c {
    flex-direction: column;
    align-items: center; /* Optional: centers widgets on screen */
  }

  /* Make widgets full-width and height-auto for small screens */
  .widget_luck, .widget_last_game {
    height: auto; /* Lets content dictate height instead of fixed 88px */
    padding: 18px 20px; /* Restore original padding for better spacing */
    width: 100%;
    max-width: 320px; /* Optional: limits widget width on larger small screens */
  }

  /* Move the chance button back to the bottom of the widget */
  .widget_luck .widget__chance, .widget_last_game .widget__chance {
    position: static; /* Cancel absolute positioning */
    display: block;
    width: 100%;
    height: 34px;
    margin-top: 11px;
    font-size: 12px;
    line-height: 34px;
    padding: 0;
    border-radius: 7px;
  }

  /* Keep your existing small-screen text adjustments */
  .widget_luck .widget__title, .widget_last_game .widget__title {
    font-size: 12px;
  }

  .widget_luck .widget__title .icon, .widget_last_game .widget__title .icon {
    top: 1px;
    font-size: 12px;
    margin-right: 5px;
  }

  .widget_luck .widget__main, .widget_last_game .widget__main {
    margin-top: 10px;
  }
}

Why This Works: #

• Vertical Stacking: Setting flex-direction: column on .flex-c forces the two widgets to stack top-to-bottom instead of side-by-side when screen space is limited.
• Auto Height: Changing height: auto ensures all widget content (avatar, username, bank amount, and chance button) fits without being cut off.
• Reset Chance Button: Removing position: absolute puts the chance button back in its natural place at the bottom of the widget, eliminating overlap with the title.
• Full-Width Widgets: width: 100% makes widgets use the available screen width, improving readability on mobile devices.

If your changes weren't taking effect before, it's likely due to CSS specificity—make sure this media query appears after your existing widget styles in your CSS file so it overrides the older rules.

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