Mobile version of my page

JeanACNOC
Excursionist
16 0 4

Hello!

 

I am not a fluent coder, so please help me. I want to optimize my site for mobile, but the images I use aren't great for both desktop and mobile. Any ideas how I can create a different version of the same page just for mobile view?

 

Thank you!

 

I have here an example of what I want to do.

Here's the website of my page in mobile https://www.globalacnoc.com/collections/products/products/acnoc-all-hybrid-essence-30-ml

Screen Shot 2021-06-25 at 4.03.16 AM.png

 

I want it to look bigger in mobile version like this so it's easier to read.

Screen Shot 2021-06-25 at 4.03.08 AM.png

KetanKumar
Shopify Partner
20378 2110 7661

@JeanACNOC 

update theme.liquid  this code

https://stackoverflow.com/questions/6397748/whats-the-point-of-meta-viewport-user-scalable-no-in-the...

let me know if any issue 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
JeanACNOC
Excursionist
16 0 4

If I put the code will it affect my desktop view or just the mobile view?

0 Likes
KetanKumar
Shopify Partner
20378 2110 7661

@JeanACNOC 

it work only mobile doesn't effect on desktop 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
JeanACNOC
Excursionist
16 0 4

Is this correct screenshot.png

KetanKumar
Shopify Partner
20378 2110 7661

@JeanACNOC 

no its wrong add this code

before </head>

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
JeanACNOC
Excursionist
16 0 4

screenshot (1).png

here it is but nothing happens on my my mobiel view of the page.

Screen Shot 2021-07-09 at 9.19.20 PM.png

KetanKumar
Shopify Partner
20378 2110 7661

@JeanACNOC 

can you please share theme.liquid code  

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
JeanACNOC
Excursionist
16 0 4
<!doctype html>
 
{% assign html_class = 'no-js' | append: ' ' | append: template %}
 
{% if template contains '.' %}
  {% assign template_classes = template | split: '.' %}
  {% assign template_classes_handled = template | replace: '.', '-' %}
  {% assign html_class = template_classes[0] | append: ' ' | append: template_classes_handled %}
{% endif %}
 
{% if template contains '/' %}
  {% assign template_classes = template | split: '/' %}
  {% assign template_classes_handled = template | replace: '/', '-' %}
  {% assign html_class = template_classes[0] | append: ' ' | append: template_classes_handled %}
{% endif %}
 
{% assign page_title_handle = page_title | handle %}
{% assign html_class = html_class | append: ' ' | append: page_title_handle %}
{% assign template_type = template %}
 
{% if template contains '.' %}
  {% assign template_parts = template | split: '.' %}
  {% assign template_type = template_parts[0] %}
{% endif %}
 
<!-- Proudly powered by Shopify - https://shopify.com -->
 
<html class="{{ html_class }}" lang="{{ shop.locale }}">
 
  <head>
    
    <!-- Global site tag (gtag.js) - Google Analytics -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
 
  gtag('config', 'G-ZFHR0LYLTB');
</script>
    
    <meta name="facebook-domain-verification" content="9com2r5sidkkm9qlweimj64wucb91r" />
 
    {% render 'meta', template_type: template_type %}
    {% render 'meta-social', template_type: template_type %}
    {% render 'preload-fonts' %}
 
    {{ content_for_header }}
 
    {% if template_type == 'index' or template_type == 'product' %}
    {% endif %}
 
    {{ 'theme-vendor.css' | asset_url | stylesheet_tag }}
    {{ 'theme.css' | asset_url | stylesheet_tag }}
    {{ 'theme-custom.css' | asset_url | stylesheet_tag }}
    {{ 'fonts.css' | asset_url | stylesheet_tag }}
 
    {% render 'lazysizes', cdn: cdn %}
 
    {% render 'theme-js-config', template_type: template_type %}
    
    {{ 'theme-vendor.js' | asset_url | script_tag }}
    {{ 'shopify_common.js' | shopify_asset_url | script_tag }}
 
    {% if template contains 'customers' %}
      {{ 'customer_area.js' | shopify_asset_url | script_tag }}
    {% endif %}
 
  <!--Gem_Page_Header_Script-->
{% include 'gem-app-header-scripts' %}
<!--End_Gem_Page_Header_Script-->
 
  {% include "manychat-header" %}
 
 
{{ shop.metafields.loox["global_html_head"] }}
    
    <script type="text/javascript" async="" src="https://dashboard.easycall.io/js/widgets/widget.min.js?widget_id=1660"></script>
    
 
{% include 'pagefly-header' %}
    
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    
 </head> 
 
  <body>
 
    <div id="loading">
      <div class="spinner"></div>
    </div>
 
    {% render 'facebook-sdk' %}
 
    {% section 'header' %}
 
    <div id="app-body">
      <div id="app-body-inner">
        {{ content_for_layout }}
      </div>
    </div>
 
    {% section 'footer' %}
 
    <div id="overlay-background"></div>
 
    {{ '/services/javascripts/currencies.js' | script_tag }}
    {{ 'jquery.currencies.min.js' | asset_url | script_tag }}
    {{ 'theme.js' | asset_url | script_tag }}
    {{ 'theme-custom.js' | asset_url | script_tag }}
 
    <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
 
    <script>
      (function ($) {
        $(document).ready(function () {
          var loading = $('#loading');
          loading.css({
            'opacity': '0',
            'visibility': 'hidden'
          });
          setTimeout(function () {
            loading.hide();
          }, 1000);
        });
      }(jQuery.noConflict()));
      (function ($) {
        var meta = $('head meta[name="viewport"]');
        $("input, select, textarea").on('touchstart', function() {
          meta.attr('content', 'width=device-width, initial-scale=1, user-scalable=0');
        });
        $("input, select, textarea").on('touchend', function() {
          setTimeout(function () {
            meta.attr('content', 'width=device-width, initial-scale=1, user-scalable=1');
          }, 100);
        });
      }(jQuery.noConflict()));
    </script>
 
  <!--Gem_Page_Footer_Script-->
{% include 'gem-app-footer-scripts' %}
<!--End_Gem_Page_Footer_Script-->
 
{{ shop.metafields.loox["global_html_body"] }}
    
    <script src="//code.tidio.co/kb2ctxbu2jcvs7rvobldzha1zciv8qit.js" async></script>
    
    
    <script 
            async 
            type="text/javascript" 
            data-api-key="pubkey-1307eZ6LqT19QeVUfno43L2E4xZ4Kp" 
            id="stamped-script-widget" 
    </script>
    
    {%- if page.handle == 'reviews' -%}
    <style>
      .stamped-fa-star, .stamped-fa-star-o, .stamped-fa-star-half-o {
        color: #f99119;
      }
    </style>
    {%- endif -%}
 
</body>
</html>

 

KetanKumar
Shopify Partner
20378 2110 7661

@JeanACNOC 

that code is something is missing 

are you a use app for page builders?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes