Mobile Styling Issue

Hi there,

Try to add this CSS rule in Appearance > Customize > Additional CSS:

@media only screen and (max-width: 768px) {
    .yith-wapo-container .yith-wapo-addon .options {
        grid-template-columns: repeat(1, minmax(0, 100%) ) !important;
    }
}

Let us know if that did the trick.

• This reply was modified 1 year, 3 months ago by Iván Sosa.

Hi @ivansosa

That did the trick.

I enjoy getting educated on CSS while getting support for this so if you can enlighten me further as to how this fixed it I’d greatly appreciate it.

From what I can see you have told the CSS to expand the container for that specific section, correct?

The use of the code “yith-wapo-container” means it wont affect any other additional CSS, correct?

Thanks again for your help.

Hi there,

Exactly, by default, the plugin extends the block to a maximum of 50%.
On the other hand, with the CSS rule, we apply 100%.

Anyway, it is something that we have detected as a bug in the plugin and we will add the correction in the next update.

Have a great day!

@ivansosa Thanks for the update. In that case will I need to remove the additional CSS after you fix the bug?

Hi there,

Yes, you can remove it if you already updated the plugin to the latest version 4.0.2.

Have a nice day!