Jump to content

Move date and time form fields to be side by side

By Gusssssy, in Site Design & Styles

Go to solution Solved by katycarlisle,

Recommended Posts

  • Replies 6
  • Views 124
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Gusssssy
Gusssssy

Again THANK YOU!!! @katycarlisle I have one final bug that I can't fix (then I'll leave you in peace i promise!) - The date and time icons for these fields don't look right when viewing on my phone, l

katycarlisle
katycarlisle

Yes I think you have indeed spotted a bug, it seems to be specific to that form design option (it doesn't happen if you use the pill style fields for example). I've tested and am able to replicate acr

Gusssssy
Gusssssy

oh wow, you're the best @katycarlisle you've fixed it - can't thank you enough. You've been amazing and an absolute killer Squarespace queen. I've managed to tweak my project exactly how I designed it

Posted Images

  • Solution
katycarlisle Level 11

katycarlisle

Posted
  • Solution
Posted

This will align the fields except for on mobile (when they would be too squashed together). You'll need to put a space in the description for the Time field to make it line up with the Date field.  

/* Put Date and Time fields on one line */

@media screen and (min-width: 575px) {
.form-wrapper .field-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
}

.email, .name {
  flex: 1 0 100%;  
}

.date, .time {
  flex: 1 1 calc(~"50% - 5px");
}
    
}

 

Oh hey! I'm Katy Carlisle, a web designer and trainer who goes by the name SQSP Queen. My pronouns are she/her and I'm based on Vancouver Island in BC 🍁 I've been using Squarespace since 2013, and work mainly with non-profits or freelancers on projects that do good. I love answering questions about Squarespace and don't expect anything in return, but if you do want to say thanks, feel free to buy me a coffee ☕

katycarlisle Level 11

katycarlisle

Posted
Posted
2 hours ago, Gusssssy said:

The date and time icons for these fields don't look right when viewing on my phone

Yes I think you have indeed spotted a bug, it seems to be specific to that form design option (it doesn't happen if you use the pill style fields for example). I've tested and am able to replicate across multiple sites so will report it to customer support and would suggest you do the same!

In the meantime, a workaround is to adjust the field padding for the form under Site Styles > Forms. If you don't want to adjust the vertical padding, click on the three dots and then you can adjust the Left & Right padding. I'm also on a Google Pixel and found 20px worked but you can play around and increase it more to be on the safe side if needed.

image.png.90ede30ebf0f3195b9def80cb486ec5d.png

Oh hey! I'm Katy Carlisle, a web designer and trainer who goes by the name SQSP Queen. My pronouns are she/her and I'm based on Vancouver Island in BC 🍁 I've been using Squarespace since 2013, and work mainly with non-profits or freelancers on projects that do good. I love answering questions about Squarespace and don't expect anything in return, but if you do want to say thanks, feel free to buy me a coffee ☕

Gusssssy Level 4

Gusssssy

Posted
  • Author
Posted

oh wow, you're the best @katycarlisle you've fixed it - can't thank you enough. You've been amazing and an absolute killer Squarespace queen. I've managed to tweak my project exactly how I designed it off the back of the code you gave me. Couldn't have finished this project without you - THANK YOU!!! I hope Squarespace are paying you for this advice. Have an amazing weekend x

katycarlisle Level 11

katycarlisle

Posted
Posted

Haha it would be lovely if they paid me but no, I just do it to help and because I enjoy the challenge 😊Glad it was useful!

Oh hey! I'm Katy Carlisle, a web designer and trainer who goes by the name SQSP Queen. My pronouns are she/her and I'm based on Vancouver Island in BC 🍁 I've been using Squarespace since 2013, and work mainly with non-profits or freelancers on projects that do good. I love answering questions about Squarespace and don't expect anything in return, but if you do want to say thanks, feel free to buy me a coffee ☕

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources