Kevin Powell - Community•10mo ago

Is there a correct way to copy these containers?

Sorry for that bad title, I created this basic container I wanted to know is there a correct way to copy the containers or would I have to make separate containers with the same styling?

46 Replies

RMONOP•10mo ago

What im trying to recreate is this

RMONOP•10mo ago

But with two more containers under so a total of 4 containers

Coder_Carl•10mo ago

im confused are you just wanting 2 columns. each column has 2 containers sitting there in a stack. (The contents of 1 container is visible as it is sitting there on top of the other one)

RMONOP•10mo ago

So if you look in the image I sent you there's two containers side by side I wanted to recreate that with two more containers under them Could I just make two seperate divs that house two containers and edit it like that?

Coder_Carl•10mo ago

i dont see why not? youd just need to either position them using grid or position absolute them

glutonium•10mo ago

if u r using vanila html then u do need to have 2 different containers for 2 different card basically u have manually add these elements to your html doc for styling ofc u don't need to style them individually, they're structurally and desingwise sane so u can give them same class and stuff to give the same styling to both these cards now if u have 10 cards ,u still need to do it 10 times manually for html reason being html files r static files now u can use frameworks like astro or pre-processors like pug that introduces js functionalities within html giving it some dynamistic behaviour additionally, u can use simple js as well

RMONOP•10mo ago

Im not really understanding and sadly I dont know much JS right now

RMONOP•10mo ago

See I got it done like this

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

The lining is bad when I copy and paste ignore it

.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%);
}

.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%);
}

That's all the CSS code for it But sadly I cant figure out a way to make them go on top one another when the screen continues to shrink

RMONOP•10mo ago

For example The "Skills" looks like this full screen

RMONOP•10mo ago

When the screen becomes smaller it looks like this

Coder_Carl•10mo ago

you would be best to create a project-container--wrapper div and then position the boxes within the wrapper either position absolute; or display grid; and set the project-containers to the same column and row 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

RMONOP•10mo ago

For the projects portion of my page I'd like to have four containers that show the images of the project like this But since I'd like to add two more projects I want to have them stacked so two projects on top and two under Just to make sure so I dont go about this wrong how can I set my project containers to the same column and row?

Coder_Carl•10mo ago

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%);
}

Carl Davidson

CodePen

random question

...

RMONOP•10mo ago

Quick question, If you have two seperate containers with two divs in each how come there are only two boxes shown?

Coder_Carl•10mo ago

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;
}

RMONOP•10mo ago

The code I had originally written caused my boxes to look like this when i shrinked the browser as much as possible would it be possible to have all the containers stacked on top of one another in one single row

RMONOP•10mo ago

thats what Im having a hard time understanding

<div class="Project-Container-Wrapper">
          <div class="Project-Container">
            <div class="Project-Boxes"></div>
            <div class="Project-Boxes"></div>
          </div>

          <div class="Project-Container">
            <div class="Project-Boxes"></div>
            <div class="Project-Boxes"></div>
          </div>
        </div>
      </div>

<div class="Project-Container-Wrapper">
          <div class="Project-Container">
            <div class="Project-Boxes"></div>
            <div class="Project-Boxes"></div>
          </div>

          <div class="Project-Container">
            <div class="Project-Boxes"></div>
            <div class="Project-Boxes"></div>
          </div>
        </div>
      </div>

.Project-Container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 1.5rem;
}

.Project-Boxes {
  flex: 0 0 calc(50% - 1.5rem);
  height: 35rem;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0px 0px 20px 3px rgb(0 10 26 / 41%);
  margin-bottom: 10px;
}

.Project-Container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 1.5rem;
}

.Project-Boxes {
  flex: 0 0 calc(50% - 1.5rem);
  height: 35rem;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0px 0px 20px 3px rgb(0 10 26 / 41%);
  margin-bottom: 10px;
}

That's the code I had written

Coder_Carl•10mo ago

oh, now I understand

RMONOP•10mo ago

Im sorry if Im explaining it bad I know I am lol

Coder_Carl•10mo ago

any reason why you had project containers?

RMONOP•10mo ago

I still haven't fully managed to explain code well I just sound goofy Honestly I really liked the way the original idea was from the img. It was nice and simple in my opinion, he had the laptop/phone with his project displayed on them and he had a small description stating what the project was and then a redirect button.

Coder_Carl•10mo ago

so which one are you treating your project-boxes like?

RMONOP•10mo ago

Number two

Coder_Carl•10mo ago

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

<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%);
}

Bishal•10mo ago

Simple bro, use grid and give z-index to the border. By using grid it will become more simpler, when you squeeze the size of the screen the container will automatically get wrap and also it will be responsive.

Coder_Carl•10mo ago

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

RMONOP•10mo ago

just margin-inline?

Coder_Carl•10mo ago

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 🤷 there added a margin inline

RMONOP•10mo ago

So should it always stay stacked on top of one another?

Coder_Carl•10mo ago

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

RMONOP•10mo ago

( I zoomed out)

RMONOP•10mo ago

Honestlty looking onto to it wouldnt grid have been the better option?

Coder_Carl•10mo ago

yup.

RMONOP•10mo ago

I wanna quickly say somethin because the code looks good just not 100% (sorry once again) when I have made the browser screen smaller it looks perfect but when I full size the browser it still stuck like this

Coder_Carl•10mo ago

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 chances are the container is being constrained somehow, without seeing everything in the larger project it would be impssible to give more exacts

RMONOP•10mo ago

I can show you the entire code on a codepen if you'd like? I'd never really want to copy and paste code I just need to understand what's happenin so I can know how to do it

Bishal•10mo ago

Yeah, by seeing his code If he use background image in screen then text inside the container will not be clickable, in that z-index will manage it

RMONOP•10mo ago

https://codepen.io/hrphyn/pen/jOJzMPN

Coder_Carl•10mo ago

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

clevermissfox•10mo ago

I swear I’ve heard KPow say flex or grid allows zindex to work without also declaring a position but maybe I’m misremembering a detail

Coder_Carl•10mo ago

It wouldn't surprise me considering everything else that was shoved into their specs

Jochem•10mo ago

you're talking about stacking contexts, they are created in flex and grid contexts: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context

MDN Web Docs

Stacking context - CSS: Cascading Style Sheets | MDN

Stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes.

Jochem•10mo ago

A stacking context is formed, anywhere in the document, by any element in the following scenarios: [...] * Element with a position value absolute or relative and z-index value other than auto. [...] * Element that is a child of a flex container, with z-index value other than auto. * Element that is a child of a grid container, with z-index value other than auto.

(the entire article is a good read, stacking context is really good to understand)

clevermissfox•10mo ago

My understanding of stacking context is sub par , especially how transforms and opacity effects it too.

Jochem•10mo ago

definitely same

Gaming

Programming

Is there a correct way to copy these containers?