How do i make the text in the 'icons with text' smaller?

[VinUp]

Hi, i want to make the text beneath the icons smaller by about 50% and the icon itself smaller by about 10%.  How do i do this?

Website: https://vinup.nl/en/products/springsteel

[niraj_patel · Accepted solution]

Hello @VinUp 

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) {
  .icon-with-text--horizontal .icon-with-text__item {
       width: 100% !important;
   }
   .icon-with-text--horizontal {
        column-gap: 0 !important;
    }
    .icon-with-text .icon {
          height: 30% !impoortant; /*adjust according to you*/
          width: 30% !impoortant; /*adjust according to you*/
    }
    .icon-with-text__item span.h4.inline-richtext {
         font-size: 14px !important;
    }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Made4uo-Ribe]

Hi @VinUp 

Check this one. 

1. From you Admin page, go to Online Store > Themes

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. Then place the code below at the very bottom of the file.

ul.icon-with-text.icon-with-text--horizontal span.h4.inline-richtext {
    font-size: 1.4rem !important;
}
svg.icon.icon-accordion {
    width: 2.5rem !important;
}

• And Save.
• Result:
• 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Dan-From-Ryviu]

Hi @VinUp 

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings to do that 

@media (max-width: 749px) {
.product .icon-with-text--horizontal .h4 { font-size: 16px; }
}

[Sweans]

Hi @VinUp ,

You can change this by adding a simple line of css

goto your online store > themes > click on the three dots of current active theme.> edit code > search in left side bar for base.css> open the base.css file

and paste the code in this file

.icon-with-text .icon {
width: 27px !important;
}

.icon-with-text--horizontal .h4 {
font-size: 15px !important;
}

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regrads,
Sweans