How to adjust the height of the variation dropdown on product page & get rid of underline across site?

Site URL: https://www.edxulondon.com/

Hello, I have 2 questions. My website is: www.edxulondon.com

1. How do I adjust the height of the variation dropdown on product page? please see photo, the dropdowns are thicker than the purchase button (0.4em), i want to make them all the same thickness.

2. I injected code before to get rid of all the underlines on hyperlinks before, for some reason they all came back yesterday. I think the codes I used no longer works, could you kindly advise how to get rid all the underlines?

Thank you so much in advance!

3 hours ago, Edwardxu said:

Site URL: https://www.edxulondon.com/

Hello, I have 2 questions. My website is: www.edxulondon.com

1. How do I adjust the height of the variation dropdown on product page? please see photo, the dropdowns are thicker than the purchase button (0.4em), i want to make them all the same thickness.

2. I injected code before to get rid of all the underlines on hyperlinks before, for some reason they all came back yesterday. I think the codes I used no longer works, could you kindly advise how to get rid all the underlines?

Thank you so much in advance!

Please send the product site url

10 hours ago, bangank36 said:

Please send the product site url

Hi, thanks for your reply. The products are currently hidden because they are not fully ready. But I made 1 product available to public now so you can see.

https://www.edxulondon.com/shop-1/p/fang-bangle

56 minutes ago, Edwardxu said:

Hi, thanks for your reply. The products are currently hidden because they are not fully ready. But I made 1 product available to public now so you can see.

https://www.edxulondon.com/shop-1/p/fang-bangle

try

.ProductItem-details .variant-select-wrapper, .ProductItem-details .product-quantity-input input {
    padding: 0.5rem;
}
.product-details .variant-select-wrapper:after {
  height: 0.75rem;
  width: 0.75rem;
}
.ProductItem-details .variant-option-title, .ProductItem-details .variant-out-of-stock, .ProductItem-details .quantity-label {
  margin-bottom: 1em;
}

29 minutes ago, bangank36 said:

try

.ProductItem-details .variant-select-wrapper, .ProductItem-details .product-quantity-input input {
    padding: 0.5rem;
}
.product-details .variant-select-wrapper:after {
  height: 0.75rem;
  width: 0.75rem;
}
.ProductItem-details .variant-option-title, .ProductItem-details .variant-out-of-stock, .ProductItem-details .quantity-label {
  margin-bottom: 1em;
}

Thank you so much! It worked perfectly! I have a few more questions, hope you would be able to help:

1. Currently, there is a huge gap between the product and additional information section, are you able to help to reduce it to look more normal?

2. In the additional information section, I injected an 'expandable features' code block to make the writing expand. However, the size only works in H3. I am wondering whether you could help me to reduce it to H4?

3. I injected code before to get rid of all the underlines on hyperlinks. But for some reason they all came back a few days ago. I think the codes I used may no longer work, do you know how to get rid of all these underline again?

Thank you so much in advance!! 

On 3/13/2021 at 7:51 PM, Edwardxu said:

Thank you so much! It worked perfectly! I have a few more questions, hope you would be able to help:

1. Currently, there is a huge gap between the product and additional information section, are you able to help to reduce it to look more normal?

2. In the additional information section, I injected an 'expandable features' code block to make the writing expand. However, the size only works in H3. I am wondering whether you could help me to reduce it to H4?

3. I injected code before to get rid of all the underlines on hyperlinks. But for some reason they all came back a few days ago. I think the codes I used may no longer work, do you know how to get rid of all these underline again?

Thank you so much in advance!! 

Do you still need help on this? We will take a look

On 3/23/2021 at 12:49 PM, tuanphan said:

Do you still need help on this? We will take a look

Hi, you answered this on the other post and it worked perfectly! thank you so much and it is very kind of you.

On 3/23/2021 at 12:49 PM, tuanphan said:

Do you still need help on this? We will take a look

actually, I have another silly question. How do I make "You Might Also Like" to all capital, "YOU MIGHT ALSO LIKE" in my H4 style?

https://www.edxulondon.com/shop-1/p/fang-bangle

@Edwardxu

Go to Commerce > Related Products > Section Title.

Type in all capital letters. Save.

Let us know how it goes.

17 hours ago, creedon said:

@Edwardxu

Go to Commerce > Related Products > Section Title.

Type in all capital letters. Save.

Let us know how it goes.

Thanks! Silly me, didn't notice I could change it there.

I have another question and i am wondering whether you can help? I am using a 7.1 site, so I can't adjust how many related products to show per row. I want to show 5 products but on the same row, are you able to help?

https://www.edxulondon.com/shop-1/p/fang-ring

Please see Change Store Product Detail Related Products Grid Column Number for Desktop.

Replace [ enter columns here ] with 5.

Let us know how it goes.

1 hour ago, creedon said:

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  @media screen and ( min-width : 768px ) {
  
    .products.collection-content-wrapper .list-grid {
    
      grid-template-columns : repeat( 5, minmax( 0, 1fr ) );
      grid-row-gap : unset;
      
      }
    }
    
  </style>

Let us know how it goes.

Hi Thanks for your reply. Unfortunately it says 'Syntax error on line' after i put in the codes, and all my other CSS code became invalid. Any advice?

You put the code in Design > Custom CSS instead of where I suggested. That is why you are getting the syntax error.

If you want to put the code in Design > Custom CSS then remove the <style> and </style>. Although I didn't test the code for use in Design > Custom CSS.

7 hours ago, creedon said:

You put the code in Design > Custom CSS instead of where I suggested. That is why you are getting the syntax error.

If you want to put the code in Design > Custom CSS then remove the <style> and </style>. Although I didn't test the code for use in Design > Custom CSS.

Hi Creedon, Thanks for getting back to me, you are right! I am so sorry, I completely miss that and put in the wrong place. So the code does work, but now on my main product list page, it also shows 5 items per row, which is very tight. Could we change it back to 4 rows on the main product list page but keeping 5 for the related products? Sorry for all these questions, I really appreciate your help!

I have updated my code post.

Let us know how goes.

15 hours ago, creedon said:

I have updated my code post.

Let us know how goes.

Thank you so much! it worked perfectly!