#ERROR!

Technical Q&A
1

Hi there,

I have added a piece of HTML code in my home page site. It looks pretty nice on desktop but not in mobile.

When you see it on mobile it still appears as 6 colums code so this alter page structure. The idea (I guess) is to covert it into 6 rows (1 column) in mobile devices.

How couls I do this?

The code and site url below. Thank you in advance.

baseraising.com

## Why Choose Us?

    

        

            - ![glob_icon.png?1944|60x60](upload://2ujJDPyvhhIoeDZqK6tBdwA8INO.png)
  WORDWIDE SHIPPING

            - ![6logo56-copy.png?1944|60x60](upload://6VZObs1tfhQxu9ualjUP3F7YgF3.png)
  SECURE PAYMENTS

            - ![guar_icon.png?3664150426957216404|60x60](upload://9aN3iEmQsYaLplXauv8dMsU6wLb.png)
  30 DAY GUARANTEE

            -  CUSTOMER SUPPORT

            - ![icon-succ.png?1944|60x60](upload://av93jAhmv7g6vd8CMFVeobuHVlq.png)
  REAL LICENSED PRODUCTS

            - ![InstagramHeart.svg?1944|180x180](upload://wyHVi1WhdCnkjADOp946qnVUuVo.svg)
  WE LOVE OUR CUSTOMERS
2

Do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > timber.scss.liquid and paste this at the bottom of the file:
@media (max-width: 767px){
    .custom__item-inner .rte{
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}

.custom__item-inner .rte .pre-footer{
        max-width: 100% !important;
    width: 100% !important;
}
.custom__item-inner .rte .pre-footer ul{
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: -40px !important;

}

.custom__item-inner .rte .pre-footer ul li{
   float: unset !important;
   max-width: 100% !important;
   margin: 0 auto !important;
   display: block !important;
   border-right: unset !important;
   border-bottom: 1px solid rgb(204, 204, 204) !important;
}
}

This is the best that can be done in this scenario, a more thorough/customized alternative would require hiring a developer to better assist you.

Kind regards,
Diego

1 Like
3

Hi @diego_ezfy ,

It just worked as f*@k!

Thank you Sir!