FROM CACHE - en_header
Have your say in Community Polls: What was/is your greatest motivation to start your own business?

How to make my code mobile responsive and scrollable?

How to make my code mobile responsive and scrollable?

atulsaini1989
Shopify Partner
22 0 2
‎11-21-2024 05:06 AM

Here is the windows version of my code. Below is the reference image of the output

 

Screenshot 2024-11-21 at 3.32.48 PM.png

 

I want this to be responsive in mobile and scrollable.

 

Below is the image for reference:

 

Screenshot 2024-11-21 at 3.35.13 PM.png

 

CODE :

<div style="float: left;display: flex; justify-content: center;
  align-items: center; margin: 0;
  padding: 0;
  box-sizing: border-box;" >

<div class="circle">
<div class="logo"></div>
<div class="text">

<p> CLEARANCE SALE CLEARANCE SALE SALE</p>
</div>
</div>

<div class="circle1">
<div class="logo1"></div>
<div class="text1">

<p> THUNDER THUNDER THUNDER THUNDER </p>
</div>
</div>

<div class="circle2">
<div class="logo2"></div>
<div class="text2">

<p> BELL BOTTOM BELL BOTTOM BELL BOTTOM </p>
</div>
</div>

<div class="circle3">
<div class="logo3"></div>
<div class="text3">

<p> RUSH RUSH RUSH RUSH RUSH RUSH RUSH </p>
</div>
</div>


<div class="circle4">
<div class="logo4"></div>
<div class="text4">

<p> ASTRA ASTRA ASTRA ASTRA ASTRA ASTRA </p>
</div>
</div>

<div class="circle5">
<div class="logo5"></div>
<div class="text5">

<p> VORTEX VORTEX VORTEX VORTEX VORTEX </p>
</div>
</div>

<div class="circle6">
<div class="logo6"></div>
<div class="text6">

<p> TITEX TITEX TITEX TITEX TITEX TITEX </p>
</div>
</div>
</div>


<script>
const text = document.querySelector('.text p');
text.innerHTML = text.innerText.split("").map(
(char, i) =>
`<span style="transform:rotate(${i * 10.5}deg)">${char}</span>`
).join("")
</script>
<script>
const text1 = document.querySelector('.text1 p');
text1.innerHTML = text1.innerText.split("").map(
(char, i) =>
`<span style="transform:rotate(${i * 11.2}deg)">${char}</span>`
).join("")
</script>
<script>
const text2 = document.querySelector('.text2 p');
text2.innerHTML = text2.innerText.split("").map(
(char, i) =>
`<span style="transform:rotate(${i * 10.1}deg)">${char}</span>`
).join("")
</script>
<script>
const text3 = document.querySelector('.text3 p');
text3.innerHTML = text3.innerText.split("").map(
(char, i) =>
`<span style="transform:rotate(${i * 10.1}deg)">${char}</span>`
).join("")
</script>
<script>
const text4 = document.querySelector('.text4 p');
text4.innerHTML = text4.innerText.split("").map(
(char, i) =>
`<span style="transform:rotate(${i * 10.1}deg)">${char}</span>`
).join("")
</script>
<script>
const text5 = document.querySelector('.text5 p');
text5.innerHTML = text5.innerText.split("").map(
(char, i) =>
`<span style="transform:rotate(${i * 10.1}deg)">${char}</span>`
).join("")
</script>
<script>
const text6 = document.querySelector('.text6 p');
text6.innerHTML = text6.innerText.split("").map(
(char, i) =>
`<span style="transform:rotate(${i * 10.1}deg)">${char}</span>`
).join("")
</script>



<style>

{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: consolas;
}
body1
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;

}
.circle
{
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;

display: flex;
justify-content: center;
align-items: center;
}
.logo
{
position: absolute;
width: 150px;
height: 150px;
background: url("https://eyejack.in/cdn/shop/collections/2-eyejack-logo_1.gif?v=1717417221&width=400");
background-size: cover;
border-radius: 50%;
filter: brightness(1.5) contrast(1.5);

}
.text
{
position: absolute;
width: 100%;
height: 100%;
animation: rotateText 20s linear infinite;
color: #727513;
font-weight:900;
}
@keyframes rotateText
{
0%
{
transform: rotate(360deg);
}
100%
{
transform: rotate(0deg);
}
}
.text span
{
position: absolute;
left: 50%;
font-size: 1.2em;
transform-origin: 0 100px;
}



