The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Mobile version show on PC
creepybits
post Jul 5 2021, 10:05 PM
Post #1





Group: Members
Posts: 4
Joined: 5-July 21
Member No.: 28,006



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>


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 6 2021, 03:20 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



How does the browser choose between the PC or mobile code?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
creepybits
post Jul 6 2021, 03:43 PM
Post #3





Group: Members
Posts: 4
Joined: 5-July 21
Member No.: 28,006



QUOTE(Christian J @ Jul 6 2021, 03:20 AM) *

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">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 6 2021, 07:18 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
creepybits
post Jul 6 2021, 07:35 PM
Post #5





Group: Members
Posts: 4
Joined: 5-July 21
Member No.: 28,006



QUOTE(Christian J @ Jul 6 2021, 07:18 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
creepybits
post Jul 6 2021, 08:40 PM
Post #6





Group: Members
Posts: 4
Joined: 5-July 21
Member No.: 28,006



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"
}
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Jul 7 2021, 02:50 AM
Post #7


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



QUOTE(creepybits @ Jul 7 2021, 10:40 AM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 7 2021, 03:46 AM
Post #8


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(Brian Chandler @ Jul 7 2021, 09:50 AM) *

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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 01:47 AM