Click here to Skip to main content
15,742,477 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
So I'm working on a project and when I add in functional components to the

page they completely cover each other up. I try adding margin and using

all sorts of positioning but to no effect. The page does not produce enough

height for them either.

Are there any suggestions on how I could create explicit layouts using React, CSS or a CSS framework?

I'm aware of using the children props for the nav and footer but how could I do this for pages?

I'd be so grateful for any help!

What I have tried:

Using positioning, margin, and Grid
Updated 19-May-23 3:08am
Andre Oosthuizen 19-May-23 8:33am    
Please show us what you have in code form thus far, it will help us to identify your layout issues.
daniel wakeley 19-May-23 9:10am    
Hi thanks for replying here is a basic code example of how I've done things. The components that are in the product page are just stacked one on top of the other for some reason. Could this be cause I am
using Material UI? I can also send you a photo of how things look as well if that would help

1 solution

<pre>  <LayoutComponent>
          <Route path="/" element={<ProductPage />} />
          <Route path="/product" element={<CompositeCard />} />
          <Route path="/settings" element={<Settings />} />


<pre>function ProductPage() {
  return (
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900