For the mobile version in the Dawn theme can we make the product page look like this? Title, reviews and price above the photo.
1 Like
Add padding and margin,
hi @mfazio ,
The thing you want here is customize layout, change the position of title and the review go on top image look like the example image, right?
We can customize look like that, and will need implement directly in product page file, so if you want change let me know?
Thank you!
Please add this CSS code at the bottom of your base.css file to do it.
@media screen and (max-width: 750x) {
.product { position: relative; padding-top: 100px; }
.product__title,
.price,
.wc_product_review_badge {
position: absolute;
}
.product__title { top: 0px; }
.price { top: 40px; }
.wc_product_review_badge { top: 60px; }
}
That didnt work
Did you add code and save the file?
yes, it didnt work
Please try to update code like this and check again
@media screen and (max-width: 750x) {
.product { position: relative; padding-top: 100px; }
.product__title,
.price,
.wc_product_review_badge {
position: absolute !important;
}
.product__title { top: 0px; }
.price { top: 40px; }
.wc_product_review_badge { top: 60px; }
}
that didn’t work either