Base apparel coming soon page

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Barney, good questions you got there! I'll try to answer them here:

  1. I think either option you mentioned is fine; I've done all three, though I've done it less for grid. Some people like to add grid or flexbox right away when they anticipate they'll need it at their breakpoint, even if they might not use it at the start. It mainly depends on the mobile layout, but in my experience most mobile-first layouts start as stacked blocks anyways that are pushed to the top instead of centered vertically, and for that, even the default block settings are fine. For this challenge, I also went mobile-first and used flexbox, but as an experiment just now, I removed it and added it only to my media query, and there was really no difference.

  2. In the desktop design, since I'm using grid, I chose to use fr units in my columns. I also used a container for the left side, and for that I used width: min(), where I had two values for the browser to choose from, one in percentage and one in pixels.

  3. For my button, I also used position: absolute, and I think as long as the appropriate reference container (i.e., the container with position: relative) and appropriate reference point is used, it should be OK. In your code, what I'd suggest is to add position:relative to sub__input (since it's the parent container) and then this in the CSS:

     .sub__input {
        position: relative;
        padding-inline: 2rem;
        // remove margin-left
        // rest of your code
      }
      button {
        position: absolute;
        right: 2rem;
        height: 100%;
        // rest of your code
     }
     

  4. One thing I did differently is, I use a container in the header, main, and footer that wraps around all the content; its purpose is to ensure everything has the same width and that things don't grow past a certain width. That's something you can try so that you don't need to add side padding/margin to the elements individually. Also, for your hero image right now, I would make it so that it spans across the screen in mobile view instead of being centered with space around it. Try adding object-fit: cover so that the image is allowed to be cropped; this would also give you more flexibility in resizing the container of the image. Lastly, for good practice, I'd add some more reset/normalize rules in your CSS, especially margin: 0 and padding: 0 to your star selector rules, and the max-width: 100% to all img selectors.

  Hope this helps a bit, and great job on the whole!

  Marked as helpful

  1