Jump to content

Center text

Go to solution Solved by creedon,

Recommended Posts

Hi, I am looking to center the text on our charity website below 'Park Lane Stables Shop' have managed to inject code but now lost as to reposition text.  Thank you.

https://www.parklanestables.co.uk/shop

<script>
  
    /*
    
      if the description has single quotes it then put a backslash before
      the single quotes. example: it's becomes it\'s.
      
      */
      
      const description = 'Every purchase goes directly towards feeding a horse or giving someone facing challenges in life the pleasure of being part of something magical.';
  
    
    /*
    
 
      use one of the following paragraph styles. if left empty ( i.e. '' ) then
      Heading 3 will be used
      
      Heading 1
      Heading 2
      Heading 3
      Heading 4
      Paragraph 1
      Paragraph 2
      Paragraph 3
      Monospace
      
      */
      
    let paragraphStyle = 'Paragraph 1';
    
    </script>
    
  <!-- do not change anything below, there be the borg here -->
  
  <style>
  
    @media screen and ( min-width : 576px ) { /* sidebar */
    
      .tweak-products-nested-category-type-sidebar.tweak-products-category-title .products.collection-content-wrapper .nested-category-title {
      
        margin-bottom : calc( 37px / 2 ); /* default divided */
        padding-bottom : 0;
        
        }
        
      .tweak-products-nested-category-type-sidebar.tweak-products-category-title .products.collection-content-wrapper .nested-category-title::after {
      
        all : unset;
        
        }
        
      .tweak-products-nested-category-type-sidebar.tweak-products-category-title .products.collection-content-wrapper .twc-nested-category-description {
      
        display : -webkit-box;
        display : -ms-flexbox;
        display : flex;
        
        -webkit-box-orient : horizontal;
        -webkit-box-direction : normal;
        -ms-flex-direction : row;
        flex-direction : row;
        
        margin-bottom : 37px;
        padding-bottom : calc( 54px / 2 ); /* default divided */
        position : relative;
        
        }
        
      .tweak-products-nested-category-type-sidebar.tweak-products-category-title .products.collection-content-wrapper .twc-nested-category-description::after {
      
        border-bottom : 1px solid;
        bottom : 0;
        content : '';
        left : 0;
        opacity : 0.2;
        position : absolute;
        width : 100%;
        
        }
      }
      
    /* no top rulesets */
    
    </style>
    
  <script>
  
    $( ( ) => {
    
      if ( twcsl.page.store.detail.is ) return; // bail if detail
      
      const paragraphStyles = {
      
        'Heading 1'   : '<h1>',
        'Heading 2'   : '<h2>',
        'Heading 3'   : '<h3>',
        'Heading 4'   : '<h4>',
        'Paragraph 1' : '<p class="sqsrte-large">',
        'Paragraph 2' : '<p>',
        'Paragraph 3' : '<p class="sqsrte-small">',
        'Monospace'   : '<pre>' +
        
          '<code>' +
          
            '</code>' +
            
          '</pre>',
          
        };
        
      if ( ! paragraphStyle ) paragraphStyle = 'Heading 3';
      
      $( '<div class="twc-nested-category-description">' )
      
        .append ( paragraphStyles [ paragraphStyle ] )
        
        .find ( ':last' )
        
          .text ( description )
          
          .end ( )
          
        .insertAfter ( '.nested-category-title' );
        
      } );
      
    </script>

Screenshot 2023-02-01 at 17.06.18.png

Edited by E_T
Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Add to Home > Design > Custom CSS

/* center text */
.products.collection-content-wrapper .grid-item.is-loaded * {
    text-align: center !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 2/3/2023 at 5:05 PM, E_T said:

Thank you Tuan,

I have tried putting this in the <style> section of the code, but it doesn't change the positioning. Maybe I am pasting it in the wrong place?

 

Do not edit the code

And add it to Home > Design > Custom CSS

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution

Add the following code above my code that you installed on your Store page.

<style>

  .twc-nested-category-description {
  
    text-align : center;
    
    }
    
  </style>

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

Create an account or sign in to comment

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

×
×
  • 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.