Place form fields inline

Site URL: https://www.wau-statt-au.at/haendlerbestellung

Hello!

The CSS for arranging the form fields (text and drop-down field) side by side is not workíng: https://ibb.co/QpqdvzT

Your help is very much appreciated.

Carina

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.

Hello @creedon, I added your code, but it didn't change anything.

It appears to be working to me. I just viewed your site.

Did you try private browsing your site?

Hello @creedon, I think there is a misunderstanding. I want the text field (called "Stück" = amount) and the drop-down field (called "Produktauswahl" = choose product) in one line.

Hello @creedon, I think there is a misunderstanding. I want the text field (called "Stück" = amount) and the drop-down field (called "Produktauswahl" = choose product) in one line.

Is there anyone who can help me with this?

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.

Hello @creedon, I only want the two mentioned items in one line. Everything else should remain as it was.

This is what I see when I follow my instructions.

Is this not similar to what you described to me? Also note the effect is not active in Preview per codes note.

Ok. This is what I see: https://ibb.co/WgGsNXK

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.