Text columns with icons on Mobile View for Impulse Theme

Store Design
, ,
1

Hi,

I was wondering what code I can use to have my icons appear on the same line on the mobile view. I have my icons below my header on the collection page and I wanted to know if there was a custom CSS code i can use to have all the icons on one line in the mobile view as it appears in the desktop view.

I currently have the impulse theme

The link to the collection is,

www.tianabayboutiques.com/collections/new-arrivals

Thank you,

Valerie

2

Hi @Valerie_Adj

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyRichard_0-1682470861776.png
PageFlyRichard_0-1682470861776.png390×844 170 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

3

Hello @Valerie_Adj ,

You can try to follow these steps:

  • Go to Online Store → Themes → Actions → Edit code
  • Go to theme.liquid file → add the following CSS code
@media (max-width: 767px) {
  .icon-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .icon-item {
    margin: 0 10px;
  }
}
  • Save and preview

Let us know if this can work.

Ali Reviews team.

4

IMG_3587.PNG
IMG_3587.PNG1284×2778 200 KB

Hi Richard,

Thank you for your input. When I copy and pasted the code, this was how it looked on my end. I copied the code exactly as it was written. Can you let me know if there was something else that I missed?

Thanks,
Valerie

5

Hello @Valerie_Adj

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.

@media only screen and (max-width: 768px){
.text-with-icons__blocks .text-with-icons__block {
     width: 33.33% !important; 
}
.text-with-icons__blocks {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}
}