Responsive Landing page using HTML, CSS

Community feedback

• 

  Aakash Verma•9,520

  @skyv26Posted about 2 months ago

  Hi @FutureCiso, 👋

  I reviewed your code and noticed a lot of great improvements! You've made good strides with your design, and with a few tweaks, it can be even better. Here's my detailed feedback and suggestions:

  ---

  1. Centering the Card Design

  To simplify and enhance the centering of your card, use the following CSS snippet:

  html, body {
      display: grid;
      width: 100vw;
      place-content: center;
      height: 100vh;
      background-color: var(--bg-color);
  }
  

  This approach is cleaner and avoids unnecessary complexity. 🌟

  ---

  2. Avoid Fixed Width/Height

  In your .main-page and .container styles, avoid using fixed dimensions like width and height. Instead, let the child elements dictate the size for better responsiveness. Replace the commented-out properties with these improvements:

  .main-page {
      background-color: var(--bg-color);
  }
  
  .container {
      max-width: 320px;
      background-color: var(--container-color);
      border-radius: 15px;
      padding: 1rem;
  }
  

  Benefits:

  • Increased design flexibility.
  • No need for media queries to handle responsiveness. 🎯

  ---

  3. Use Consistent Units

  Replace percentages (%) or viewport dimensions (vw, vh) with rem or em for better scalability and maintainability. Also, use max-width instead of width to reduce code overhead and improve adaptability.

  ---

  4. Remove Redundant Media Queries

  The media query code between lines 69-94 can be safely removed as the suggested max-width approach eliminates the need for them. Less code = easier maintenance! ✂️

  ---

  5. Let Images Be Flexible

  Allow the image to adjust dynamically with the container. Update your .img-contain style like this:

  .container > .img-contain {
      width: 100%;
      border-radius: 15px;
  }
  

  This ensures the image adapts to different screen sizes without breaking the layout. 🌐

  ---

  6. Avoid Misuse of position: absolute

  While absolute positioning has its uses, it was applied incorrectly here. Focus on using it only when truly necessary, and ensure it's balanced with parent context styles to avoid layout issues.

  ---

  You've done an amazing job so far! With these adjustments, your design will be more robust, responsive, and scalable. Keep up the great work, and feel free to reach out if you have any questions! 🙌

  Best regards,
  Aakash Verma

  0
• 

  Thapelo12345•90

  @Thapelo12345Posted about 2 months ago

  the design deos not look exactly like the original, the problem is the width one the original is a little bit wider.

  0

  ---

  

  MrUnik•30

  @FutureCisoPosted about 2 months ago

  @Thapelo12345 i think its happening because of my monitor size i cant fix it.

  0