GastonDuflos

21 hours ago, tuanphan said:

The banner image looks fine. What is problem now? If you mean white space between header - image, you can reduce number in margin top

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%. 

20 hours ago, tuanphan said:

You can set margin top code. I think header overlap section abit

@media only screen and (max-width: 767px) {
    [data-section-id="657f778af1a704689bdfd139"] {
        min-height: unset !important;
        height: 30vh !important;
		margin-top: 5vh !important;
    }
}

 

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

12 minutes ago, GastonDuflos said:

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

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

2 hours ago, tuanphan said:

I see you used different code, not my code

Remove your code & use this code

@media only screen and (max-width: 767px) {
    [data-section-id="657f778af1a704689bdfd139"] {
        min-height: unset !important;
        height: 30vh !important;
    }
}

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

On 10/2/2021 at 6:10 PM, tuanphan said:

Add to Design > Custom CSS

/* Resize mobile banner */
@media screen and (max-width:767px) {
[data-section-id="6151fe5467f3dc22b6e908f7"] {
    min-height: unset !important;
    height: 35vh;
}
}

 

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

6 hours ago, tuanphan said:

Use this code

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: calc(100% - 40px) !important;
    transform: unset !important;
    margin-left: 20px;
    margin-right: 20px;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}

 

 

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

On 10/1/2023 at 8:01 PM, tuanphan said:

Add this CSS under

.product-mark.sold-out {
    white-space: nowrap;
    border-radius: 0 !important;
    height: auto !important;
    width: auto !important;
    display: inline-block !important;
}

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;
}
}

On 4/10/2021 at 6:21 PM, tuanphan said:

Hi. Add to Design > Custom CSS

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !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!

On 7/21/2023 at 8:58 PM, tuanphan said:

Use this CSS code

body.view-item .tag-sold-out:after {
    display: none;
}
body.view-item .tag-sold-out .ProductItem-gallery-slides-item:before {
    content: "Sold Out";
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff593c;
    padding-left: 10px;
    padding-right: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}

Thank you so much! It looks awesome!

Hi @tuanphan I hope you re doing well! I need some help removing the space between the image and the additional comments on my product pages. Link here: https://www.gastonduflos.com/shop/p/sea-of-dreams

Can we remove this space so the additional comments section is closer to the image? 

Thank you so much!

Hi @tuanphan thank you so much, this worked perfect! 

I now would like to edit the badge once inside the product page. Its showing the badge on the right upper corner of the page. Can we move it somewhere else? Maybe on top of the image? Or under the price? Thank you so much!

Page: https://www.gastonduflos.com/shop/p/sea-of-dreams

On 6/30/2023 at 4:10 PM, DoctorAurit said:

@GastonDuflos did you ever get an answer to this question? I'm trying to find the selector name for the miscellaneous category so I can use custom font in monospace. Thanks! 

No sorry! I decided to choose 1 of the default Squarespace fonts instead, it was too much for me to handle XD

Hi there, I am trying to send the customers that sign up to my mailing list at checkout to MAILER LITE. Is there any way to do this automatically?

I tried setting up Mail chimp, Zapier from there to Mailer Lite, but for some Mailer Lite is not receiving the contacts. So I was wondering if there is an easier way to send contacts from Squarespace to Mailer Lite?

Thank you!

I would love to see how it looks in both @tuanphan is it possible? thank you so much, you're a legend!

thanks @tuanphan now it works perfect! I just wondering if can the position be changed like the attached image here? Problem with the code is that in phone, the badge is overlapping the image. 

Hi @tuanphan thank you so much for this post.

I tried in my customm css but it didnt work for some reason.

This is my shop page: https://www.gastonduflos.com/shop

I've crated the tags: Sold out, New, Limited availability 

hi @tuanphan thank you so much. I've done that. The problem is that the code is for all headings and paragraphs. But the ones that are missing are the MISCELLANEOUS, like this ones: List price, list status, limited availability label font, sold out, the menu with the collections in shop page,  variant fields when in product shop page, add to cart, sign up buttom on footer, first name and last name in contact page. 

HI @tuanphan thank you very much, that works perfect for the AUD.

I've created the TAGS: SOLD OUT, NEW and LIMITED AVAILABILITY and I've assigned them to some of the products. How should I proceed? Thank you so much,.

Hi @tuanphan my shop page is: 

www.gastonduflos.com/shop