Mobile version show on PC Options

[creepybits]

Hi all.

I'm new to this forum and to HTML. I'm basically just making a personal website for a specific purpose, and are learning as I go.

I had the website at one host at first, and everything lokked okay there. Now I moved to another host and the website shows in mobile mode on my PC (or at least one part of it). It's a type of media carousel, and on PC it's supposed to be small and neat arrows on left and right side, and on mobile it's designed for "swapping" right or left. I don't understand what's wrong. I only migrated the website from one host to another, and no changing of the code. If I download the page and view it locally it shows just fine.

I'm sorry if this is a stupid question, but I would be really thankful if anyone could tell me what's wrong.

This is the code for when website show on PC

CODE

<div class="desktop-arrows user-items-list-carousel__arrow-wrapper user-items-list-carousel__arrow-wrapper--left" style="
          grid-gap: 100px;
          margin-left: 2vw;
        ">
<div class="user-items-list-carousel__arrow-container" style="

              padding: 0% calc(0% + 0%) 10% 0;

          ">
<div class="user-items-list-carousel__arrow-positioner" data-media-aspect-ratio="1:1">
<div class="user-items-list-carousel__arrow-icon-holder"><button aria-label="

      Previous


  " class="user-items-list-carousel__arrow-button user-items-list-carousel__arrow-button--left preFade fadeIn" data-animation-role="button" style="transition-timing-function: ease; transition-duration: 0.9s; transition-delay: 0.429412s;"></button>

<div class="user-items-list-carousel__arrow-icon-background
    user-items-list-carousel__arrow-icon-background-area
  "></div>
<button aria-label="

      Previous


  " class="user-items-list-carousel__arrow-button user-items-list-carousel__arrow-button--left preFade fadeIn" data-animation-role="button" style="transition-timing-function: ease; transition-duration: 0.9s; transition-delay: 0.435294s;"><svg class="user-items-list-carousel__arrow-icon" viewBox="0 0 44 18" xmlns="http://www.w3.org/2000/svg"> <path class="user-items-list-carousel__arrow-icon-foreground
        user-items-list-carousel__arrow-icon-path" d="M9.90649 16.96L2.1221 9.17556L9.9065 1.39116"></path> <path class="user-items-list-carousel__arrow-icon-foreground
        user-items-list-carousel__arrow-icon-path" d="M42.8633 9.18125L3.37868 9.18125"></path> </svg></button></div>
</div>
</div>
</div>

<div class="desktop-arrows user-items-list-carousel__arrow-wrapper user-items-list-carousel__arrow-wrapper--right" style="
          grid-gap: 100px;
          margin-right: 2vw;
        ">
<div class="user-items-list-carousel__arrow-container" style="

              padding: 0% 0 10% calc(0% + 0%);

          ">
<div class="user-items-list-carousel__arrow-positioner" data-media-aspect-ratio="1:1">
<div class="user-items-list-carousel__arrow-icon-holder"><button aria-label="


      Next

  " class="user-items-list-carousel__arrow-button user-items-list-carousel__arrow-button--right preFade fadeIn" data-animation-role="button" style="transition-timing-function: ease; transition-duration: 0.9s; transition-delay: 0.441176s;"></button>

<div class="user-items-list-carousel__arrow-icon-background
    user-items-list-carousel__arrow-icon-background-area
  "></div>
<button aria-label="


      Next

  " class="user-items-list-carousel__arrow-button user-items-list-carousel__arrow-button--right preFade fadeIn" data-animation-role="button" style="transition-timing-function: ease; transition-duration: 0.9s; transition-delay: 0.447059s;"><svg class="user-items-list-carousel__arrow-icon" viewBox="0 0 44 18" xmlns="http://www.w3.org/2000/svg"> <path class="user-items-list-carousel__arrow-icon-foreground
        user-items-list-carousel__arrow-icon-path" d="M34.1477 1.39111L41.9321 9.17551L34.1477 16.9599"></path> <path class="user-items-list-carousel__arrow-icon-foreground
        user-items-list-carousel__arrow-icon-path" d="M1.19088 9.16982H40.6755"></path> </svg></button></div>
