Help needed with icons and text

[atmos-art]

Hi,

I would like to customise some icons and text so that it has a similar look and function to the website in the screenshot.  These icons are at the top of my home page. I’d like the text to be moved to the right of the icons to reduce the height of this section. I am not sure if it possible as the section is downloaded from an app I have.

I have provided the URL for this website below as well. I would like the text/icons to line up with the sections below so the margin on the left and right is the same.

My URL: www.atmos.art

Reference URL: https://www.andertons.co.uk/

[topnewyork · Accepted solution]

Hello @atmos-art ,

Go to online store > edit code > search base.css file and add  this code in the end.

.feature-item-template--25002931257667__ss_feature_7_UP86b9.swiper-slide {
    display: flex;
    justify-items: center;
    justify-content: center;
    align-items: center;
}
.feature-title-template--25002931257667__ss_feature_7_UP86b9 {
    margin: auto;
}

Result:




Thanks!

[topnewyork]

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[topnewyork]

Please also add this code for better design

    .feature-title-template--25002931257667__ss_feature_7_UP86b9 {
        margin-top: auto;
        margin-left: 5px;
    }
}
    .feature-title-template--25002931257667__ss_feature_7_UP86b9 > * {
        font-size: 19px;
    }

[atmos-art]

Hi this worked great, thank you! Do you know how I could also make the spacing between the icon and the accompanying text the same for each part?

I would also like to align both lines of text with the middle of the icon if possible.

Some of them have larger gaps (such as the card icon and “Secure Payment”).

[topnewyork]

Try this code  for middle alignment. 

.feature-item-template--25002931257667__ss_feature_7_UP86b9.swiper-slide {
   align-items: end;
}

[atmos-art]

Hi, that doesn’t appear to work for me. I have adjusted a setting called Item Heading Margin Top to 12px which seems to have done the trick (on desktop at least).

[websensepro]

Hi @atmos-art ,
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media (min-width: 1024px) {
   .feature-item-template--25002931257667__ss_feature_7_UP86b9.swiper-slide {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
}

    .feature-image-template--25002931257667__ss_feature_7_UP86b9 {
    margin: 0px px !important;
}
    .section-template--25002931257667__ss_feature_7_UP86b9 {
        padding: 0px 10px !important;
    }
  .feature-items-template--25002931257667__ss_feature_7_UP86b9 {
        gap: 10px !important;
    }
  .feature-title-template--25002931257667__ss_feature_7_UP86b9 {
        margin-top: 0px !important;
    }
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!