Quantity Gift Registry widget: Mobile and Desktop view.

Hello Jotform Support, I am using the Quantity Gift Registry widget in my form (URL: https://form.jotform.com/232775315107151) and I want to have it scale properly for both mobile devices and desktop screens.

Currently, the item descriptions overlap the remaining quantity text on mobile devices, and my attempts to fix this with custom CSS have not worked.

Could you please assist me with CSS or any other solution that allows the Quantity Gift Registry widget to display responsively—scaling up on desktop and scaling down on mobile—without overlapping or layout issues?

Thank you for your help!

Hi MCC,

Thanks for reaching out to Jotform Support. I'm an AI assistant. I'll do my best to help you until someone from the support team is available.

To fix the Quantity Gift Registry widget display issue on mobile and desktop, you can use responsive CSS to adjust the layout. Typically, setting max-widths and using media queries to scale the widget differently on mobile and desktop helps prevent overlapping.

If you want, I can provide you with a sample CSS snippet tailored for your form to try out.

Let me know if you'd like that.

Give it a try and let us know how it goes.

Best regards,
Jotform Support

No, I'll wait for the support team as your AI has made several attempts to fix this and all have been unsuccessful.

Hi MCC,

One of our Support Team members will take it from here to follow up shortly.

Best regards,
Jotform Support

Hi MCC,

For this to work properly, we will need to first, remove the current CSS in the widgets, replace it, and then inject CSS to the form, that's easy let me show you how:

1. First copy the code below:

@media only screen and (max-width: 480px) {

.checklist label {

    width: 70% !Important;

}

2. In Form Builder, select your widget and on the right side of it, click on the Wand icon.

3. Then, under the Custom CSS tab, remove the existing code and paste the one I provided.

4. Now, click on Update, and you’re all set.

Do this for all the Quantity Gift Registry widget, and now let's add some CSS to the form, let me show you:

1. Copy the code below:

@media only screen and (max-width: 480px) {

  #id_29, #id_33, #id_42, #id_49{

    width: 100% !important;

    padding-left: 0% !important;

    padding-right: 0% !important;

  }

}

2. Then, in Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Take a look at the screencast below to see my results:

Desktop:

You can also check out our guide about How to Inject Custom CSS Codes for more information. You can also clone my form for reference.

Give it a try and let us know how it goes.