Yugvir Posted August 13, 2020 Share Posted August 13, 2020 (edited) Site URL: https://www.themaycircle.com/shop/p/atmanirbhar Im having problems changing the order of the stack of ProductItems when in mobile resolution. I need to have the following order (from top to bottom) : Product title> Gallery > Description > Variant selector > Add to cart button. I tried to make a custom flexbox but to no avail. Id appreciate the help. Thanks! Edited August 20, 2020 by Yugvir Link to comment
Yugvir Posted August 13, 2020 Author Share Posted August 13, 2020 (edited) I managed to get results with the following, which works for me, but the title still wont come at top. @media screen and (max-width:640px) { section.ProductItem-summary.clear { display: flex; flex-direction: column; } figure.ProductItem-gallery { order: 0; } .collection-type-products .ProductItem-details .ProductItem-details-excerpt { order: 2; } .collection-type-products .ProductItem-details h1.ProductItem-details-title{order:1;} } Ive put order 1 in title here because putting it down as 0 doesnt work. And even starting the order from 1 among these doesnt work either sigh hope this may help someone Edited August 13, 2020 by Yugvir Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment