Modal toggle background image responsive

[Lyser]

Hello,
i have a image (350 x 197 px) on a modal toggle and i would like to know how to make it responsive.

Here is the toggle image on SM width :

when i go XS width, the image stay the same width instead shrinking with the side borders :

What i would like is this :

How to do that ?

[prakash_s]

Hello @Lyser,

Thanks for writing to us.

To make it responsive you need to set the background size as a “cover”. You can set it from the Modal element. Please have a look at the given screenshot below.

In case if it doesn’t work for you, please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin level username and password
• Exact Page URL

You can find the Secure Note button at the bottom of your posts

Thanks

[Lyser]

Thx @prakash_s but the image options for toggle seems to be different from your screenshot :

[ruenel]

Hello @Lyser,

In your Grid layout, you were using pixels. Be advised that when using pixels, it will always be the same exact pixel size in whatever screen size. It is best that you use em or fr for the Grid Layout.

The toggle image will follow the width of the cells thus will have to adjust responsively. To be more familiar with the grid, please check this out:

• https://theme.co/docs/grid#setting-up-your-first-grid-layout

Or check out this video tutorial:

Hope this helps.

[Lyser]

Thx ruenel, i tried doing same thing with a image element, the shrink works fine, but it’s not working with the modal toggle, can a modal toggle image shrink ?

[ruenel]

Hello @Lyser,

In your modal element settings, Modal > Toggle, set the child placement to column.

And then in the Graphic Image settings, set the maximum width to 100%.

Hope this helps. Kindly let us know how it goes.

[Lyser]

Aaah yes it works, thx you very much @ruenel ! =)

[tristup]

Hi @Lyser,

Glad that we are able to help you.

Thanks