GastonDuflos

Thanks @tuanphan. The image doesnt look fine, its cropped on mobile. Please see images attached below to see thats there is at least a 30% of the height image been cropped on mobile. The image on desktop is 100%.

Thank you @tuanphan. I updated the code but still with no luck. I think the problem is not with the header section but with the banner section itself. This is how it looks on my Iphone: URL: www.gastonduflos.com

also @tuanphan I just found out that it looks ok on the mobile preview of squarespace but it doesnt look good on the actual mobile: URL: www.gastonduflos.com

THANKS @tuanphan. It worked but only when using INSET. If I use FULL WIDHT option, the images is croped. Any idea why this happen?

HI @tuanphan, thank you for this code. I've used it on my home page but still cant make the image to be widht 100% on mobile, Can you please help? URL: www.gastonduflos.com . It's thefirst banner image

Thanks @tuanphan this code made all of the buttons full black on mobile. I do want them to look light grey like in the desktop version , my problem is with the hover effect colour. It remains active once it has been selected. I want it to be black, like the ADD TO CART BUTTON, but only the selected button and hover effect for the selected button on mobile. Can we do this? Thank you! Thank you so much! My website: https://www.gastonduflos.com/shop/p/bondi-beach-print-ap001 Thank you as always! @tuanphan

Hi everyone, I need a bit help with my product page when on mobile. I use buttons to select variants, and for default it has an hover effect, I'm ok with the effect when using it on desktop. But on mobile, it does something weird, where the hover effect colour remains active once it has been selected. I want it to be black, like the ADD TO CART BUTTON. So my question is, is there any way to deactivate or change the colour of the hover effect for VARIANTS ON MOBILE ONLY? Thank you so much! My website: https://www.gastonduflos.com/shop/p/bondi-beach-print-ap001 Thank you as always! @tuanphan

Hi @tuanphan thank you very much for your assistance. Unfortunately didn't work! My web is: https://www.gastonduflos.com/portfolio/4-pines-mural-design

Thanks @tuanphan any idea why the text on the product page is dark grey and in the shop page is white? Please see the image you attached above. Page: https://www.gastonduflos.com/shop/p/sea-of-dreams I'd like both texts to be white. This is how the code looks like: // Sold Out Badge in shop page and product page // .view-list .product-mark.sold-out { background: #121212 !important; color: white !important; position: absolute; top: 10px; right: 10px; display: inline-block; padding: 15px; border-radius: 50%; width: 55px; height: 55px; justify-content: center; align-items: center; text-align: center; display: flex; } .view-item .product-mark.sold-out { background: #121212 !important; color: #white !important; display: inline-block; padding: 15px; justify-content: center; align-items: center; text-align: center; display: flex; } .product-mark.sold-out { white-space: nowrap; border-radius: 0 !important; height: auto !important; width: auto !important; display: inline-block !important; } Thank you so much!

Just In case anyone wants to see it, my website is: https://www.gastonduflos.com/shop/p/bondi-beach-print-ap001

Thanks @tuanphan I've found a solution: // Product Variant Button (Full Width and Stacked) - Ghost // .ProductItem-details .variant-radiobtn-wrapper label { text-align: center; margin: 5px 0px; display: block !important; width: 100% !important; } /* Product variants widht button on mobile */ @media screen and (max-width:767px) { .product-variants { width: 100% !important; } } /* Add to cart button on mobile */ @media screen and (max-width:767px) { .ProductItem-details-checkout .sqs-add-to-cart-button-wrapper, .ProductItem-details-checkout .sqs-add-to-cart-button-wrapper div { width: 100% !important; } }

Hi @tuanphan can I please also add a 20px margin on both sides of the images? My web is: https://www.gastonduflos.com/portfolio/4-pines-mural-design

Hi @tuanphan I used this customm css on my website and it looks like the images attached. Can I have a rectangle instead of a circle like the post from above? Can I have the SOLD OUT text all in one line instead of 2 lines? Also, dont know why there is more padding under the text on my circle, can we make it look with even amount of space on all sides of the rectangle? My shop page is: www.gastonduflos.com/shop Thank you so much!

Hi everyone, I need some help with my product page on mobile, if that's okay. I've attached a screenshot of my website and a screenshot of how I would like it to look. My main problem here is, can I have the ADD TO CART BUTTON and variant options look more like the image attached, full width? Can I also hide the quantity button? Most of the time, my customers will buy only one piece, and if they want one more, they can adjust it in the shopping cart. Thank you so much!

Thank you so much! It looks awesome!