How to make my code mobile responsive and scrollable?

Technical Q&A
, ,

Topic summary

A developer seeks help making circular rotating text elements responsive and scrollable on mobile devices. The desktop version displays multiple circles with rotating text and logos in a horizontal layout, but the mobile version needs to be scrollable.

Proposed Solution:

  • Another user provides a complete Shopify section code using Liquid templating
  • The solution includes a “Box Slider” section with customizable settings for padding, images, titles, and links
  • Features responsive design with separate desktop and mobile padding controls

Implementation Issue:

  • The original poster reports the solution isn’t working
  • After creating the new section and pasting the code, the section doesn’t appear in the “ADD SECTION COLUMN” menu during customization
  • Screenshots show the Shopify theme editor interface, but the newly created section is missing from the available sections list

Current Status:

  • The helper requests additional screenshots to diagnose why the section isn’t appearing
  • Later confirms the section is visible with the name “box slider” and asks the user to select it
  • The discussion remains ongoing as implementation details are being worked out
Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

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
Screenshot 2024-11-21 at 3.32.48 PM.png2922×504 215 KB

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
Screenshot 2024-11-21 at 3.35.13 PM.png660×1256 411 KB

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>
2

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.


  

    

      

        

          {% if section.settings.title != blank %}
            ## {{ section.settings.title }}
          {% endif %}
          {% if section.settings.description != blank %}
            {{ section.settings.description }}

          {% endif %}
        

        
          

          

        

      

    

  

  
    

      

        {% for block in section.blocks %}
          

            

              {% if block.settings.img != blank %}
                

                  
                    
                                  
                

              {% endif %}
              {% if block.settings.title != blank %}
                
                  
                    #### {{ block.settings.title }}
                  
                

              {% endif %}
            

          

        {% endfor %}
      

    

  

  
    

    

  

 
  

{% 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 %}
3

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

4

can you please share the screenshot.

5

Screenshot 2024-11-22 at 2.14.28 PM.png
Screenshot 2024-11-22 at 2.14.28 PM.png1906×968 143 KB

Screenshot 2024-11-22 at 2.14.46 PM.png
Screenshot 2024-11-22 at 2.14.46 PM.png1005×615 97.1 KB

6

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