Product Page Icon with Text and Rich Text Issues

[ellacoker]

Two Issues:

1. Does anyone know how I can create more padding above my icon with text? I would like a little space above just after the Ingredients Section. Also, I would like my Icons to be a little larger in mobile view. Any idea how to do this?

2. Secondly, my rich text for my “chakra” section is slightly unaligned in mobile view. Does anyone know how I can fix this.

Thank you very much in advance, Ella.

URL: https://www.samiyaskincare.com.au/products/root-chakra-face-mask

[Dan-From-Ryviu]

Hi @ellacoker

Please add this code to Custom CSS of your product template to create more padding.

.icon-with-text { margin-top: 24px !important; }

[ellacoker]

Thank you very much, do you know how to fix the rich text issue?

[LizHoang]

Hi @ellacoker

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

ul.icon-with-text.icon-with-text--horizontal.list-unstyled {
    margin-top: 30px !important;
}

.icon-with-text img {
    height: 50px !important;
    width: 50px !important;
    object-fit: unset !important;
}

Result:

Best,

Liz

[ellacoker]

Thanks Liz, I have mananged to fix the icon issue. Do you know how I centre the rich text?

[ellacoker]

I figured it out! thanks anyway