Form styling has broken it's function?

Hello!

Through lots of trial and error and with the help of many threads in this forum, I was able to figure out how to float form fields into multiple columns, and apply additional styling. However, it seems like this styling is now preventing the function of the form fields. If you check it out here, you'll see how all of the fields below name/email/phone are un-clickable.

https://fife-sunflower-68mk.squarespace.com/appointment-enquiry

pw: elipsis

Curious if anyone has any insight as to what might be happening?

I think grid is going to be a better option. You have the additional comments floating over a bunch of fields and blocking them off.

This is not a full solution but some starter code. Anytime you mess with SS form styling is it always a challenge to get things to look good.

// begin appointment enquiry multi-column form, uses LESS syntax

  #block-yui_3_17_2_1_1689350752189_2879 .field-list {
  
    display : grid;
    grid-column-gap : 1.5vw;
    grid-template-columns : repeat( 6, 1fr );
    
    }
    
  #block-yui_3_17_2_1_1689350752189_2879 .form-item {
  
    grid-column : ~"1 / -1";
    
    }
    
  #block-yui_3_17_2_1_1689350752189_2879 .description {
  
    padding : 0;
    
    }
    
  #block-yui_3_17_2_1_1689350752189_2879 #select-7e5087e2-19de-427f-9bab-9ed57e548c5d {
  
    grid-column : ~"1 / 3";
    
    }
    
  #block-yui_3_17_2_1_1689350752189_2879 #select-84584693-059c-4a6b-82f4-002531232b32 {
  
    align-self : end;
    grid-column : ~"3 / 5";
    
    }
    
  #block-yui_3_17_2_1_1689350752189_2879 #select-d3e38a4d-6524-4abd-a0b3-dfb0361a04cf {
  
    align-self : end;
    grid-column : ~"5 / 7";
    
    }
    
  #name-yui_3_17_2_1_1689350768418_2630 {
  
    grid-column-gap : 1.5vw;
    
    }
    
  // email
  
  #block-yui_3_17_2_1_1689350752189_2879 #email-yui_3_17_2_1_1689350768418_2631,
  
  // date
  
  #block-yui_3_17_2_1_1689350752189_2879 #date-38fd01b9-6309-4d5e-8a25-ef27953302b8,
  
  // time
  
  #block-yui_3_17_2_1_1689350752189_2879 #select-5f36f9ac-ded2-401c-8b3c-d9c6cb1dde1b
  
    {
    
      grid-column : ~"1 / 4";
      
      }
      
  // phone
  
  #block-yui_3_17_2_1_1689350752189_2879 #phone-bd70cb9f-365d-49a1-8c91-86fc1d5951d6,
  
  // guests
  
  #block-yui_3_17_2_1_1689350752189_2879 #select-ace7ed4e-3864-4adc-bd4a-543368bb7a54,
  
  // visited
  
  #block-yui_3_17_2_1_1689350752189_2879 #radio-cbb65afd-a254-4b88-85e3-92768565566a
  
    {
    
      grid-column : ~"4 / 7";
      
      }
      
  #date-38fd01b9-6309-4d5e-8a25-ef27953302b8 input {
  
    max-width : unset;
    
    }
    
  // end appointment enquiry multi-column form

Let us know how it goes.

15 hours ago, creedon said:

I think grid is going to be a better option. You've the additional comments floating over a bunch of fields and blocking them off.

This is not a full solution but some starter code. Anytime you mess with SS form styling is it always a challenge to get things to look good.

#block-yui_3_17_2_1_1689350752189_2879 .field-list {

  display : grid;
  grid-column-gap : 1.5vw;
  grid-template-columns : repeat( 6, 1fr );
  
  }

#block-yui_3_17_2_1_1689350752189_2879 .form-item {

  grid-column : 1 / -1;
  
  }

#block-yui_3_17_2_1_1689350752189_2879 .description {

  padding : 0;
  
  }

#block-yui_3_17_2_1_1689350752189_2879 #select-7e5087e2-19de-427f-9bab-9ed57e548c5d {

  grid-column : 1 / 3;
  
  }

#block-yui_3_17_2_1_1689350752189_2879 #select-84584693-059c-4a6b-82f4-002531232b32 {

  align-self : end;
  grid-column : 3 / 5;
  
  }

#block-yui_3_17_2_1_1689350752189_2879 #select-d3e38a4d-6524-4abd-a0b3-dfb0361a04cf {

  align-self : end;
  grid-column : 5 / 7;
  
  }

#name-yui_3_17_2_1_1689350768418_2630 {

  grid-column-gap : 1.5vw;
  
  }

/* email */

#block-yui_3_17_2_1_1689350752189_2879 #email-yui_3_17_2_1_1689350768418_2631,

/* date */

#block-yui_3_17_2_1_1689350752189_2879 #date-38fd01b9-6309-4d5e-8a25-ef27953302b8,

/* time */
  
#block-yui_3_17_2_1_1689350752189_2879 #select-5f36f9ac-ded2-401c-8b3c-d9c6cb1dde1b
  
  {
  
    grid-column : 1 / 4;
    
    }

/* phone */

#block-yui_3_17_2_1_1689350752189_2879 #phone-bd70cb9f-365d-49a1-8c91-86fc1d5951d6,

/* guests */

#block-yui_3_17_2_1_1689350752189_2879 #select-ace7ed4e-3864-4adc-bd4a-543368bb7a54,

/* visited */

#block-yui_3_17_2_1_1689350752189_2879 #radio-cbb65afd-a254-4b88-85e3-92768565566a

  {
  
    grid-column : 4 / 7;
    
    }

#date-38fd01b9-6309-4d5e-8a25-ef27953302b8 input {

  max-width : unset;
  
  }

Let us know how it goes.

Thanks so much for this super speedy reply, @creedon! I've tried pasting in your solution to my custom CSS area, but for some reason nothing is being applied. I've both left my original code, and deleted it to no avail. Any thoughts?

Quote

but for some reason nothing is being applied.

The issue was that SS uses LESS ( a CSS preprocessor ) for Design > Custom CSS. LESS messed up the syntax of the code.

I've updated my code post.

52 minutes ago, creedon said:

The issue was that SS uses LESS ( a CSS preprocessor ) for Design > Custom CSS. LESS messed up the syntax of the code.

I've updated my code post.

Ah, that makes more sense. It's applying, but the styles are out of whack. I'll keep playing with it—grids are new to me! 

Quote

It's applying, but the styles are out of whack.

Either way you go something is going to be out of whack. I think the upside using grids is better.

Check out A Complete Guide to CSS Grid.

For the radio buttons you might want to go with a flex display. Although by default I think you'll get some overlap and have to adjust spacing to get the overlap out.

That should fix the dropdown icon for the previous select menu.

On 7/25/2023 at 6:42 PM, creedon said:

Either way you go something is going to be out of whack. I think the upside using grids is better.

Check out A Complete Guide to CSS Grid.

For the radio buttons you might want to go with a flex display. Although by default I think you'll get some overlap and have to adjust spacing to get the overlap out.

That should fix the dropdown icon for the previous select menu.

Hi @creedon, I'm still trying to grasp grids, thank you so much for the link! I'm not sure how you were able to get the configuration in your screen shot. My fields are wonky sizes and I'm trying to figure out what needs to be updated in the code in order to correct it. I'm confused by the syntax, specifically the ~": 

      grid-column : ~"1 / 4";

As much as I've searched this handy article to figure out the use or how to play with it, I'm not sure where I'm going wrong.