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
Asked
Active
Viewed 40 times
1
-
Please provide enough code so others can better understand or reproduce the problem. – Community Apr 29 '22 at 03:59
1 Answers
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>

Chris Schober
- 176
- 5
-
Big Cartel using a different way of writing the code, I'll try to provide a picture – Peter Dinh Apr 30 '22 at 01:14