Mobile Styling Issue

Resolved mmk175
(@mmk175)

2 years, 7 months ago

The side options appear broken when viewed on mobile.

I can’t attached a screenshot but my phone is a (Sony Xperia 5 IV (XQ-CQ54) )

I can’t seem to do anything with the in plugin styling.

The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

Iván Sosa
(@ivansosa)

2 years, 7 months ago
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 2 years, 7 months ago by Iván Sosa.
Thread Starter mmk175
(@mmk175)

2 years, 7 months ago

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.

Iván Sosa
(@ivansosa)

2 years, 7 months ago

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!

Thread Starter mmk175
(@mmk175)

2 years, 7 months ago

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

Iván Sosa
(@ivansosa)

2 years, 7 months ago

Hi there,

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

Have a nice day!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Mobile Styling Issue’ is closed to new replies.

Tags