Text alignment mobile different screen sizes

[sunday_april]

Hi there,

I need help aligning the icons and text in the Product Page to center. On most laptop screens is fine, but I found that different screen sizes (iPhone SE, iPhone 12 Pro, Samsung Galaxy S8+,…) impact the alignment. Is there a way to adjust the entire element (icon + text boxes) to resize responsively depending on the user’s screen size?

Thank you!!

True Bond

[GTLOfficial]

Hello @sunday_april
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

.product__info-container * {
text-align: center !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[CodingFifty]

Hi @sunday_april ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

@media (max-width: 768px){
ul.icon-with-text.icon-with-text--horizontal.list-unstyled {
    text-align: center !important;
    justify-content: flex-start !important;
    white-space: nowrap !important;;
}
}

[LizHoang]

Hi Sunday_april

• 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

.product__info-container p {
    text-align: center !important;
}

Result:

Best,
Liz

[sunday_april]

Hi,

I only want the icons to be center-aligned. It looks like the element covers the description text above too. Any ideas how to fix the icon alignment on its own? Thank you

[sunday_april]

Hi there, I only want the icons to be center-aligned. It looks like the element covers the description text above too. Any ideas how to fix the icon alignment on its own? Thank you

[sunday_april]

It works great! Somehow some screens (Ipad air, surface pro 7,…) got impacted but most of them were okay. Thank you!