How can I change the size of the text box for Pin Code availability checker

Solved
robu1
New Member
16 0 0

robu1_0-1625188422699.png

How can I increase the size of text box of " Check COD availability". Total size of Text box and button should be equal to the "Buy it now" button.Link for the source code for is  "https://cod.shopifyapps.com/postal_code_checker.liquid".

Store link:    https://telugupop.com/

Password: Deesti

0 Likes
Akibhusen
Trailblazer
247 41 73

HI @robu1,

 

Can you please let me know in which page this section is available? I can't find 

Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
0 Likes
robu1
New Member
16 0 0

This is the direct link  https://telugupop.com/collections/unisex-tshirts/products/etla-ra-intha-low-iq-ithe
For your info Follow this  (Apparel -> Unisex Tshirts -> Select Any Product) if the above link doesn't work
@Akibhusen 

0 Likes
Akibhusen
Trailblazer
247 41 73

HIi,

 

Please add the below CSS at the end of your theme.css file. You can find this file in the assets folder.

 

@media(max-width:767px){

.product-single__form + div > div{
display:block !important;
}
.product-single__form + div > div input{
width: 100%;
margin: 0 0 10px !important;
}
.product-single__form + div > div .btn{
width: 100%;
}
}

Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
0 Likes
robu1
New Member
16 0 0

Hello @Akibhusen. I want the text box and "check" button to be in the same line. The total length of text box and "check" button should be equal to total length of "Buy it now" button. For example like this

robu1_0-1625446558671.png

 

0 Likes
Akibhusen
Trailblazer
247 41 73

This is an accepted solution.

HI,

 

Please remove the previously given CSS & add the below-given CSS at the end of your theme.css file.

 

@media(max-width:767px){
 
.product-single__form + div > div{
//display:block !important;
}
.product-single__form + div > div input{
width: 100%;
flex-basis: calc(100% - 105px);
}
.product-single__form + div > div .btn{
width: 100%;
flex-basis: 105px;
}
}
Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
0 Likes
robu1
New Member
16 0 0

@Akibhusen Thank you. It's working

0 Likes
Fusio
New Member
1 0 0

Hello !

 

Can you please help us with this. We'd like to move the cod availabilty checker snippet to the right side of the page below the buy it now option. Right now it's coming on the left side 

0 Likes
Akibhusen
Trailblazer
247 41 73

HI @Fusio ,

 

I think it's the right side and below the buy now button. Please let me know if I am not understand your issue.

 

Akibhusen_0-1627841481888.png

 

Akibhusen Shekh | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
0 Likes