.circle1
{
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;

display: flex;
justify-content: center;
align-items: center;
}
.logo1
{
position: absolute;
width: 150px;
height: 150px;
background: url("https://eyejack.in/cdn/shop/files/1391CL579-2.jpg?v=1724752316&width=1800");
background-size: cover;
border-radius: 50%;
filter: brightness(1.5) contrast(1.5);

}
.text1
{
position: absolute;
width: 100%;
height: 100%;
animation: rotateText 20s linear infinite;
color: #727513;
font-weight:900;
}
@keyframes rotateText
{
0%
{
transform: rotate(360deg);
}
100%
{
transform: rotate(0deg);
}
}
.text1 span
{
position: absolute;
left: 50%;
font-size: 1.2em;
transform-origin: 0 100px;
}


.circle2
{
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;

display: flex;
justify-content: center;
align-items: center;
}
.logo2
{
position: absolute;
width: 150px;
height: 150px;
background: url("https://eyejack.in/cdn/shop/files/1391CL579-2.jpg?v=1724752316&width=1800");
background-size: cover;
border-radius: 50%;
filter: brightness(1.5) contrast(1.5);

}
.text2
{
position: absolute;
width: 100%;
height: 100%;
animation: rotateText 20s linear infinite;
color: #727513;
font-weight:900;
}
@keyframes rotateText
{
0%
{
transform: rotate(360deg);
}
100%
{
transform: rotate(0deg);
}
}
.text2 span
{
position: absolute;
left: 50%;
font-size: 1.2em;
transform-origin: 0 100px;
}



.circle3
{
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;

display: flex;
justify-content: center;
align-items: center;
}
.logo3
{
position: absolute;
width: 150px;
height: 150px;
background: url("https://eyejack.in/cdn/shop/files/1391CL579-2.jpg?v=1724752316&width=1800");
background-size: cover;
border-radius: 50%;
filter: brightness(1.5) contrast(1.5);

}
.text3
{
position: absolute;
width: 100%;
height: 100%;
animation: rotateText 20s linear infinite;
color: #727513;
font-weight:900;
}
@keyframes rotateText
{
0%
{
transform: rotate(360deg);
}
100%
{
transform: rotate(0deg);
}
}
.text3 span
{
position: absolute;
left: 50%;
font-size: 1.2em;
transform-origin: 0 100px;
}



.circle4
{
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;

display: flex;
justify-content: center;
align-items: center;
}
.logo4
{
position: absolute;
width: 150px;
height: 150px;
background: url("https://eyejack.in/cdn/shop/files/1391CL579-2.jpg?v=1724752316&width=1800");
background-size: cover;
border-radius: 50%;
filter: brightness(1.5) contrast(1.5);

}
.text4
{
position: absolute;
width: 100%;
height: 100%;
animation: rotateText 20s linear infinite;
color: #727513;
font-weight:800;
}
@keyframes rotateText
{
0%
{
transform: rotate(360deg);
}
100%
{
transform: rotate(0deg);
}
}
.text4 span
{
position: absolute;
left: 50%;
font-size: 1.2em;
transform-origin: 0 100px;
}


.circle5
{
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;

display: flex;
justify-content: center;
align-items: center;
}
.logo5
{
position: absolute;
width: 150px;
height: 150px;
background: url("https://eyejack.in/cdn/shop/files/1391CL579-2.jpg?v=1724752316&width=1800");
background-size: cover;
border-radius: 50%;
filter: brightness(1.5) contrast(1.5);

}
.text5
{
position: absolute;
width: 100%;
height: 100%;
animation: rotateText 20s linear infinite;
color: #727513;
font-weight:800;
}
@keyframes rotateText
{
0%
{
transform: rotate(360deg);
}
100%
{
transform: rotate(0deg);
}
}
.text5 span
{
position: absolute;
left: 50%;
font-size: 1.2em;
transform-origin: 0 100px;
}

.circle6
{
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;

display: flex;
justify-content: center;
align-items: center;
}
.logo6
{
position: absolute;
width: 150px;
height: 150px;
background: url("https://eyejack.in/cdn/shop/files/1391CL579-2.jpg?v=1724752316&width=1800");
background-size: cover;
border-radius: 50%;
filter: brightness(1.5) contrast(1.5);

}
.text6
{
position: absolute;
width: 100%;
height: 100%;
animation: rotateText 20s linear infinite;
color: #727513;
font-weight:800;
}
@keyframes rotateText
{
0%
{
transform: rotate(360deg);
}
100%
{
transform: rotate(0deg);
}
}
.text6 span
{
position: absolute;
left: 50%;
font-size: 1.2em;
transform-origin: 0 100px;
}



