The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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

Posts in this topic


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

 



- Lo-Fi Version Time is now: 11th June 2024 - 09:02 AM