Responsive Landing Page with React

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted over 3 years ago

  Hi @partum - as you noted, there' still some issues with the responsiveness of your page, but in response to your question, there a few different approaches that you can use to manage layouts on large screens.

  I have been using the following code on the body of all my projects and found it to work well:

  .center-content {
    display: grid;
    grid-template-rows: min-content;
    grid-template-columns: minmax(1rem, 1fr) minmax(0, 1440px) minmax(1rem, 1fr);
  }
  .center-content > * {
    grid-column: 2;
  }
  

  The 1440px is the max-width you want the main content to be, and the 1rem values is the smallest spacing you want either side of the main content on small screens – I sometimes put this to 0 and use a container to add padding to each section.

  If you do want a section to span the full width, for example, maybe a footer, you can set the grid-column to 1 / -1 and it will span all three columns. And if you want nested sections to breakout there are ways you can do that too.

  Hope this helps! 👋

  1

  ---

  

  Julia•110

  @partumPosted over 3 years ago

  @dwhenson That's a really interesting approach. Thanks for sharing.

  0