Make configurable list widget responsive only when using mobile browser

  • Profile Image
    Asked on October 07, 2018 at 06:44 PM

    Hi, Can you just copy/past what the correct code would be to make the configurable list workable "on all devices"? (The code to make it mobile compatible makes the list vertical, but I want it to be horizontal on a laptop to make it more compact and then stack vertically only when necessary, eg. on a mobile device).

    I tried a few times with the instructions above, but it's not working and not sure if I'm just misinterpreting something.

    Would be very helpful if you could do that.


    This is a re-post of a comment on How to Make the Configurable List Widget Mobile Responsive

  • Profile Image
    Answered on October 07, 2018 at 08:07 PM

    This is actually what the user guide mentioned.

    How to make it responsive in all devices including desktop?
    If you want to make the configurable list widget responsive in all devices, 
    1. Remove the first line @media screen and (max-width:480px){ and the last line found in the above CSS codes (text in red).
    iframe[src*="configurableList"] {width: 100% !important;}

    So if you only need it to be responsive specifically on mobile browsers only, do not apply the steps from the instruction mentioned.

  • Profile Image
    Answered on October 07, 2018 at 08:08 PM

    You can test my test form

    It should have responsive design only if using mobile browser.