Creating two row with grid!

Hello everyone! I would like to get some help with a problem that I have with grid. My content is pushed from the left side and for some reason I can't find a solution to have two rows in the middle.
<style jsx>{`
.recipe-list {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px 60px;
}
`}</style>
<style jsx>{`
.recipe-list {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px 60px;
}
`}</style>
The global.css
body {
background: #F4E640;
margin: 0;
font-family: 'Roboto';
font-size: 1.5em;
}
.layout {
min-height: 100vh;
display: flex;
flex-direction: column;
}
header {
text-align: center;
margin: 60px 0;
}
header a {
text-decoration: none;
color: black;
text-transform: uppercase;
display: inline-block;
}
header h1, header h2 {
margin: 0;
}
header span {
display: block;
line-height: 1em;
}
header span:first-child {
font-size: 1em;
font-weight: 400;
}
header span:last-child {
font-size: 1.5em;
font-weight: 800;
}
header h2 {
font-size: 1.2em;
font-weight: 400;
}
footer {
background: #111;
color: #bbb;
padding: 40px;
text-align: center;
margin-top: auto
}
.page-content {
max-width: 1200px;
margin: 20px auto 80px;
padding: 0 20px;
width: 100%;
box-sizing: border-box;
}
body {
background: #F4E640;
margin: 0;
font-family: 'Roboto';
font-size: 1.5em;
}
.layout {
min-height: 100vh;
display: flex;
flex-direction: column;
}
header {
text-align: center;
margin: 60px 0;
}
header a {
text-decoration: none;
color: black;
text-transform: uppercase;
display: inline-block;
}
header h1, header h2 {
margin: 0;
}
header span {
display: block;
line-height: 1em;
}
header span:first-child {
font-size: 1em;
font-weight: 400;
}
header span:last-child {
font-size: 1.5em;
font-weight: 800;
}
header h2 {
font-size: 1.2em;
font-weight: 400;
}
footer {
background: #111;
color: #bbb;
padding: 40px;
text-align: center;
margin-top: auto
}
.page-content {
max-width: 1200px;
margin: 20px auto 80px;
padding: 0 20px;
width: 100%;
box-sizing: border-box;
}
I think I have a problem with the .page-content
12 Replies
Mr.Sushi
Mr.Sushiβ€’16mo ago
I tried flexbox, same result 😦 I guess my eye can't see the problem πŸ˜„
Mannix
Mannixβ€’16mo ago
how big are those images ? you have max-width on your page-content maybe your images are bigger then that
Mr.Sushi
Mr.Sushiβ€’16mo ago
width="1000" height="667"
Mannix
Mannixβ€’16mo ago
what happens if you add img{width: 100%}; you have 2 images side by side that sum up to 2000 px and your page-content has max-width of 1200px which is lower so you get overflow
Mr.Sushi
Mr.Sushiβ€’16mo ago
I doesn't solv the problem
Mannix
Mannixβ€’16mo ago
well this is all i can't think of with the stuff you provided maybe i could do more if i could play with the code myself πŸ˜‰
Mr.Sushi
Mr.Sushiβ€’16mo ago
Thank you for the help! I will provide more info, I just have to do some work πŸ˜„
Mr.Sushi
Mr.Sushiβ€’16mo ago
https://github.com/MrSushi22/jam If it helps I have a repo for the project
GitHub
GitHub - MrSushi22/jam
Contribute to MrSushi22/jam development by creating an account on GitHub.
Mannix
Mannixβ€’16mo ago
well i tried running your code but got an error TypeError: Expected parameter accessToken i'm guessing it's from missing env file ?? so if you could recreate your page in codepen that would be great πŸ˜‰
Mr.Sushi
Mr.Sushiβ€’16mo ago
Never tried codepen, I hope I did it right: https://codepen.io/MrSushi22/pen/oNQmVEY
AndrΓ‘s NΓ©meth
CodePen
2023-08-03 (03-37-52 PM)
2023-08-03 (03-37-52 PM)...
Mannix
Mannixβ€’16mo ago
you have a fixed width set on the content below the image (the white box) of 1050px so this also cause overflow. try adding img{width: 100%}; again and remove that fixed width
Mr.Sushi
Mr.Sushiβ€’16mo ago
Thank you!'
Want results from more Discord servers?
Add your server