Responsive Landing Page with React

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! 👋