Need help to move content in a ribbion automatically.

[thisiskishor]

Hi there,

I need help resizing this ribbon on our website (fitnessnbalance.com),  on mobile devices as the desktop variant looks okay, but it has a bit of a padding below the text on mobile phone. 

Also, can it auto-scroll without people having to scroll it manually to see all the content within the ribbon? 

Thanks!

Image for reference:

 

[niraj_patel]

Hello @thisiskishor 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
   .multicolumn h3.inline-richtext strong {
       font-size: 9px !important;
   }
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[thisiskishor]

Hi, @niraj_patel,

Thank you for the response. However, the code just made the font size smaller inside the banner (which is not what I was looking for); rather I needed to reduce the gap (black space) under the text and make it slide automatically on a loop without the user having to scroll the ribbon.

[Made4uo-Ribe]

Hi @thisiskishor 

Check this one if it enough.

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media screen and (max-width: 749px) {
    .background-none .slider .multicolumn-card__info {
        padding-bottom: 0rem !important;
    }
}

And Save. 

Result:

[thisiskishor]

Hi @Made4uo-Ribe,

Thanks for the response. The text has aligned with the ribbon, however, could you suggest a string to adjust the font size within the same code?

Thanks!

[Made4uo-Ribe · Accepted solution]

Do you mean like this? 

if it is check thiso ne. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media screen and (max-width: 749px) {
.section-template--17882014908635__multicolumn_CHerAA-padding .grid--peek.slider .grid__item:first-of-type {
        margin-left: 0rem;
    }
ul#Slider-template--17882014908635__multicolumn_CHerAA {
    flex-wrap: wrap;
    justify-content: center;
    gap: .3rem;
}
.background-none .slider .multicolumn-card__info {
    padding-left: 0px;
    padding-bottom: 0rem !important;
}
.section-template--17882014908635__multicolumn_CHerAA-padding .grid--peek .grid__item {
    min-width: 10%;
    max-width: 30%;
  } 
}

And Save.