2Eyeballs

I specifically got your code to work for the individual products, but how can I make it apply to all products on a page? I tried this code to try to change the color of the sale price only, but it doesn't work:
#product-price .visually-hidden .v6-visually-hidden {
  color: #dc9395 !important;
}

 

This is the solution

Impressed! Thanks for the effort tuan

Hi @KC13,
Have you try using this setting

accordion product.mp4 Hope it can help you

Sure, you can just play around with the font size and padding in the code I sent, for example, try:
div#productDetails .sqs-add-to-cart-button-inner, body:not(.button-style-default).button-corner-style-square .sqs-editable-button { font-size: 16px; } .collection-type-products .sqs-add-to-cart-button { padding: 12px 25px; } You can adjust the px of the font size until you find one you like, and then adjust the padding the same way, I suggest using px for padding instead of em like the current template, as em is dependent on font size, where as px will be static/consistent no matter the font size.  

@2Eyeballs actually if the font size is the way you want it on all the buttons, then you can simplify and just try this instead:
.sqs-editable-button, sqs-button-element--primary { padding: 14px 25px 10px; } The buttons with the larger fonts will still appear larger BECAUSE of the larger font, but the spacing around the font in the buttons will be consistent sitewide.

Note: you may need to add !important to the padding if it's not overriding the current styles, like this:
.sqs-editable-button, sqs-button-element--primary { padding: 14px 25px 10px !important; } let me know?

@2Eyeballs Looks like it's just part of the e-commerce template, but you can try adding this to custom CSS to override and match your other button styles:
div#productDetails .sqs-add-to-cart-button-inner, body:not(.button-style-default).button-corner-style-square .sqs-editable-button { font-size: 12px; } .collection-type-products .sqs-add-to-cart-button { padding: 1em 2.5em; } You may want to click around and see if any other button targets need to be added...?

Try adding this to Design > Custom CSS
#productDetails .product-variants .variant-option select { padding: 10px !important; font-size: 30px !important; }  

That works beautifully. Thank you.

you can also try minifying any custom code.

Can you share your website URL so I can look at where the margin is coming from?

RESOLVED: 
.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-title { font-family: futura-pt !important; font-size: 20px !important; line-height: 1.2em !important; text-transform: none !important; letter-spacing: .02em !important; font-weight: 300 !important; font-style: normal !important; color: #404040 !important; }

Did you remove anything? That CSS shouldn't have any effect on the header.

I also noticed that you have some scripts in the Footer Code Injection that is not correctly wrapped in <script> tags so it is rendering as plain text:

Oh! I tried your suggestion again and it is working now... You are an angel.
I have another question - what code might I use to make the footer ornamentation touch both ends of the browser window and keep the entire footer flush to the bottom?
 I'd also like to the hero image to touch both ends of the browser window.

Hi, thank you!
Yes, my link was incorrect. Here it is. 
And to confirm I am inputting css correctly: I am copy pasting your suggestion directly into custom css. Is this right?

Not sure your website URL is correct, can you check and reshare?
Try this for the vertical alignment:
#topNav { vertical-align: bottom !important; } This would be a method for adding spacing like the example:
#topNav .main-nav ul li:first-child { margin-right:8vw; } #topNav .main-nav ul li:last-child { margin-left:8vw; }