Adjusting Code for Responsive Website to make it Mobile Friendly.

Nasreen · March 28

<!DOCTYPE html>
<html>
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
 

  
<style>
  .draggable-image {
    position: absolute;
    z-index: 1;
    background-color: #f1f1f1;
    text-align: center;
    border: 1px solid #d3d3d3;
  }

  .draggable-image .header {
    padding: 10px;
    cursor: move;
    z-index: 2;
    background-color: #2196F3;
    color: #fff;
    
    
  }
</style>
 </head>

<body>

 
  <div id="container">
    
    <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/91cbeb3c-bc85-4577-b601-9337728786f6/lofficiel.jpg?content-type=image%2Fjpeg" style="left: 1300px; top:200px; height: 550px; width: 390px;">
     <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/6649b9e5-dc0c-4a50-a5e7-d1278cd920ec/HBVN_DELANEY_8.jpg?content-type=image%2Fjpeg" style="left: 900px; top: 200px; height:550px; width:390px;">
    <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/a6267886-2773-48de-9c70-1e1672c9bc41/elle+cover.jpg?content-type=image%2Fjpeg" style="left: 500px; top:200px; height: 550px; width: 390px;">
    <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/af11b614-378e-4697-a5dc-199496f8ace2/L1010573.jpg.jpg?content-type=image%2Fjpeg" style="left: 700px; top: 750px; height:550px; width:360px;">
    <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/7a338d6c-ef34-44ce-9f94-56ce4806d31f/L1010509.jpg.jpg?content-type=image%2Fjpeg" style="left: 1500px; top: 725px; height:400px; width:300px;">
    <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/e57276c5-7fbf-4bbd-a4cb-a9e1144fcce0/COSBG1221-2.jpg?content-type=image%2Fjpeg" style="left: 1100px; top: 805px; height:380px; width:280px;">
    <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/4ef54bd1-3c67-44d7-a496-2b26b0cae2d0/ELLE_196_06_Fashion2-3.jpg?content-type=image%2Fjpeg" style="left: 360px; top: 825px; height:400px; width:300px;">
    <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/f4c1c15a-155e-4b30-97ea-6a3b769321fc/%40EMILPHOTOGRAPHER-2.jpg?content-type=image%2Fjpeg" style="left: 560px; top: 525px; height:400px; width:300px;">
    <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/e9544032-7ec4-48a8-9b63-d6b870568810/ELLE_196_06_Fashion2-5.jpg?content-type=image%2Fjpeg" style="left: 1700px; top: 325px; height:400px; width:300px;">
    <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/78918633-07e8-4371-8c30-fbc06ec01ed5/L1010412.jpg.jpg?content-type=image%2Fjpeg" style="left: 1500px; top: 525px; height:350px; width: 250px;">
    <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/b26b72e2-d7fd-48c0-b34f-37f7a4c69a43/L1010457.jpg.jpg?content-type=image%2Fjpeg" style="left: 1900px; top: 625px; height:350px; width: 250px;">
    <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/d84cb775-ad7b-433a-88a6-4faf0875cbdd/HBVN_DELANEY_2.jpg?content-type=image%2Fjpeg" style="left: 100px; top: 325px; height:500px; width: 360px;">
    <img class="draggable-image" src="https://images.squarespace-cdn.com/content/5d80645df48a56598e1cc054/7d337e25-f570-4bde-8216-d1f0b2e976bd/ELLE_196_06_Fashion2-2.jpg?content-type=image%2Fjpeg" style="left: 800px; top: 450px; height:400px; width: 280px;">
    
    
    
  </div>

<script>
    //Make the images draggable:
    const images = document.getElementsByClassName("draggable-image");
    let currentZIndex = 1;
    for (let i = 0; i < images.length; i++) {
      dragElement(images[i]);
    }

    function dragElement(elmnt) {
      let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
      const header = elmnt.querySelector(".header");
      if (header) {
        /* if present, the header is where you move the element from:*/
        header.onmousedown = dragMouseDown;
      } else {
        /* otherwise, move the element from anywhere inside the element:*/
        elmnt.onmousedown = dragMouseDown;
      }

      function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        currentZIndex++;
        elmnt.style.zIndex = currentZIndex;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
      }

      function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
      }

      function closeDragElement() {
        /* stop moving when mouse button is released:*/
        document.onmouseup = null;
        document.onmousemove = null;
      }
    }
  </script>





</body>
</html>

This is the code I injected into my template for my home page. I'm trying to make it so that it is mobile friendly to where I can drag around all the pictures on a mobile device as well. However I can't see all the pictures as seen below:

Can someone help me out on what to do to make my website more dynamic for mobile devices? Here's a website that's the inspiration for my website: https://misokhe.com/. Notice that it is mobile friendly.

tuanphan · April 2

Hi,

It looks fine to me

Adjusting Code for Responsive Website to make it Mobile Friendly.

Recommended Posts

Nasreen

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

tuanphan

Link to comment

Create an account or sign in to comment

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources