Responsive page using Media Querry and Mobile First techniques

Community feedback

• 

  P

  Huy Phan•3,420

  @huyphan2210Posted 2 months ago

  Hi, @MatheusPolletti

  I've seen your solution and your questions. I'd like to share my thoughts:

  1. Ensuring the Body Fills the Viewport

  To ensure a consistent layout and proper centering of elements, make sure the body always fills the entire viewport. The viewport is the visible area of a web page in the browser, and using min-height: 100vh ensures that the body occupies at least the full height of the browser window, regardless of the content size. Here's an example:

  body {
    min-height: 100vh; /* Ensures the body spans the full height of the viewport */
  }
  

  This approach is particularly useful for creating layouts where you want elements to stay centered or when building sections that need to stretch fully across the screen.

  2. Familiarizing Yourself with Browser DevTools

  If you haven’t already, I strongly recommend getting comfortable with Browser DevTools. These tools are indispensable for front-end development. They allow you to:

  • Inspect and debug your HTML and CSS.
  • Identify and resolve layout issues quickly.
  • Experiment with styles and test changes in real time.

  DevTools can also help you better understand how your CSS rules are applied, especially when troubleshooting issues like specificity or inheritance.

  3. Tips for Responsive Design

  To further improve responsiveness, consider leveraging modern CSS functions like clamp(), min(), max(), and calc(). These functions, when combined with relative units such as rem, em, %, vw, and vh, help create fluid layouts that adapt seamlessly to different screen sizes.

  For example:

  h1 {
    font-size: clamp(1.5rem, 2vw, 3rem); /* Adjusts font size based on viewport width */
  }
  

  Integrating them alongside properties like min-height or max-width can make your design even more flexible and adaptable.

  Hope this helps!

  Marked as helpful

  0