Icon With Text - Issue

[ellacoker]

Is anyone please able to help me with my icon with text, text in mobile version only? The letters are splitting up and I cant figure out a way around it. Is there a way to decrease the padding of the icon with text section, so that it has more room to fit the words?

Thankyou,

Ella.

URL: https://www.livwithin.com.au/products/organic-cotton-yoga-mat-moon

PW: pewpog

[Dan-From-Ryviu]

Hi @ellacoker

You can add this code at the bottom of your base.css file to change icon with text look like this on mobile.

@media (max-width: 749px) {
.product__info-container .icon-with-text--horizontal {
    flex-direction: column;
}
.product__info-container .icon-with-text--horizontal .icon-with-text__item {
    flex-direction: row;
    width: 100%;
}
.product__info-container .icon-with-text--horizontal .icon-with-text__item img {
    margin-bottom: 0;
}
}

[swym]

Hey @ellacoker ,

I see that you want to reduce the spacing between the text for the mobile devices on this section.

To achieve that please add the below code just before the closing body [ ] tag on the theme.liquid file.

{% if template contains 'product' %} 
  
{% endif %}

Now save the file and try previewing your store to validate the changes. If the changes were made correctly then the update icon with text section would be as shown in the screenshot below:

I hope this helps!

If my response helped you, please consider giving it a like ( ) and marking it as an accepted solution if it resolved your issue. Your feedback helps other community members with similar questions.

Regards,

Abhishek from Swym

[Made4uo-Ribe]

Hi @ellacoker

Try this one.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. 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 only screen and (max-width: 749px){
.icon-with-text--horizontal {
    flex-direction: column;
}

.icon-with-text--horizontal .icon-with-text__item {
    flex-direction: row;
    width: 100%;
    gap: 5rem;
}
.icon-with-text--horizontal .svg-wrapper, .icon-with-text--horizontal img {
        margin-bottom: 0;
    }
}
@media only screen and (max-width: 450px){
.icon-with-text--horizontal .icon-with-text__item { 
    gap: 1rem;

}
}

• And Save.

• Result:

• 
  

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

[ellacoker]

thanks dan,

i am happy to use this solution instead, however when i put mine in, my text centred. it may be something i have in my code centering my product container. how do i override this to my the text align to left? not sure why the “eco-concious” one is randomly to the left, but it looks funny as well! needs more spacing after the icon