</div>
</div>
</div>

And this is the code for mobile

CODE

<div class="mobile-arrows"><button aria-label="

      Previous


  " class="mobile-arrow-button mobile-arrow-button--left preFade" data-animation-role="button" style="transition-timing-function: ease; transition-duration: 0.9s; transition-delay: 0.452941s;"></button>

<div class="user-items-list-carousel__arrow-icon-background
    mobile-arrow-icon-background-area
  "></div>
<button aria-label="

      Previous


  " class="mobile-arrow-button mobile-arrow-button--left preFade" data-animation-role="button" style="transition-timing-function: ease; transition-duration: 0.9s; transition-delay: 0.458824s;"><svg class="mobile-arrow-icon" viewBox="0 0 24 14" xmlns="http://www.w3.org/2000/svg"> <path class="user-items-list-carousel__arrow-icon-foreground
        mobile-arrow-icon-path" d="M7.87012 13L2.00021 7L7.87012 1" fill="none" stroke-width="2"></path> <path class="user-items-list-carousel__arrow-icon-foreground
        mobile-arrow-icon-path" d="M22.9653 7L3.03948 7" fill="none" stroke-linecap="square" stroke-width="2"></path> </svg></button><button aria-label="


      Next

  " class="mobile-arrow-button mobile-arrow-button--right preFade" data-animation-role="button" style="transition-timing-function: ease; transition-duration: 0.9s; transition-delay: 0.464706s;"></button>

<div class="user-items-list-carousel__arrow-icon-background
    mobile-arrow-icon-background-area
  "></div>
<button aria-label="


      Next

  " class="mobile-arrow-button mobile-arrow-button--right preFade" data-animation-role="button" style="transition-timing-function: ease; transition-duration: 0.9s; transition-delay: 0.470588s;"><svg class="mobile-arrow-icon" viewBox="0 0 24 14" xmlns="http://www.w3.org/2000/svg"> <path class="user-items-list-carousel__arrow-icon-foreground
        mobile-arrow-icon-path" d="M16.1299 1L21.9998 7L16.1299 13" fill="none" stroke-width="2"></path> <path class="user-items-list-carousel__arrow-icon-foreground
        mobile-arrow-icon-path" d="M1.03472 7H20.9605" fill="none" stroke-linecap="square" stroke-width="2"></path> </svg></button></div>

<div aria-atomic="true" aria-live="polite" style="position: absolute; pointer-events: none; opacity: 0;">Item 1 of 12</div>
<div aria-live="polite" aria-atomic="true" style="position: absolute; pointer-events: none; opacity: 0;">Item 1 of 12</div></div>
</div>

<div class="list-section-button-container preFade fadeIn" data-animation-role="button" data-button-size="large" data-section-button-alignment="center" style="margin-top: 70px; transition-timing-function: ease; transition-duration: 0.9s; transition-delay: 0.476471s;"><a class="list-section-button sqs-block-button-element--large sqs-block-button-element" href="https://foundation.app/@creepybits" target="_blank">Vote for me at the Foundation! </a></div>
</div>
</div>
</div>

[Christian J]

How does the browser choose between the PC or mobile code?

[creepybits]

How does the browser choose between the PC or mobile code?

Hi!

Like I said, I'm really no good at all in this and some code just kinda followed when I migrated from last host. But as far as I can tell this is what decides how the page will be displayed.

CODE

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

[Christian J]

No, that META element just helps mobile browsers reflow text in a more readable way, it doesn't change what HTML the browser sees. See https://developer.mozilla.org/en-US/docs/We...ewport_meta_tag for a more technical explanation. To actually try to detect the type of browser and then serve it different HTML you'd need some kind of scripting language.

With CSS Media Queries you can style the same HTML differently for various browser window sizes, but since the resolution of today's mobile screens often overlap with that of desktop screens this may not always be reliable. You can also use Media Queries to detect if the screen orientation is Landscape or Porttrait, where the latter could indicate a mobile screen.

[creepybits]

