Jump to content

Place form fields inline

Recommended Posts

  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

Add the following to Design > Custom CSS.

/*

  begin Stück and Produktauswahl on same line
  
  Version     : 0.1.0
  
  SS Version  : 7.1
  
  Note        : this effect is not active in SS Preview to test it use private
                browsing < https://bit.ly/3f6lhq2 >
  
  By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  #block-e424d355461be8916af5 form .field-list {
  
    --gap : 1em;
    
    }
    
  /* do not change anything below, there be the borg here */
  
  html:not( .squarespace-damask ) #block-e424d355461be8916af5 form .field-list {
  
    display : grid;
    gap : var( --gap );
    grid-template-columns : repeat( 5, 1fr );
    
    }
    
  html:not( .squarespace-damask ) #block-e424d355461be8916af5 form .field-list .form-item {
  
    grid-column : 1 / 6;
    margin : 0;
    
    }
    
  #block-e424d355461be8916af5 form .field-list #text-6d930517-30f5-403d-a7c2-11270c0ac0e9 {
  
    grid-area : 4 / 1 / 5 / 4;
    
    }
    
  #block-e424d355461be8916af5 form .field-list #select-8e6ab07f-be59-4b53-b6a5-d009a635e2ca {
  
    grid-area : 4 / 4 / 5 / 6;
    
    }
    
  /* end Stück and Produktauswahl on same line */

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

Let us know how it goes.

Edited by creedon

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 4/22/2022 at 10:03 AM, camali said:

I think there is a misunderstanding.

There was! I have updated my previous code post.

Remove, make a copy somewhere, any previous attempts at this effect.

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
Quote

Ok. This is what I see:

Well that doesn't look good. At this point I'd need to see the code installed to see what might have gone wrong.

I suggest making a duplicate of the page so you can work on it out of public view. Send me the link for that new page. I will update my code with the new block id of the form. Then you can install the test code and we can see what has gone wrong.

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.