title: I'm trying to create a slideshow embedded inside a smartphone image for my website in the below url link, but images are not fitted accurate
body: <p>I am trying to create a slideshow embedded inside a smartphone image for my website in the below URL link but the images are not fitted accurately.
  so please help out to solve this issue
  images inside the slider not fitted into the smartphone screen i.e width and height, can we make the images scroll inside the smartphone accurately display</p>
  <p><a href="https://cmodeliver.com/glotto/" rel="nofollow noreferrer">url link of website</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.dm-width {
     width: 350px;
     margin: 75px;
  }
  
  .iphone-mockup {
     position: relative;
     z-index: 5;
  }
  
  .dm-device {
      position: relative;
      width: 100%;
      padding-bottom:203.477897%;
      margin-bottom: 20px;
  }
  
  .device {
    position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      -webkit-background-size: 100% 100%;
      
      background-repeat: no-repeat;
            background-image: url(https://res.cloudinary.com/di5yipnns/image/upload/v1482236588/apple-iphone_aivldo.png);
    background-size: cover;
      background-position: center center;
  }
  
  .screen {
     overflow: hidden;
      position: absolute;
      top: 18.1%;
      bottom: 20.6%;
      left: 12.49%;
      right: 17.4%;
      background-color: #E91E63;
  }
  
  .slider {
    height: 100%;
  }
  .slider div {
    height: 119%;
      padding: 30px;
  }
  
  .slider__item {
      font-size: 100px;
      color: rgba(255,255,255,0.7);
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  
  .slider__item--2 {
     background-color: #2196F3;
  }
  .slider__item--3 {
     background-color: #4CAF50;
  }
  
  .slider__item--4 {
    background-color: #FFC107;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'&gt;&lt;/script&gt; 
  &lt;div class="dm-width"&gt;
    &lt;div class="dm-device"&gt;
      &lt;div class="device"&gt;
        &lt;div class="screen"&gt;
          &lt;div class="slider"&gt;
            &lt;div class="slider__item slider__item--1"&gt;
              &lt;img src="inc/img/new_2.jpg" alt="app download" &gt;
            &lt;/div&gt;
            &lt;div class="slider__item slider__item--2"&gt;
             &lt;img src="inc/img/new_1.jpg" alt="app download" &gt;
            &lt;/div&gt;
            &lt;div class="slider__item slider__item--3"&gt;
              &lt;img src="inc/img/new_3.jpg" alt="app download" &gt;
            &lt;/div&gt;
            &lt;div class="slider__item slider__item--4"&gt;
              &lt;img src="inc/img/new_4.jpg" alt="app download" &gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>