Kevin Powell - Community•11mo ago

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•11mo ago

I tried flexbox, same result 😦 I guess my eye can't see the problem 😄

Mannix•11mo ago

how big are those images ? you have max-width on your page-content maybe your images are bigger then that

Mr.Sushi•11mo ago

width="1000" height="667"

Mannix•11mo 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•11mo ago

I doesn't solv the problem

Mannix•11mo 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•11mo ago

Thank you for the help! I will provide more info, I just have to do some work 😄

Mr.Sushi•11mo 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•11mo 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•11mo 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•11mo 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•11mo ago

Thank you!'

Gaming

Programming

Creating two row with grid!