个人作品集响应式模式下容器位置固定问题技术咨询

Hey Martin, let's get that container shifting issue sorted out so your portfolio looks polished across all screen sizes! Based on the CSS you shared and the problem description, here are targeted fixes to keep your containers stable in responsive mode:

1. Optimize the Global Container Styling #

Your current .container setup is close, but adding a few tweaks will prevent it from shifting when the viewport narrows:

.container {
  max-width: 1140px;
  margin: 0 auto; /* Explicitly set top/bottom margin to 0, left/right to auto for consistent centering */
  padding: 0 15px; /* Add horizontal padding to prevent content from touching screen edges on small devices */
  width: 100%; /* Ensure the container takes full available width without overflowing */
}

This ensures the container stays centered and constrained within the viewport, no matter how small the screen gets.

2. Adjust Flex Layout Behavior for Small Screens #

Your .content class uses justify-content: space-between, which can cause elements to shift or spread awkwardly on narrow screens. Add a media query to tweak this behavior:

@media (max-width: 768px) {
  .content {
    justify-content: center; /* Switch to centered alignment instead of space-between */
    flex-direction: column; /* Stack elements vertically for better mobile readability */
    align-items: center; /* Center-align items horizontally in the column layout */
  }
}

This will prevent unexpected horizontal shifting as the screen scales down, keeping your content static and organized.

3. Double-Check for Fixed-Width Elements #

Make sure none of your child elements (like cards, images, or text blocks) have hard-coded width values (e.g., width: 1000px). Replace any fixed widths with max-width: 100% to let them adapt to the container's size without overflowing. Your existing img styling (max-width: 100%) is already spot-on for this!

4. Verify Overflow Handling #

Your body has overflow-x: hidden, which is good for preventing horizontal scrollbars, but ensure no nested elements are pushing beyond the viewport. If you still see shifting, inspect elements in your browser's dev tools (F12) to check for any unintended margins/paddings on child containers.

These changes should keep your containers stable and aligned across all responsive views while maintaining the clean layout you've built.

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