Coder_Carl
Coder_Carl
PostsComments
KPCKevin Powell - Community
Created by JJ on 2/1/2024 in #front-end
Nav Bar
so these semantic elements create a landmark for assistive devices to access quickly if you have a nav then you are pretty safe here https://www.youtube.com/watch?v=YnzSkYWN7tE the header element is more of an introduction to someone using the page that the navigation for that section of the page will probably be here.You can have more than 1 header in a page
3 replies
KPCKevin Powell - Community
Created by RMON on 2/1/2024 in #front-end
Is there a correct way to copy these containers?
It wouldn't surprise me considering everything else that was shoved into their specs
73 replies
KPCKevin Powell - Community
Created by RMON on 2/1/2024 in #front-end
Is there a correct way to copy these containers?
I'm out picking something up now. But you have some basic solutions I believe you should be able to set the widths of the project boxes and have them either wrap with flex or auto flow in grid
73 replies
KPCKevin Powell - Community
Created by RMON on 2/1/2024 in #front-end
Is there a correct way to copy these containers?
Bishal a zindex requires the containing element to have a position other than static. I don't believe display grid will set up the context by itself
73 replies
KPCKevin Powell - Community
Created by RMON on 2/1/2024 in #front-end
Is there a correct way to copy these containers?
chances are the container is being constrained somehow, without seeing everything in the larger project it would be impssible to give more exacts
73 replies
KPCKevin Powell - Community
Created by RMON on 2/1/2024 in #front-end
Is there a correct way to copy these containers?
these are standalone examples as a quick fix. if you want anything more, youd need to give us something where it would be used as a whole rather than copy pastaing code when it definitely wont work in every case
73 replies
KPCKevin Powell - Community
Created by RMON on 2/1/2024 in #front-end
Is there a correct way to copy these containers?
yup.
73 replies
KPCKevin Powell - Community
Created by RMON on 2/1/2024 in #front-end
Is there a correct way to copy these containers?
you could 100% use grid here instead of flex. but you had flex in your original example code so I have gone with that for simplicity's sake
73 replies
KPCKevin Powell - Community
Created by RMON on 2/1/2024 in #front-end
Is there a correct way to copy these containers?
there added a margin inline
73 replies
KPCKevin Powell - Community
Created by RMON on 2/1/2024 in #front-end
Is there a correct way to copy these containers?
so unsure why youd want to give anything a z-index when I dont believe that a stacking context would be created like that but 🤷
73 replies
KPCKevin Powell - Community
Created by RMON on 2/1/2024 in #front-end
Is there a correct way to copy these containers?
give the projects-wrapper a margin-inline to keep it in the middle of the page but otherwise that will end with 2 boxes side by side but will wrap as needed to a column of 4
73 replies
KPCKevin Powell - Community
Created by RMON on 2/1/2024 in #front-end
Is there a correct way to copy these containers?
<div class="projects-wrapper">

  <div class="Porject-Boxes"></div>
  <div class="Porject-Boxes"></div>

  <div class="Porject-Boxes"></div>
  <div class="Porject-Boxes"></div>
</div>
<div class="projects-wrapper">

  <div class="Porject-Boxes"></div>
  <div class="Porject-Boxes"></div>

  <div class="Porject-Boxes"></div>
  <div class="Porject-Boxes"></div>
</div>
.projects-wrapper {
  --width: 26.5rem;
  width: min(100% - 2rem, calc(var(--width) * 2 + 2rem));
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding-bottom: 2rem;
  margin-inline: auto;
}

.Porject-Boxes {
  height: 35rem;
  width: var(--width);
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0px 0px 10px 2px rgb(0 10 26 / 41%);
}
.projects-wrapper {
  --width: 26.5rem;
  width: min(100% - 2rem, calc(var(--width) * 2 + 2rem));
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding-bottom: 2rem;
  margin-inline: auto;
}

.Porject-Boxes {
  height: 35rem;
  width: var(--width);
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0px 0px 10px 2px rgb(0 10 26 / 41%);
}
73 replies
KPCKevin Powell - Community
Created by RMON on 2/1/2024 in #front-end
Is there a correct way to copy these containers?
so thats super simple you just need to set a width on the container and make it so that you can use that flex that you had earlier
73 replies
KPCKevin Powell - Community
Created by RMON on 2/1/2024 in #front-end
Is there a correct way to copy these containers?
No description
73 replies
KPCKevin Powell - Community
Created by RMON on 2/1/2024 in #front-end
Is there a correct way to copy these containers?
any reason why you had project containers?
73 replies
KPCKevin Powell - Community
Created by RMON on 2/1/2024 in #front-end
Is there a correct way to copy these containers?
oh, now I understand
73 replies
KPCKevin Powell - Community
Created by JJ on 2/1/2024 in #front-end
Navigation Bar
im unsure what you mean. are you saying that if you have a ul wrapping the li (which is semantically correct) that you then have as the only child of the nav that the list items arent placed correctly?
8 replies
KPCKevin Powell - Community
Created by RMON on 2/1/2024 in #front-end
Is there a correct way to copy these containers?
because you asked for them to be stacked as I clarified above if you didnt want them stacked like that, just create 2 rows and dont specify anything for the grid items 
.projects-wrapper {
  display: grid;
  grid-auto-flow: row;
}
.projects-wrapper {
  display: grid;
  grid-auto-flow: row;
}
73 replies
KPCKevin Powell - Community
Created by RMON on 2/1/2024 in #front-end
Is there a correct way to copy these containers?
https://codepen.io/CA-Carl/full/dyrvXNG 
<div class="projects-wrapper">

  <div class="Project-Container1">
    <div class="Porject-Boxes"></div>
    <div class="Porject-Boxes"></div>
  </div>

  <div class="Project-Container2">
    <div class="Porject-Boxes"></div>
    <div class="Porject-Boxes"></div>
  </div>
</div>
<div class="projects-wrapper">

  <div class="Project-Container1">
    <div class="Porject-Boxes"></div>
    <div class="Porject-Boxes"></div>
  </div>

  <div class="Project-Container2">
    <div class="Porject-Boxes"></div>
    <div class="Porject-Boxes"></div>
  </div>
</div>
.projects-wrapper {
  display: grid;
  grid-template: 1fr / 1fr;
}

.Project-Container1,
.Project-Container2 {
  grid-row: 1;
  grid-column: 1;
}

.Project-Container1 {
  display: flex;
  padding-bottom: 2rem;
  gap: 2rem;
}

.Project-Container2 {
  display: flex;
  padding-bottom: 6.5rem;
  gap: 2rem;
}

.Porject-Boxes {
  height: 35rem;
  width: 26.5rem;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0px 0px 10px 2px rgb(0 10 26 / 41%);
}
.projects-wrapper {
  display: grid;
  grid-template: 1fr / 1fr;
}

.Project-Container1,
.Project-Container2 {
  grid-row: 1;
  grid-column: 1;
}

.Project-Container1 {
  display: flex;
  padding-bottom: 2rem;
  gap: 2rem;
}

.Project-Container2 {
  display: flex;
  padding-bottom: 6.5rem;
  gap: 2rem;
}

.Porject-Boxes {
  height: 35rem;
  width: 26.5rem;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0px 0px 10px 2px rgb(0 10 26 / 41%);
}
73 replies
KPCKevin Powell - Community
Created by RMON on 2/1/2024 in #front-end
Is there a correct way to copy these containers?
but this is just a solution to your question of how to position the containers on top of each other. I am still at a loss as to why you are doing this
73 replies