CSS Layout changes

The issue lies with Lucky Wheel and the “enable mobile” button, and you need to contact their support, as it triggers its own CSS dynamically for different screen sizes. This means it inserts CSS classes to trigger how the Lucky Wheel displays, but for some reason, it is inserting the wrong CSS class sometimes for Desktop and/or not inserting the class for mobile. That is why it displays full-screen for Desktop, other times it doesn’t, and the same for mobile.

You need to contact them to help sort out this display problem. Here is the explanation of the problem with screenshots:

The plugin is adding this CSS class “wlwl_lucky_wheel_content_mobile” that triggers the full-width display on the desktop that overrides these CSS classes settings “wlwl_lucky_wheel_content lucky_wheel_content_show” for the desktop. Sometimes, it doesn’t add this CSS class “wlwl_lucky_wheel_content_mobile” to display the correct layout for mobile, thus displaying the desktop layout on mobile.

This has been tested on different screen sizes and browsers, from 27-inch Mac to 13-inch Macbook, iPhone 13 Pro Max, and Chrome and Safari browsers. Please note different time stamps for mobile screenshots to indicate that it is displayed correctly and later on when it doesn’t display correctly. The cache for the website has been cleared, which resolves some of the desktop displays, but it didn’t resolve the mobile display. The “enable for mobile” button has been disabled and enabled again, and it still didn’t correct the display for mobile. Please note that after each disable and enable, the cache was cleared.

Sometimes, if the language is changed, then it inserts the mobile class and then triggers the full-width display. However, if the browser is hard refreshed for the same language (that displayed the full-width) then it resorts back to the desktop display.

Here are the screenshots:
1. Safari browser on iPhone displays the mobile version for 3 different langauge changes (1st german, french, lastly english).
2. The Chrome Browser indicates that the class has been added for mobile, on the desktop inspector tool.
3. Chrome app on iPhone showing the display correctly.
4. Safari browser (both on 27-inch and 13-inch Macs) show that the mobile class is being added.
5. Safari browser on iPhone displays the desktop version of the display.
6. Chrome browser on iPhone resorted back to dekstop display.