No, that META element just helps mobile browsers reflow text in a more readable way, it doesn't change what HTML the browser sees. See https://developer.mozilla.org/en-US/docs/We...ewport_meta_tag for a more technical explanation. To actually try to detect the type of browser and then serve it different HTML you'd need some kind of scripting language.

With CSS Media Queries you can style the same HTML differently for various browser window sizes, but since the resolution of today's mobile screens often overlap with that of desktop screens this may not always be reliable. You can also use Media Queries to detect if the screen orientation is Landscape or Porttrait, where the latter could indicate a mobile screen.

Okay thank you. I'll look for it.

[creepybits]

I probably look really stupid to those who knows these kind of things, and I probably am.

I found this in sitebundle.js Maybe this is it?

CODE

!function(e,t){
  if("object"==typeof exports&&"object"==typeof module)
      module.exports=t();
  else if("function"==typeof define&&define.amd)
      define([],t);
  else{
    var n=t();
    for(var r in n)
      ("object"==typeof exports?exports:e)[r]=n[r]
    }
  }(window,(function(){
    return function(e){
      function t(t){
        for(var n,o,i=t[0],a=t[1],c=0,s=[];c<i.length;c++)
            o=i[c],
            Object.prototype.hasOwnProperty.call(r,o)&&r[o]&&s.push(r[o][0]),
            r[o]=0;
        for(n in a)
            Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);
        for(u&&u(t);s.length;)
        s.shift()()
  }
  var n={}
    ,r={
      33:0
  };
  function o(t){
    if(n[t])
        return n[t].exports;
  var r=n[t]={
    i:t,
    l:!1,
    exports:{}
  };
  return e[t].call(r.exports,r,r.exports,o),
  r.l=!0,
  r.exports
}o.e=function(e){
  var t=[]
    ,n=r[e];
    if(0!==n)
    if(n)
      t.push(n[2]);
    else{var i=new Promise((function(t,o){
      n=r[e]=[t,o]
    }
  ));
  t.push(n[2]=i);
    var a,c=document.createElement("script");
    c.charset="utf-8",
    c.timeout=120,
    o.nc&&c.setAttribute("nonce",o.nc),
    c.src=function(e){
      return o.p+"scripts/"+({
        0:"background-image-fx-liquid~background-image-fx-parallax~background-image-fx-refracted-circles~backgr~31f89b22",
        1:"vendors~background-image-fx-liquid~background-image-fx-parallax~background-image-fx-refracted-circle~d57d4b75",
        2:"gallery-fullscreen-slideshow~gallery-slideshow~lightbox",
        3:"vendors~gallery-fullscreen-slideshow~gallery-slideshow~lightbox",
        4:"user-items-list-banner-slideshow~user-items-list-carousel",
        5:"author-profile-image-loader",
        6:"background-image-fx-liquid",
        7:"background-image-fx-parallax",
        8:"background-image-fx-refracted-circles",
        9:"background-image-fx-refracted-lines",
        10:"background-image-fx-static",
        11:"blog-image-loader",
        12:"blog-layout-masonry",
        13:"events-image-loader",
        14:"floating-cart",
        15:"gallery-fullscreen-slideshow",
        16:"gallery-grid",
        17:"gallery-masonry",
        18:"gallery-reel",
        19:"gallery-slideshow",
        20:"gallery-strips",
        21:"grid-images",
        22:"image-and-text",
        23:"image-zoom",
        24:"item-pagination",
        25:"lightbox",
        26:"magic-padding-controller",
        27:"portfolio-hover",
        28:"portfolio-index-background",
        29:"product-cart-button",
        30:"product-gallery",
        31:"product-item-variants",
        32:"product-list-imageLoader",
        34:"user-account-link",
        35:"user-items-list-banner-slideshow",
        36:"user-items-list-carousel",
        37:"user-items-list-simple",
        38:"vendors~portfolio-hover",
        39:"vendors~product-gallery",
        40:"vendors~video-background",
        41:"vendors~video-background-native",
        42:"video-background-native"
      }[e]||e)+"."+{
          0:"32efda900a87ae8b556c",
          1:"9ad687b6ea82cabb3539",
          2:"c928267e2b79c31077ed",
          3:"71ec35e678ab25773466",
          4:"3ea7c290761561b8e1f2",
          5:"a29ea8ab13e4b74b653d",
          6:"3b932b5660ce47cba576",
          7:"977a8740ed621b6ca13e",
          8:"d0eb5691d0d4905877be",
          9:"92607f35e70a08185aa7",
          10:"accf571e5bef4bc486ca",
          11:"700f917846fb0e203782",
          12:"b36186ffebd4dc1b825c",
          13:"c790dcb5b48867be354f",
          14:"c82df4663324f4c25622",
          15:"b928d7a98c343a52e1ba",
          16:"4e1d1cae16346763ade2",
          17:"56833ca4ef7b0c23eb33",
          18:"738d344b02df77805d03",
          19:"36c7d44cf25ab5f2c131",
          20:"72a88cf6b107e46221a3",
          21:"98dcaa6ebb69c617c427",
          22:"6d91ff805c690fc59213",
          23:"e4ed9c20484c61c655fa",
          24:"c53b1134baee369def1d",
          25:"ff5747b99f7efb2a0824",
          26:"44c1c8aa664bdfb59d73",
          27:"f90c2e5add0b8f735337",
          28:"d0278011508b5ea584df",
          29:"c1ea17b55cd060139dd4",
          30:"86738b44fffd94065a78",
          31:"732fa9a00d6b92500701",
          32:"b2dd40b9e03aeaa865ee",
          34:"edf37c956ed99b5462a2",
          35:"6c6619608cf8350eee24",
          36:"89ce10b265986eefb38e",
          37:"2fe5f934f205676ca036",
          38:"e176fed40f8d0a7fab4d",
          39:"7943f5b40795e90da4a3",
          40:"9dd4fc032fc62ec0ce87",
          41:"925b393dfb67bffe995a",
          42:"c998ad01a69348b0f643"
        }[e]+".js"
      }(e);var u=new Error;
      a=function(t){c.onerror=c.onload=null,
        clearTimeout(s);
        var n=r[e];
        if(0!==n){
          if(n){
            var o=t&&("load"===t.type?"missing":t.type)
              ,i=t&&t.target&&t.target.src;
              u.message="Loading chunk "+e+" failed.\n("+o+": "+i+")",
              u.name="ChunkLoadError",
              u.type=o,
              u.request=i,
              n[1](u)
            }
            r[e]=void 0
          }
        }
       ;
        var s=setTimeout((function(){
          a({type:"timeout",
          target:c
        })
      }
    ),12e4);
    c.onerror=c.onload=a,
    document.head.appendChild(c)
  }
  return Promise.all(t)
}
,
o.m=e,
o.c=n,
o.d=function(e,t,n){
  o.o(e,t)||Object.defineProperty(e,t,{
    enumerable:!0,
    get:n
  })
}
,
o.r=function(e){
  "undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{
    value:"Module"
  }),
  Object.defineProperty(e,"__esModule",{
    value:!0
  })
}
,
o.t=function(e,t){
  if(1&t&&(e=o(e)),
  8 & t)
  return e;
  if(4 & t && "object"==typeof e&&e&&e.__esModule)
    return e;
    var n=Object.create(null);
    if(o.r(n),
    Object.defineProperty(n,"default",{
      enumerable:!0,
      value:e
    }),
    2 & t &&"string"!=typeof e)
    for(var r in e)
    o.d(n,r,function(t){
      return e[t]
    }
    .bind(null,r));
    return n
  }
  ,
  o.n=function(e){
    var t=e&&e.__esModule?function(){
      return e.default
    }
    : function(){
      return e
    }
   ;
    return o.d(t,"a",t),
    t
  }
  ,
  o.o=function(e,t){
    return Object.prototype.hasOwnProperty.call(e,t)
  }
  ,
  o.p="",
  o.oe=function(e){
    throw console.error(e),
    e
  }
;
  var i=window.wpJsonpTemplateSections=window.wpJsonpTemplateSections||[]
    ,a=i.push.bind(i);
    i.push=t,
    i=i.slice();
    for(var c=0;c<i.length;c++)
      t(i[c]);
      var u=a;
      return o(o.s=272)
    }([function(e,t,n){
      var r=n(3)
      ,o=n(34).f
      ,i=n(23)
      ,a=n(21)
      ,c=n(104)
      ,u=n(148)
      ,s=n(91);
      e.exports=function(e,t){
        var n,l,f,d,p,h=e.target,v=e.global,g=e.stat;
        if(n=v?r:g?r[h]||c(h,{}):(r[h]||{}).prototype)
        for(l in t){
          if(d=t[l],
            f=e.noTargetGet?(p=o(n,l))&&p.value:n[l],
            !s(v?l:h+(g?".":"#")+l,e.forced)&&void 0!==f){
              if(typeof d==typeof f)
              continue;
              u(d,f)
            }
            (e.sham||f&&f.sham)&&i(d,"sham",!0),
            a(n,l,d,e)
          }
        }
      }
      ,function(e,t){
        e.exports=function(e){
          try{
            return!!e()
          } catch(e){
            return!0
          }
        }
      }
      , function(e,t,n){
        "use strict";
        n.d(t,"g",(function(){
            return r
          }
        )),
        n.d(t,"j",(function(){
          return o
        }
      )),
      n.d(t,"c",(function(){
        return i
      }
    )),
    n.d(t,"b",(function(){
      return a
    }
  )),
  n.d(t,"f",(function(){
    return c
  }
)),
n.d(t,"a",(function(){
{return u
}
)),
n.d(t,"e",(function(){
return s
}
)),
n.d(t,"d",(function(){
  return l
}
)),
n.d(t,"h",(function(){
  return f
}
)),
n.d(t,"i",(function(){
  return d
}
));
var r={
  sm:576,
  md:768,
  lg:992,
  xl:1100,
  xxl:1200
}
, o=["white","white-bold","light","light-bold","dark","dark-bold","black","black-bold","bright","bright-inverse"]
, i="background-width--inset"
, a="background-width--full-bleed"
, c="transparent-header-theme--override"
, u="announcementBarHeightChange"
, s=175
, l={
  SIDE_BY_SIDE:"blog-side-by-side",
  SINGLE_COLUMN:"blog-single-column",
  MASONRY:"blog-masonry",
  ALTERNATING_SIDE_BY_SIDE:"blog-alternating-side-by-side",
  BASIC_GRID:"blog-basic-grid"
}
, f={
  "paragraph-1":"sqsrte-large",
  "paragraph-3":"sqsrte-small"
}
, d={
  "button-small":"sqs-block-button-element--small",
  "button-medium":"sqs-block-button-element--medium",
  "button-large":"sqs-block-button-element--large"
}
}

[Brian Chandler]

I probably look really stupid to those who knows these kind of things, and I probably am.

I found this in sitebundle.js Maybe this is it?

{{ snip javascript }}

No, this certainly isn't "it". Taking vast slabs of unexplained, uncommented code that you do not understand at all and pasting them in your website is an extremely bad idea.

I believe that you can do this with a CSS "media" query; I was looking at it the other day, and found an example which checked if the horizontal resolution is over "800 (what CSS calls) pixels", and tried looking up on the web what horizontal resolution a typical smartphone has. Bizarrely I found two entirely different sorts of answer: one quoting around "2000" from 2016, another mentioning around "350" from 2020. Welcome to the world of the innumerate.

It seems that these smartphone screens have extremely high phyical pixel resolution, but this is only really useful for things like font rendering to get a crisp effect; typically an image is displayed with one image pixel (or what we'll call "CSS-pixel") shown in a block of 4 or 9 actual physical pixels. I believe that (contrary to what Christian said) you can test for horizontal CSS-pixel resolution, because it returns this "CSS-pixel" value.

[Christian J]

I believe that (contrary to what Christian said) you can test for horizontal CSS-pixel resolution, because it returns this "CSS-pixel" value.

That's good news, if you get values that distinguishes mobile screens from desktop (and if an older, low-resolution desktop monitor gets the mobile version it's not a big disaster either).

Otherwise my experience is that a traditional, simple, fluid page layout will adapt well to mobile (with the help of the META viewport element).