Responsive meet landing page

Community feedback

• 

  P

  Gilbert•360

  @juliengDevPosted 4 months ago

  Hey there @carstenkoerner! 👋 Here are some suggestions to help improve your code:

  Best Practices for Resetting Your CSS Code:

  • Reset Margins and Padding:

    * {
      margin: 0;
      padding: 0;
    }
    

  • Consistent Box-Sizing Model:

    *,
    *::before,
    *::after {
      box-sizing: inherit;
    }
    

    By setting box-sizing: inherit; for all elements and pseudo-elements, the box model remains consistent throughout the document. Then, setting box-sizing: border-box; on html ensures that all widths and heights include borders and padding, simplifying the calculation of element dimensions.

  • Set Base Font Size:

    html {
      box-sizing: border-box;
      font-size: 62.5%;
    }
    

    Setting the base font size to 62.5% on html makes text size calculations easier. Since 62.5% of the default 16px font size equals 10px, 1rem equals 10px, simplifying conversions between relative (rem) and absolute (px) units. For example, 1.6rem equals 16px, which is more intuitive than working with text sizes based on a default 16px base size.

  • Ensure Full Viewport Height:

    body {
      min-height: 100vh;
    }
    

    By setting min-height: 100vh;, the body of the document covers at least the viewport height, which is especially useful for "hero" layouts or ensuring the footer remains at the bottom of the page.

  Additional Suggestions:

  • Font Size Adaptability: Consider using the clamp() function for more adaptive font sizes. It allows you to set a range of acceptable font sizes based on viewport dimensions, ensuring better readability across devices.

  • Image Positioning in Header: You mentioned struggling with image positioning in the header. I used absolute positioning with negative left and right values. You can refer to my code for a detailed implementation of this solution.

  <Happy Coding/>! 👾

  0