mobile first landing % html/css/js

Community feedback

• 

  Josh Javier•830

  @joshjavierPosted over 1 year ago

  Hello @mandriva19!

  First off, the layout looks really great on mobile. But when I switch to my desktop (I have a 1920x1200 monitor) there are white gaps on the side as shown here: https://ibb.co/J5ymzh9

  In this particular case, you can easily fix this by removing the max-width rules in your main wrapper. But usually, the common pattern is to have a .wrapper div inside each of the sections whose sole responsibility is to center the content and limit its width. The background rules will stay on the parent tags unaffected by the wrapper, so the background can stretch to either side of the page. I used this pattern in my Workit landing page solution if you need a reference. :)

  Nice job on making your code well-structured and very readable. One CSS tip I recommend is using logical properties to make your code more DRY. For example:

  padding-top: var(--spacing-20);
  padding-bottom: var(--spacing-20);
  /*↓*/
  padding-block: var(--spacing-20);
  
  /* Also works for margins! */
  margin-left: auto;
  margin-right: auto;
  /*↓*/
  margin-inline: auto;
  

  Hope that helps, happy coding!

  Marked as helpful

  1

  ---

  

  Mandriva 19•330

  @mandriva19Posted over 1 year ago

  @joshjavier hello.

  thanks for taking time for writing a feedback. Yes, I made general 1440px container later in the project and wrapped up the whole html content in it. didn't really think through the workaround regarding background issues on larger screens.

  as for the logical properties I started casually using inline/block selectors for spacings in later projects but it seems there is so much more to it!

  it was very helpful! ~best wishes

  1