Return to previous page

Customization in desktop mode will look strange in mobile mode

This topic has 4 replies, 2 voices, and was last updated 2 years, 5 months ago ago by Olga Barlow

Jason

Participant

June 8, 2022 at 03:39

Hi there

I customed the Single Product Page today. And I found 2 issue of the web-site page in mobile mode.
1. All the parameters customization in desktop mode are exactly the same as in mobile mode, which can’t make others have different browsing experience in desktop mode and mobile mode, and even some settings will make the page look strange in mobile mode. (Refer to IMG from 15 to 18)
2. If I use the AMP XStore plugin to set up AMP pages for mobile browsing, I cannot customize the specific position, order, font color, etc. of some modules in the pages as you can in Appearance —> Customize. For example, the proportion of the page occupied by a single product is too large to be adjusted. And there will be problems such as inconsistent width of the header and footer. (Refer to IMG from 19 to 22)

First, after customizing the Padding of Section2 in Single Product Builder in desktop mode, I found that it will sync to mobile mode. (15.png)
Then, I tried to adjust the order of Short Description and Add to Cart in mobile mode. It would also affect the order in desktop mode. (16.png)
After that, I wanted to verify if this happens with Elementor and WPBakery Page Builder. Well, same things happened. It looks weird in mobile mode. (17.png & 18.png)

I think that is why we need AMP XStore plugin for a batter browsing experience. And I believe this plugin will make all custom parameters in desktop mode adaptive to mobile mode.
However, it looks like I cannot customize the specific position, order, font color, etc. of some modules in the pages as you can in Appearance —> Customize. Only some overall appearance and some features can be customized, and specific customization options are very limited. (19.png)
When I use my phone to browser my web-site, I realize that the product size is too large in the shop page. It cannot automatically adjust the size of the product display in the phone screen, and it should be correct to display 2 products in one row. (22.jpg)
In addition to that, I clicked on a single product page at random and I noticed that the larger size images inserted in the detailed description were forced to be narrower instead of showing a correctly scaled image. And there is no option to adjust every image size in product description under AMP Version. Not even Elementor nor WPBakery Page Builder can do that. (21.jpg)
At last, I return to the shop page, trying to force scaling of the browser to show the full page. I find that the width of the header does not match the footer, and the width of the header is clearly too short, yet this plugin cannot adjust this either. (20.jpeg)

Overall, after I customize the page display in desktop mode, the page becomes very strange when viewed on mobile and cannot be adjusted separately for mobile mode without affecting the original customization parameters in desktop mode. Please tell me what to do now. Thank you.

Regard

Please, contact administrator
for this information.

#325334 Copied Theme version: 8.1.6 WooCommerce version: 6.0

3 Answers

Olga Barlow

Support staff

June 9, 2022 at 11:55

Hello,

First of all, mobile preview buttons are just previews, it does not mean that the options that you set when you are in the mobile preview that these options apply for the mobile only, nope. Options apply for the mobile if it has a desktop/mobile switcher like this one https://prnt.sc/GI7BEYKJSyD2
The computed box does not have this switcher, so, the settings you set there are applied for both desktop and mobile. In this case use not px units but vw for example. Also, I will pass the request to add that switcher for the mobile/desktop for the computed box of the single product.

The same for the WPBakery page builder. Go to Theme Options > General > enable WPBakery Responsive CSS Box-Module option to enable responsive settings for that module https://prnt.sc/JDo6o-oMftuQ

Provide us with WP Dashboard access to your site to check the AMP version issues.

Regards

#325492 Copied

Jason

Participant

June 9, 2022 at 12:28

Hi,

Thank you for your guidance. I will try to apply options via desktop/mobile switcher.
I have added an Administrator user role for you, please help me check the AMP issues.

Regards

Please contact administrator
for this information.

#325500 Copied

Olga Barlow

Support staff

June 9, 2022 at 17:24

Hello,

Thank you. I checked your site for the mobile resolution and don’t see any issues with the mobile header, shop page grid or single product image https://prnt.sc/NU9cscvSOprW

What mobile device do you use and what browser?

Regards

#325530 Copied
Tagged: customization, desktop, mobile, strange, themes, woocommerce, wordpress
Viewing 4 results - 1 through 4 (of 4 total)