how can I RESIZE the box in Gift Registry?

Hi!
Appointment Slots an Gift Registry look the same so I tried the CSS for 2 columns in Gift Registry and it worked well.

Please tell me how can I RESIZE the box in Gift Registry???
I want to make it smaller or make it fit.

Thank you in advance.

I see that the Gift registry on your form is now split into two columns. Do you mean to resize the checkbox or width of the item displayed? Could you provide us with more information on your requirement so that we can guide you in the right direction? If you can provide us with the screenshot, it would be helpful.

We will wait for your response. Thank you! 

Please refer to the thread below to attach a screenshot to your forum post.

http://www.jotform.com/answers/277033

Thank you! 

Hi Sir Kiran!
Thank you for the kind reply.
Here's the photo and URL you need.

https://form.jotform.me/60811253594455

I tried to explore other CSS code given by other support team representative and I'm glad for it.

And here's the code I am currently using on the photo above.

#checklist li:nth-child(odd) {
  float: left;
  width: 20%;
  border-right: 1px solid lightgray;
  box-sizing: border-box;
}
#checklist li:nth-child(even) {
  float: right;
  width: 20%;
  position: relative;
  top: -1px;
  box-sizing: border-box;
 border-left: 1px solid lightgray;
}

Now, I have 3 things that need to be fixed, please help me Sir.

1. I hope to make the boxes smaller or fit.
Perhaps, tell me how to change the box HEIGHT and WIDTH.

2. As shown on the photo, some border lines are broken. 

3. The time slots are not in order.
I hope to have a perfect sequence like for example below,

21:00 Sun    05:00 Mon    10:30 Mon

21:30 Sun    05:30 Mon    17:00 Mon

22:00 Sun    08:00 Mon    17:30 Mon

22:30 Sun    08:30 Mon    18:00 Mon

23:00 Sun    09:00 Mon    18:30 Mon

04:00 Mon    09:30 Mon    19:00 Mon 

04:30 Mon    10:00 Mon    20:30 Mon etc...

***If all possible, I hope to have 24 rows and at least 7 columns.

I saw a sample photo for this on another thread...Please see the photo below.
Here's its URL http://www.jotform.com/answers/776473-Custom-CSS-for-columns-in-Ticket-Purchases-widget

CSS codes for the photo above is on the following...

#checklist li:nth-child(-n+7) {
  position: relative;
  left: 0;
 width: 50%;
 border-right: 1px solid lightgray;
 box-sizing: border-box;
}
#checklist li:nth-child(n+8) {
position: absolute;
right: 0;
width: 50%;
box-sizing: border-box;
  border-left: 1px solid lightgray;
}
#checklist li:nth-child(8){
   top:0;
}
#checklist li:nth-child(9){
   top:48px;
}
#checklist li:nth-child(10){
   top:96px;
}

#checklist li:nth-child(11){
   top:144px;
}
#checklist li:nth-child(12){
   top:192px;
}
#checklist li:nth-child(13){
   top:240px;
}  

I've explored the code above and unfortunately, it has 2 columns only and couldn't show the other time slots...
It's almost perfect but I couldn't figure it out how to make more than 2 columns with the code above.

I am really hoping to receive any help from you Sir.
Please bear with me.
Thank you soooo much in advance!

I have cloned your form and erased all the CSS codes in the Custom CSS tab of the Gift Registry widget and added the CSS codes below instead.

body{

width: 101% !important;

height: 900px !important;

}

.checklist{

border: none !important;

}

li.list-item label {

    font-size: 11px !important;

    width: 60px !Important;

}

#checklist li:nth-child(n+1):nth-child(-n+121) {

    width: 14.29%;

    border: 1px solid lightgray;

    box-sizing: border-box;

    height: 50px !important;

}

.items-left {

    float: left;

    font-style: italic;

    font-size: 12px;

    color: #68B948;

    font-weight: 700;

}

#checklist li:nth-child(n+19):nth-child(-n+36) {

   position: relative !important;

   left: 84.560px !important;

   top: -900px !important;

}

#checklist li:nth-child(n+37):nth-child(-n+54) {

   position: relative !important;

   left: 169.12px !important;

   top: -1800px !important;

}

#checklist li:nth-child(n+55):nth-child(-n+72) {

   position: relative !important;

   left: 253.68px !important;

   top: -2700px !important;

}

#checklist li:nth-child(n+73):nth-child(-n+90) {

   position: relative !important;

   left: 338.24px !important;

   top: -3600px !important;

}

#checklist li:nth-child(n+91):nth-child(-n+108) {

   position: relative !important;

   left: 422.8px !important;

   top: -4500px !important;

}

#checklist li:nth-child(n+109):nth-child(-n+121) {

   position: relative !important;

   left: 507.36px !important;

   top: -5400px !important;

}

Here is the clone version of your form where I have applied the code above.

https://form.jotform.com/60831097286966

Let us know if you need any further assistance. Thank you.

Hi Sir Mike_G!
WOW! I can't thank you enough!!!
That's a tough job for me!
A millions thanks for making it possible!!!

GOD bless JotForm Support Team!

You are welcome. Glad to see that the solution provided by our colleague Mike_G worked for you and we thank you for kind words.

Please do not hesitate to get in touch with us if you need any further assistance. We will be happy to help. 

Thank you for using JotForm!!