sundog Posted April 22, 2020 Share Posted April 22, 2020 Site URL: https://sundogbread.com/preorder/traditional-sourdough Hi! How do I move the product title under the product image on the product page on mobile? I'm using Motto template. This is the mobile site now, I would like to move the product title under the product image, above the description. Link to comment
tuanphan Posted April 22, 2020 Share Posted April 22, 2020 Add to Home > Design > Custom CSS @media screen and (max-width:640px) { section.ProductItem-summary.clear { display: flex; flex-direction: column; } figure.ProductItem-gallery { order: 1; } section.ProductItem-details.ProductItem-details--mobile { order: 2; } section.ProductItem-details { order: 3; } } jeffreyzie, sundog and sophiequi 2 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Yugvir Posted August 13, 2020 Share Posted August 13, 2020 (edited) Hey! I have the same problem. What i need to do is have (in top to bottom order, on mobile view) ProductItem title > Gallery > description > Variants > Add to cart button. I tried making a custom flexbox but to no avail . Here is the website : https://www.themaycircle.com/shop/p/graduate-from-home Password is : manaaryug_tmc Thanks! @tuanphan Edited August 13, 2020 by Yugvir Link to comment
Yugvir Posted August 13, 2020 Share Posted August 13, 2020 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 Link to comment
tuanphan Posted August 17, 2020 Share Posted August 17, 2020 On 8/14/2020 at 6:40 AM, Yugvir said: 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 Did you solve? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Yugvir Posted August 18, 2020 Share Posted August 18, 2020 @tuanphan Yeah, I realised this works for me! Link to comment
Rjafadi Posted September 8, 2022 Share Posted September 8, 2022 Hi @tuanphan Is there a way to create some space between the product title and the images above? Link to comment
tuanphan Posted September 9, 2022 Share Posted September 9, 2022 13 hours ago, Rjafadi said: Hi @tuanphan Is there a way to create some space between the product title and the images above? Can you share link to product page? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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