news-homepage

Community feedback

• 

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge!

  I have some suggestions about your code that might interest you.

  • You could create a container to limit the max-width of the content to let’s say 1140px

    <header>
    	<div class="container">
    		... header content ...
    	</div>
    </header>
    
    <main>
    	<div class="container">
    		... main content ...
    	</div>
    </main>
    

    You have a .main-container class that you could modify in order to use it in both scenarios:

    .container {
    	width: 100%;
    	max-width: 480px;
    	padding-left: 16px;
    	padding-right: 16px;
    	margin: 0 auto;
    }
    
    @media (min-width: 1280px) {
      .container {
    		max-width: 1140px;
    	}
    }
    

    And inside this .container you could use an element for your grid layout. The paddings will prevent the content to touch the sides of the screen in smaller viewports.

  I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

  Happy coding!

  0