Configurable List unresponsive on mobile

  • Profile Image
    rahulchavan34
    Asked on December 12, 2020 at 03:41 AM

    Hello,

    I am using a widget "Configurable List" and I have just 2 fields as show in the screenshot below. I would like the width of the fields to be around 140px and i have also added in the CSS for it, but it doent show the change in mobile screen. On normal desktop screen i want it to be around 300px and this shows correctly on larger screens, but on mobile its not. Is there something wrong with the CSS?

    1607762472_5fd482287c4c9_IMG_0190.jpg

  • Profile Image
    Kenneth_C
    Answered on December 12, 2020 at 04:17 AM

    Thank you for reaching support,

    After customizing the form, here is how it looks:

    1607764525_5fd48a2d24281_i1.png

    If that is acceptable, then insert these codes to the Configurable List Widget's Custom CSS Area:

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

    input.translatable {

      width: 100% !important;

    }

    }

    1607764608_5fd48a806c256_y1.png

    I hope that helps.

    Best.


  • Profile Image
    rahulchavan34
    Answered on December 12, 2020 at 06:47 AM

    Hello,

    It works for mobile screens, but for desktop screen i would like to be widespread with width 300px. How can i keep the CSS above for mobile screen and inject a new CSS for desktop screen? Could you provide me the CSS for desktop screens?

  • Profile Image
    rahulchavan34
    Answered on December 12, 2020 at 07:56 AM

    hello, could you provide me the css for both the screens sizes

  • Profile Image
    rahulchavan34
    Answered on December 12, 2020 at 08:25 AM

    hello,

    i solved it myself thanks