Why isn't my website adjusting correctly on mobile view?

tom143 · ‎03-20-2023

Hello,

My website when viewed on mobile looks nothing like the preview viewed in the Shopify customize page.

I've tried a number of mobiles and they all just look like poorly scaled down desktop versions, instead of the mobile version that I can see in the preview.

Any help would be greatly appreciated!

Tom

BSS-Commerce · ‎03-21-2023

Hi @tom143

We checked and saw that your meta tag with name="vfiewport" probably has the wrong name attribute (the correct would be name="viewport").

This can cause your website to not display properly on mobile devices. You can edit them in the theme.liquid file.

We hope the above suggestions can help you.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.

B2B Solution & Custom Pricing | Product Labels by BSS

Need help from our expert? Kindly share your request with us via community@bsscommerce.com

BSS Commerce - Full-service eCommerce Agency

View solution in original post

GemPages · ‎03-20-2023

Hi @tom143

Can you give me the link of the page (with pass if your store password is enabled), so I can check it?

Kind & Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business

- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

tom143 · ‎03-21-2023

https://vapen.uk/

Thank you!

BSS-Commerce · ‎03-21-2023

Hi @tom143

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.

B2B Solution & Custom Pricing | Product Labels by BSS

Need help from our expert? Kindly share your request with us via community@bsscommerce.com

BSS Commerce - Full-service eCommerce Agency

tom143 · ‎03-21-2023

Thank you - https://vapen.uk/

GemPages · ‎03-21-2023

Hi @tom143

I hope this solution can help you. You can follow these steps:

1. Go to Online Store -> Theme -> Edit code https://prnt.sc/XkUYXZPnym_E

2. Open your theme.liquid file.
3. Paste the below code after <head> tag

<meta name="viewport" content="width=device-width,initial-scale=1">

Kind & Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business

- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

BSS-Commerce · ‎03-21-2023

Hi @tom143

We checked and saw that your meta tag with name="vfiewport" probably has the wrong name attribute (the correct would be name="viewport").

This can cause your website to not display properly on mobile devices. You can edit them in the theme.liquid file.

We hope the above suggestions can help you.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.

B2B Solution & Custom Pricing | Product Labels by BSS

Need help from our expert? Kindly share your request with us via community@bsscommerce.com

BSS Commerce - Full-service eCommerce Agency

tom143 · ‎03-22-2023

This solved it, thank you so much!

Huzaifa123 · ‎07-09-2023

If your website on Shopify is not displaying properly on mobile devices and appears as a scaled-down desktop version instead of the mobile version you see in the preview, there are a few things you can check and try to resolve the issue:

1. Mobile responsiveness: Ensure that your website theme is designed to be responsive, meaning it adapts to different screen sizes and devices. Check if your theme has mobile responsiveness built-in or if there are specific mobile settings you need to configure.

2. Mobile preview: Make sure you are using the correct mobile preview mode in the Shopify customize page. Often, there are options to switch between desktop, tablet, and mobile views. Verify that you are previewing the correct mobile version of your website.

3. Clear cache: If you have made recent changes to your website, it's possible that your mobile device is still loading the old version from the cache. Clear the cache on your mobile device and try reloading the website to see if it reflects the latest changes.

4. Test on multiple devices: As you mentioned trying on different mobiles, it's good to test your website's responsiveness on multiple devices to see if the issue persists consistently across different devices. This can help determine if the problem is specific to certain devices or if it's a broader issue.

5. Contact theme support: If none of the above steps resolve the problem, reach out to the support team of your Shopify theme. They should be able to provide specific guidance or troubleshooting steps tailored to your theme and its mobile compatibility.

By following these steps, you should be able to identify the cause of the issue and work towards resolving it. For more information click on this https://yardgearsguide.com/

Why isn't my website adjusting correctly on mobile view?