</style>
Labels:
231 Views
0 Likes
Report
Replies 5 (5)

devmont-digital
Shopify Partner
151 32 38
‎11-21-2024 05:45 AM

Hello @atulsaini1989,

try this code,
create new section in backend and paste the above code and then go to customize  when you want to show the section.

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<style>
        .mastraHaederRow{
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .mmastraHeaderBox .sectionHeaing{
          line-height: 60px;
          margin: 0;
          color: #252627;
          letter-spacing: -4px;
          padding-bottom: 24px;
        }
        .HotelDescription p{
          margin: 0;
          color: #252627;
          line-height: 23.76px;
        }
        .prevSlide, .nextSlide{
          width: 46px;
          height: 46px;
          border-radius: 100%;
          border: 1px solid #252627;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all .3s ease-in-out;
        }
        .prevSlide:hover, .nextSlide:hover{
         background: #252627;
         cursor: pointer;
         transition: all .3s ease-in-out;
       }
       .prevSlide:hover svg path, .nextSlide:hover svg path{
        fill: white;
        transition: all .3s ease-in-out;
      }
      .prevSlide svg path,
      .nextSlide svg path{
        transition: all .3s ease-in-out;
      }
      .mastraHeaderWrapper {
        padding-bottom: 30px;
      }
      .mastrarightAroow{
        display: flex;
        align-items: center;
        gap: 15px;
      }
      .hotelTitle .hotel{
        color: #252627;
        line-height: 35.64px;
        margin: 0;
        letter-spacing: -1px;
      }
      .hotelTitle{
        padding-top: 24px;
      }
      .hotelTitle a h4{
        transition: all .5s ease-in-out;
      }
      .mastraHotelBox:hover .hotelTitle a h4{
            color: #89aede;
        transition: all .5s ease-in-out;
      }
      .hotelImg{
        overflow: hidden;
        border-radius: 20px;
        cursor: pointer;
      }
      .hotelImg img{
        width: 100%;
        height: auto;
        display: block;
        border-radius: 20px;
        transition: all .5s ease-in-out;
      }
      .mastraHotelBox:hover .hotelImg img {
        transition: all .5s ease-in-out;
        scale: 1.1;
      }
      .hotelSliderWrapper{
        margin-left: calc((100% - 1660px) / 2);
        margin-right: 10px;
      }
      .mastraHotelSection {
        padding-bottom: 63px;
        padding-top: 90px;
      }
      .prevSlide.swiper-button-disabled,
      .nextSlide.swiper-button-disabled {
          opacity: .5;
          pointer-events: none;
    }
    .botHotelNav{
      display: none;collection
    }
      @media(max-width: 1700px){
        .hotelSliderWrapper {
            margin-left: 20px;
        }
      }
      @media(max-width:1660px) and (min-width: 1200px){
        .hotelSliderWrapper {
          margin-left: calc((100% - 89.4%) / 1.6) !important;
        }
    }
    @media (max-width: 1199px) and (min-width: 991px) {
        .hotelSliderWrapper {
          margin-left: calc((100% - 95%) / 1.6) !important;
        }
    }
    @media(max-width: 990px){
        .hotelSliderWrapper {
          margin-left: 1.5rem !important;
          margin-rightw: 1.5rem !important;
        }
    }
    @media(max-width: 768px){
     .mmastraHeaderBox .sectionHeaing{
        line-height: 40px;
        letter-spacing: -2px;
      }
      .HotelDescription p br{
         display: none;
      }
    }
      @media(max-width: 749px){
      .mastraHotelSection {
          padding-bottom: 40px;
          padding-top: 50px;
      }
    }
    @media(max-width: 568px){
     .mmastraHeaderBox .sectionHeaing{
        line-height: 32px;
        letter-spacing: -1px;
      }
    }
      @media(max-width: 479px){
        .botHotelNav {
          display: flex;
          justify-content: center;
          padding-top: 23px;
        }
        .topHotelNav{
            display: none;
        }
        .mmastraHeaderBox .sectionHeaing,
        .HotelDescription p{
              text-align: center;
        }
        .hotelTitle .hotel{
              text-align: center;
                  line-height: 1.2;
        }
        .mmastraHeaderBox .sectionHeaing{
              padding-bottom: 15px;
        }
        .prevSlide, .nextSlide {
          width: 35px;
          height: 35px;
        }
        .prevSlide svg, .nextSlide svg{
              width: 12px;
            height: 12px;
        }
        .hotelImg img{
              height: 289px;
            object-fit: cover;
        }
      }
    @media(max-width: 749px){
      .mastraHotelSection {
          padding-bottom: 40px;
          padding-top: 50px;
      }
    }
    @media(max-width: 479px){
        .hotelTitle {
            padding-top: 16px;
        }
      .mastraHotelBox {
          width: 100%;
      }
  }
  @media(max-width: 479px){
    .hotelImg img {
        height: auto;
    }
  }
</style>
<div class="mastraHotelSection">
  <div class="mastraHeaderWrapper">
    <div class="page-width">
      <div class="mastraHaederRow">
        <div class="mmastraHeaderBox">
          {% if section.settings.title != blank %}
            <h2 class="h2 sectionHeaing">{{ section.settings.title }}</h2>
          {% endif %}
          {% if section.settings.description != blank %}
            <div class="HotelDescription">{{ section.settings.description }}</div>
          {% endif %}
        </div>
        <div class="mastrarightAroow topHotelNav">
          <div class="prevSlide"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="8" viewBox="0 0 10 8" fill="none">
  <path d="M0.646446 3.64645C0.451184 3.84171 0.451184 4.15829 0.646446 4.35355L3.82843 7.53553C4.02369 7.7308 4.34027 7.7308 4.53553 7.53553C4.7308 7.34027 4.7308 7.02369 4.53553 6.82843L1.70711 4L4.53553 1.17157C4.7308 0.976311 4.7308 0.659728 4.53553 0.464466C4.34027 0.269204 4.02369 0.269204 3.82843 0.464466L0.646446 3.64645ZM10 3.5L1 3.5L1 4.5L10 4.5L10 3.5Z" fill="#252627"/>
</svg>
</div>
          <div class="nextSlide"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="8" viewBox="0 0 10 8" fill="none">
  <path d="M9.35355 4.35355C9.54882 4.15829 9.54882 3.84171 9.35355 3.64645L6.17157 0.464467C5.97631 0.269204 5.65973 0.269204 5.46447 0.464467C5.2692 0.659729 5.2692 0.976311 5.46447 1.17157L8.29289 4L5.46447 6.82843C5.2692 7.02369 5.2692 7.34027 5.46447 7.53553C5.65973 7.7308 5.97631 7.7308 6.17157 7.53553L9.35355 4.35355ZM-4.37114e-08 4.5L9 4.5L9 3.5L4.37114e-08 3.5L-4.37114e-08 4.5Z" fill="#252627"/>
</svg>
</div>
        </div>
      </div>
    </div>
  </div>
  <div class="hotelSliderWrapper">
    <div class="swiper hotelSlider">
      <div class="swiper-wrapper">
        {% for block in section.blocks %}
          <div class="swiper-slide">
            <div class="mastraHotelBox">
              {% if block.settings.img != blank %}
                <div class="hotelImg">
                  <a href="{{ block.settings.hotel_link }}" class="hotelLink">
                    <img src="{{ block.settings.img | img_url: 'master' }}" class="hoteImg lazyload lazyloaded" alt="{{ block.settings.title }}"  title="{{ block.settings.title }}">
                  </a>                
                </div>
              {% endif %}
              {% if block.settings.title != blank %}
                <div class="hotelTitle">
                  <a href="{{ block.settings.hotel_link }}" class="hotelLink">
                    <h4 class="hotel">{{ block.settings.title }}</h4>
                  </a>
                </div>
              {% endif %}
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
  <div class="mastrarightAroow botHotelNav">
    <div class="prevSlide"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="8" viewBox="0 0 10 8" fill="none">
  <path d="M0.646446 3.64645C0.451184 3.84171 0.451184 4.15829 0.646446 4.35355L3.82843 7.53553C4.02369 7.7308 4.34027 7.7308 4.53553 7.53553C4.7308 7.34027 4.7308 7.02369 4.53553 6.82843L1.70711 4L4.53553 1.17157C4.7308 0.976311 4.7308 0.659728 4.53553 0.464466C4.34027 0.269204 4.02369 0.269204 3.82843 0.464466L0.646446 3.64645ZM10 3.5L1 3.5L1 4.5L10 4.5L10 3.5Z" fill="#252627"/>
</svg>
</div>
    <div class="nextSlide"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="8" viewBox="0 0 10 8" fill="none">
  <path d="M9.35355 4.35355C9.54882 4.15829 9.54882 3.84171 9.35355 3.64645L6.17157 0.464467C5.97631 0.269204 5.65973 0.269204 5.46447 0.464467C5.2692 0.659729 5.2692 0.976311 5.46447 1.17157L8.29289 4L5.46447 6.82843C5.2692 7.02369 5.2692 7.34027 5.46447 7.53553C5.65973 7.7308 5.97631 7.7308 6.17157 7.53553L9.35355 4.35355ZM-4.37114e-08 4.5L9 4.5L9 3.5L4.37114e-08 3.5L-4.37114e-08 4.5Z" fill="#252627"/>
</svg>
</div>
  </div>
</div>
 <!-- Swiper JS -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
  var swiper = new Swiper(".hotelSlider", {
      slidesPerView: 3.5,
    loop: true,
      parallax: true,
      effect: "slide",
      spaceBetween: 10,
      speed: 1000,
      autoplay: {
        delay: 4000,
      },
    navigation: {
      nextEl: ".nextSlide",
      prevEl: ".prevSlide",
    },
    breakpoints: {
      320: {
          slidesPerView: 1,
          spaceBetween: 10,
      },
     480: {
          slidesPerView: 1.5,
          spaceBetween: 10,
      },
      575: {
        slidesPerView: 2,
        spaceBetween: 10,
      },
      768: {
        slidesPerView: 2.5,
        spaceBetween: 10,
      },
      920: {
        slidesPerView: 3,
        spaceBetween: 10,
      },
      1200: {
        slidesPerView: 3.20,
        spaceBetween: 10,
      }
    },
  });
</script>

{% schema %}
{
  "name": "Box Slider",
  "tag": "div",
  "class": "hotelsSection",
  "settings": [
  {
    "type": "textarea",
    "id": "title",
    "label": "Title"
  },
  {
    "type": "richtext",
    "id": "description",
    "label": "Description"
  },
  {
    "type": "range",
    "id": "padding_top",
    "label": "Desktop Padding Top",
    "min": 0,
    "max": 100,
    "step": 1,
    "unit": "px",
    "default": 0
  },
  {
    "type": "range",
    "id": "padding_bottom",
    "label": "Desktop Padding Bottom",
    "min": 0,
    "max": 100,
    "step": 1,
    "unit": "px",
    "default": 0
  },
  {
    "type": "range",
    "id": "padding_top_mobile",
    "label": "Mobile Padding Top",
    "min": 0,
    "max": 100,
    "step": 1,
    "unit": "px",
    "default": 0
  },
  {
    "type": "range",
    "id": "padding_bottom_mobile",
    "label": "Mobile Padding Bottom",
    "min": 0,
    "max": 100,
    "step": 1,
    "unit": "px",
    "default": 0
  }
  ],
  "blocks": [
  {
    "type": "items",
    "name": "Slide",
    "settings": [
    {
      "type": "image_picker",
      "id": "img",
      "label": "Image"
    },
    {
      "type": "textarea",
      "id": "title",
      "label": "Title"
    },
    {
      "type": "url",
      "id": "hotel_link",
      "label": "Hotel Link"
    }
    ]
  }
  ],
  "presets": [
  {
    "name": "Box Slider"
  }
  ]
}
{% endschema %}

 


Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
212 Views
0 Likes
Report
In response to devmont-digital

atulsaini1989
Shopify Partner
22 0 2
‎11-21-2024 06:21 AM

Not working .....I have created a new section and paste the given code. While i am doing customisation in the website this newly created section is not showing in the ADD SECTION COLUMN

197 Views
0 Likes
Report
In response to atulsaini1989

devmont-digital
Shopify Partner
151 32 38
‎11-21-2024 07:11 AM

can you please share the screenshot.

 

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
155 Views
0 Likes
Report
In response to devmont-digital

atulsaini1989
Shopify Partner
22 0 2
‎11-22-2024 03:45 AM

Screenshot 2024-11-22 at 2.14.28 PM.pngScreenshot 2024-11-22 at 2.14.46 PM.png

95 Views
0 Likes
Report
In response to devmont-digital

devmont-digital
Shopify Partner
151 32 38
‎11-25-2024 01:49 AM

A section is visible with the name "box slider." Select it.

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
66 Views
0 Likes
Report

Community Blog Articles

starting.webp
Dropshipping Viral Products to Sell in 2025

As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....

By JasonH Nov 27, 2024
top members.webp
Shining a spotlight on our top members of October 2024!

Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...

By JasonH Nov 14, 2024
bfcm-deals-and-discounts.jpg
Tips for Running BFCM Deals and Discounts 2024

In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...

By JasonH Nov 13, 2024
Terms of Service Privacy Policy