Jump to content

change variants font size smaller and to lowercase hawley

Recommended Posts

  • Replies 2
  • Views 1.1k
  • Created
  • Last Reply

Add the following to Design > Custom CSS.

#cart .item-desc {

  font-size : 16px;
  text-transform : lowercase;
  
  }

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

<style>

  .collection-type-products .ProductItem-details .variant-option {
  
    --font-size-scale : 0.825; /* how much to scale the font-size */
    
    }
    
  /* do not change anything below, there be the borg here */
  
  .collection-type-products .ProductItem-details .variant-option {
  
    --font-size : calc( var( --font-size-scale ) * 100% );
    
    }
    
  /* begin desktop */
  
    @media screen and ( min-width : 0 ) and ( max-width : calc( 2120px - 1px ) ) and ( orientation : landscape ) {
    
      .collection-type-products .ProductItem-details .variant-option {
      
        font-size : var( --font-size );
        text-transform : lowercase;
        
        }
        
      }
      
    .product-details .variant-option select {
    
      font-size : var( --font-size );
      
      }
      
    /* end desktop */
    
  /* mobile */
  
  @media screen and ( min-width : 0 ) and ( max-width : calc( 1944px - 1px ) ) and ( orientation : portrait ) {
  
    .collection-type-products .ProductItem-details .variant-option {
    
      font-size : calc( ( 1 - 1 ) * 1.2vh + var( --font-size-scale ) * 1rem );
      
      }
      
    }
    
  </style>

This is for v7.1.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 6/13/2021 at 8:04 PM, creedon said:

Add the following to Design > Custom CSS.



#cart .item-desc {

  font-size : 16px;
  text-transform : lowercase;
  
  }

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



<style>

  @media screen and ( min-width : 0 ) and ( max-width : calc( 2120px - 1px ) ) and ( orientation : landscape ) {
  
    .collection-type-products .ProductItem-details .variant-option {
    
      font-size : 13px;
      text-transform : lowercase;
      
      }
    }
    
  .product-details .variant-option select {
  
    font-size : 13px;
    
    }
    
  </style>

This is for v7.1.

Let us know how it goes.

thank you so much! it works perfectly

😊

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.