Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Cianfrani

CSS to change variant display

Question

Site URL: https://www.cianfranicoffeeroasters.com/order-coffee/fulton-cycle-hw6sc

New to SquareSpace so I'm a bit frustrated that I can't change the layout of the product block, or change the font of the variant drop down menus. If you look at a sample page (https://www.cianfranicoffeeroasters.com/order-coffee/fulton-cycle-hw6sc) you can see the variants stick out like a sore thumb. 

1) How can I change the font to match the font on the template?
2) How can I change the layout of the variants so they are not displayed one below the other, like they are now, but in two columns? 

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 1
21 hours ago, Cianfrani said:

Exactly like that!

 

Add to Home > Design > Custom CSS

.product-variants {
    column-count: 2;
}
#productDetails .product-variants .variant-option {
    margin-top: 0;
}

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0
Posted (edited)

Thanks tuanphan! That worked great! I added the font-size attribute to make it a closer match. 

Anyone have suggestions on question 2?

 

Edited by Cianfrani

Share this post


Link to post
  • 0
2 hours ago, Cianfrani said:

Thanks tuanphan! That worked great! I added the font-size attribute to make it a closer match. 

Anyone have suggestions on question 2?

 

You mean like this?

image.thumb.png.b9a35162952b7f3ea74cabace7bda113.png


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...