1

I'm trying to figure how to move the price on the product page to be on top of the description of the product. enter image description here

enter image description here

Peter Dinh
  • 11
  • 2

1 Answers1

1

Here is a possible scenario how this layout is build and where the price should be to get what you want.

.container {
width:100%;
}

h1 {
text-align:center;
}

.product-display {
display:flex;
justify-content:space-between;
gap:1rem;
}

.media {
width:50%;
}

img {
width:100%;
}

.description {
width:50%;
display:flex;
flex-direction:column;

}
<div class="container">
<h1>THE GARAGE STICKER</h1>

  <!-- Current Position could be here -->
  <div class="price">
    <span>$2.00</span>
  </div>
  
  <div class="product-display">
  
    <div class="media">
      <!-- Current Position could be also here -->
      <img src="https://picsum.photos/400" width="400" height="400"/>
    </div>
    
    <div class="description">
      <!-- The "price" Container should be here -->
      <span>OG design concept</span>
      <span>Size: 3" x 2.24"</span>
      <button type="button">Add to cart</button>
    </div>
  </div>