CODEWITHSUNDEEP
htmlcssflexbox
Kevin Casey
Kevin Casey

Reputation: 45

How do I get items in a div to stack vertically

Im trying to make a mock online store and cannot figure out how to stack an items description with its image. I have everything inside a grid container. I can center each element individually but when I try to stack the image over the desription/drop down/button they create 2 new columns in the box. Is there a way I can put the image on top of the description and then both of those elements on top of the dropdown menu and button?

#column_left{
display: grid;
width:100%;
height: 900px;
border: solid 2px black;
grid-template-rows: 33% 33% 33%;
}

#column_right {
    display: grid;
    width:100%;
    height: 900px;
    border: solid 2px black;
}

.item {
    border: solid 2px black;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; 
}

.sample_img {
    height: 50%;
    width: auto;
}
<div class="item">
    <img class="sample_img" src="https://st2.depositphotos.com/3080513/7014/i/600/depositphotos_70144489-stock-photo-t-shirt-template.jpg">

    <p>Sticks T-shirt</p>
    <label for="size">Choose a Size</label>
    <select name="size" class="size" >
        <option value="XS">XS</option>
        <option value="S">S</option>
        <option value="M">M</option>
        <option value="L">L</option>
        <option value="XL">XL</option>
        <option value="XXL">XXL</option>
    </select>
    <button class="addToCart" type="submit">Add to Cart</button>

</div>

Upvotes: 0

Views: 91

Answers (3)

Kameron
Kameron

Reputation: 10856

Need to use flex-direction or flex-flow column on the parent, in this case .item.

#column_left {
  display: grid;
  width: 100%;
  height: 900px;
  border: solid 2px black;
  grid-template-rows: 33% 33% 33%;
}

#column_right {
  display: grid;
  width: 100%;
  height: 900px;
  border: solid 2px black;
}

.item {
  border: solid 2px black;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1em;
}

button {
  margin-bottom: 1em;
}

.sample_img {
  height: 50%;
  width: auto;
  max-width:100%
}

.item>div:first-child {
  text-align: center;
}
<div class="item">
  <div>
    <img class="sample_img" src="https://st2.depositphotos.com/3080513/7014/i/600/depositphotos_70144489-stock-photo-t-shirt-template.jpg">
    <p>Sticks T-shirt</p>
  </div>
  <label for="size">Choose a Size</label>
  <select name="size" class="size">
    <option value="XS">XS</option>
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
    <option value="XXL">XXL</option>
  </select>
  <button class="addToCart" type="submit">Add to Cart</button>
</div>

Upvotes: 1

wch
wch

Reputation: 304

Add this to .item class

flex-direction: column;

in this case, the picture and the rest of the content will be one under the other

.item {
    border: solid 2px black;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; 
    flex-direction: column;
}

Upvotes: 1

Caleb
Caleb

Reputation: 621

You should be able to set a flex-direction. You probably don't need to use grid in this situation.

flex-direction: row;
flex-direction: column;

are the two options you will mostly likely choose from. Changing the flex direction will change what justify content and align items do though, essentially reversing them. You can also do row-reverse and column-reverse to make it backwards if you want.

Upvotes: 1

Related Questions