How can I get the image and Configurable List widget on the same row on mobile?

On my form "NextGen-Free Resources," I am unable to get the image (of books) to display on the left side (or same row) of Configurable List widget when viewed on a mobile device.

They are not very wide. I have the shrink feature selected on both the image and widget.

Is there a work around?

Hi @Wyce Ghiacy, thank you for reaching out to us.

You can add this custom CSS code to appear the image and the configuration list in the same line in mobile view:

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape)

{li#id_45, li#id_35,

li#id_47, li#id_44,

li#id_46, li#id_46,

li#id_48, li#id_42,

li#id_37{

    width: 50% !important;

}}

Here is a guide on how to inject custom CSS codes: How-to-Inject-Custom-CSS-Codes

Let us know if this works for you.

Hi, could you please update the CSS code: 

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape)

{li#id_45, li#id_35,

li#id_47, li#id_44,

li#id_46, li#id_46,

li#id_48, li#id_42,

li#id_37{

    width: 50% !important;

}}

Let us know if this works for you.

You're very much welcome.

Let us know if you need further assistance.