Waitlist form style - how can I edit?

Site URL: https://www.chalkvscheese.com/shop/theouting

Hi, I'm trying to figure out how to edit the style of the waitlist form. Currently it looks like this for a sold out product on my website (pic 1). I would like to make it look more inline with what I've done with the newsletter form that's currently in the footer of my website (pic 2) - align to the centre and only have a solid line rather than a white box and an outline button. The padding is also huge under this form, is it possible to minimise so it matches the other product pages? Help please! 

Hi. Can you share link to product in screenshot? We can help easier

Hi, I've just made a product out of stock, here's the link: https://www.chalkvscheese.com/theshop/theouting

I've figured out the padding problem, would like to know how to align email address input field and send button so that it's centred to the all the text above. Would also like to make it the email address input field a solid line instead of a white box (see newsletter input field for reference, in the footer). Is it possible to make the SOLD OUT status appear on the products page too? 

Thanks. 

Screenshots are in my original post. 

On 3/29/2021 at 11:40 AM, WinnieLim said:

Hi, I've just made a product out of stock, here's the link: https://www.chalkvscheese.com/theshop/theouting

I've figured out the padding problem, would like to know how to align email address input field and send button so that it's centred to the all the text above. Would also like to make it the email address input field a solid line instead of a white box (see newsletter input field for reference, in the footer). Is it possible to make the SOLD OUT status appear on the products page too? 

Thanks. 

 

Add to Design > Custom CSS

form.product-restock-form {
    justify-content: center;
}

Amazing, thanks Taunphan! That has made it all centred now. 

Is there a way to have the SOLD OUT label appear on the products page too? Currently it only appears on this page: https://www.chalkvscheese.com/theshop/theouting

I would like it to appear on this page too: https://www.chalkvscheese.com/

Have attached screenshots for your reference. 

Thanks, Winnie

On 4/1/2021 at 6:44 PM, WinnieLim said:

Amazing, thanks Taunphan! That has made it all centred now. 

Is there a way to have the SOLD OUT label appear on the products page too? Currently it only appears on this page: https://www.chalkvscheese.com/theshop/theouting

I would like it to appear on this page too: https://www.chalkvscheese.com/

Have attached screenshots for your reference. 

Thanks, Winnie

Add to Design > Custom CSS

/* Sold out on homepage */
body.homepage .sold-out .product-price:after {
    content: "Sold Out";
    display: block;
    margin-top: -10px;
    font-weight: 500;
}

Thanks Taunphan - that CSS worked a treat! But if I wanted to apply that to another product, what would I need to add to this code in order to make that happen? 

One last thing... can you figure out a code to make the email address input field that's currently a white box into a solid line with no background? Here's a link, see the NOTIFY ME block under SOLD OUT label https://www.chalkvscheese.com/theshop/theouting  I would like it to look like the JOIN US newsletter block that's currently in the middle footer. See screenshots. 

Thanks! 

On 4/8/2021 at 10:17 AM, WinnieLim said:

Thanks Taunphan - that CSS worked a treat! But if I wanted to apply that to another product, what would I need to add to this code in order to make that happen? 

One last thing... can you figure out a code to make the email address input field that's currently a white box into a solid line with no background? Here's a link, see the NOTIFY ME block under SOLD OUT label https://www.chalkvscheese.com/theshop/theouting  I would like it to look like the JOIN US newsletter block that's currently in the middle footer. See screenshots. 

Thanks! 

Q1. Try this new code

.sold-out .product-price:after {
    content: "Sold Out";
    display: block;
    margin-top: -10px;
    font-weight: 500;
}

Q2. Add to Design > Custom CSS

/* Restock form */
.product-restock-form input[type="text"] {
    background: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

Thank you so much Taunphan, code for Q2 worked amazingly! The new SOLD OUT label code didn't apply to the other products but I might just remove it entirely as I have to manually add this code each time a product is out of stock, which might get confusing. 

Appreciate all the help, you're a wizard! 

On 4/13/2021 at 6:45 AM, WinnieLim said:

Thank you so much Taunphan, code for Q2 worked amazingly! The new SOLD OUT label code didn't apply to the other products but I might just remove it entirely as I have to manually add this code each time a product is out of stock, which might get confusing. 

Appreciate all the help, you're a wizard! 

Do you still need help on this? I will check it again

On 4/13/2021 at 6:45 AM, WinnieLim said:

Thank you so much Taunphan, code for Q2 worked amazingly! The new SOLD OUT label code didn't apply to the other products but I might just remove it entirely as I have to manually add this code each time a product is out of stock, which might get confusing. 

Appreciate all the help, you're a wizard! 

I found some problems on your site. Do you need help on these?

Site URL – https://www.chalkvscheese.com/

1. (Smaller screen) Right bar on right of screen

2. (Mobile-Popup) Want to center text?

3. (Tablet-Products) Increase icons section width?

4. (Mobile-Terms) Reduce left spacing?

Hi Taunphan,

1. Not sure what you mean here, but think I'm happy with how that looks?

2. Yes, would love to centre text on the pop up

3. If possible that would be great. It seems to be ok on a mobile version however? 

4. Would still like some spacing but slightly reduced would be great.   

Thanks!

On 4/19/2021 at 6:43 AM, WinnieLim said:

Hi Taunphan,

1. Not sure what you mean here, but think I'm happy with how that looks?

2. Yes, would love to centre text on the pop up

3. If possible that would be great. It seems to be ok on a mobile version however? 

4. Would still like some spacing but slightly reduced would be great.   

Thanks!

1. I meant scroll bar on bottom of the site, on smaller screen

2. Add to Design > Custom CSS

/* center popup text */
@media screen and (max-width:767px) {
div.sqs-slide-layer-content * {
    text-align: center;
}}

3. Add to Design > Custom CSS

/* Tablet icons */
@media screen and (max-width:900px) and (min-width:641px) {
div#footerBlocksTop>.row:nth-child(2) .span-6 {
    width: 80%;
}
div#footerBlocksTop>.row:nth-child(2) .span-3 {
    width: 10% !important;
}
}

4. Add to Design > Custom CSS

/* Mobile term spacing */
@media screen and (max-width:640x) {
div#page-5f005126e00a235fe3571f81 p {
    margin-left: 20px !important;
}
}

Hi Taunphan, codes for Q2 and Q3 worked amazingly - thank you! Codes for Q4 didn't work but I think I'm actually pretty happy with the current margin spacing so all good there. Re: Q1, the bottom scroll bar is not appearing on any of my devices (iphone, ipad, apple laptop) so if there's a code that would lock in the screen size to stop that from appearing that would be great, no biggy though. 

I have noticed that the text under the main pic on the homepage (chalkvscheese.com) stays the same size, is there a code that would make it slightly smaller on a mobile device? See screen shot. 

And is there a way to customise the quantity input field and the pop up message on the shopping cart page? See screenshot. I don't want the quantity input field to be a white box, preferably a solid line with no background (similar to newsletter pop up). 

Cheers,

Winnie 

Q1. I use Dell Laptop/Chrome

I have noticed that the text under the main pic on the homepage (chalkvscheese.com) stays the same size, is there a code that would make it slightly smaller on a mobile device? See screen shot. 

/* Mobile under banner text */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1616064668458_9020 h3 {
    font-size: 16px;
}
}

And is there a way to customise the quantity input field and the pop up message on the shopping cart page? See screenshot. I don't want the quantity input field to be a white box, preferably a solid line with no background (similar to newsletter pop up). 

I see no message here. How did you open message popup?

/* Cart page - input */
.item-quantity input {
    background: transparent !important;
}