Jump to content

Is there a way to make the form's radio section show in several columns?

Go to solution Solved by creedon,

Recommended Posts

  • Solution

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

<style>

  /* begin Seafood Products 3 columns */
  
    @media screen and ( min-width : 768px ) {
    
      #checkbox-64ad2335-0c41-4a3e-90b3-7fcda2211d12 {
      
        display : grid;
        gap : 1em;
        grid-template-columns : repeat( 3, 1fr );
        padding-top : 4em;
        
        }
        
      #checkbox-64ad2335-0c41-4a3e-90b3-7fcda2211d12 .description,
      #checkbox-64ad2335-0c41-4a3e-90b3-7fcda2211d12 .title
      
        {
        
          position : absolute;
          
          }
          
      #checkbox-64ad2335-0c41-4a3e-90b3-7fcda2211d12 .description {
      
        top : 2em;
        
        }
        
      }
      
    /* end Seafood Products 3 columns */
    
  </style>

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

Edited by creedon
version 2

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
1 hour ago, creedon said:

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

<style>

  /* begin Seafood Products 3 columns */
  
    #checkbox-64ad2335-0c41-4a3e-90b3-7fcda2211d12 {
    
      display : grid;
      gap : 1em;
      grid-template-columns : repeat( 3, 1fr );
      padding-top : 4em;
      
      }
      
    #checkbox-64ad2335-0c41-4a3e-90b3-7fcda2211d12 .description,
    #checkbox-64ad2335-0c41-4a3e-90b3-7fcda2211d12 .title
    
      {
      
        position : absolute;
        
        }
        
    #checkbox-64ad2335-0c41-4a3e-90b3-7fcda2211d12 .description {
    
      top : 2em;
      
      }
      
    /* end Seafood Products 3 columns */
    
  </style>

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

@creedonIt worked, thanks! However, on mobile it doesn't really fit to have 3 columns. Is there a way to make this only apply to desktop view?

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.