Need help to move content in a ribbion automatically.

Solved

Need help to move content in a ribbion automatically.

thisiskishor
Excursionist
22 1 7

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:

Screenshot 2024-06-18 at 5.18.53 PM.png

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
6841 1634 2014

This is an accepted solution.

Do you mean like this? 

Made4uoRibe_0-1718719957147.png

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. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 5 (5)

techlyser_web
Shopify Partner
1779 330 357

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.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
thisiskishor
Excursionist
22 1 7

Hi, @techlyser_web,

 

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
Shopify Partner
6841 1634 2014

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:

Made4uoRibe_0-1718715957696.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
thisiskishor
Excursionist
22 1 7

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
Shopify Partner
6841 1634 2014

This is an accepted solution.

Do you mean like this? 

Made4uoRibe_0-1718719957147.png

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. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.