Need Proper Mobile Alignment for Icons below each product page

Please note that the icons below add to the cart button are out of alignment in the mobile view. This problem is the same for all products pages in mobile view. Kindly rectify it immediately or give us a solution on how to do it, please.

Attachments:

You must be logged in to view attached files.

Hello,

Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.gm-product-icon-text p, .gm-product-icon-text {
font-size: 12px;
padding-top: 3px;
}

Best Regards

hi pls, check the image attached. I have added the code, still not aligned correctly. Please note when u check the code, don’t use the browser to shape it to mobile view. Rather open the url in mobile or use https://responsivetesttool.com/ or any alternative to use and then give me the code. Also if u can u can enter the code yourself and update me as i have given u the login and password. Kindly do the needful asap.

Attachments:

You must be logged in to view attached files.

Hello,

Your issue has been Resolved. Please clear cache and check back.

Screenshot for Clarification: https://gyazo.com/4aaac9f7cf731b4c4a2b42f6bfc2ba60

Best Regards

No, the issue is not resolved only for a few phones with the highest width it looks ok. We in our office have checked over 5 different phones which have to do nothing to do with the cache still showing misalignment.

Since ur reply takes 12 hours to 24 hours. Please kindly use this tool https://responsivetesttool.com/ go here and enter the website name and choose the mobile view. Kindly check all small mobile size versions and kindly give us the solution as we have customers who use different sizes. Please take this seriously and give us a complete solution.

Also pls check the screenshot attachment for ur reference.

Attachments:

You must be logged in to view attached files.

Hello,

I have updated the CSS under Custom CSS for the mobile area under Theme Settings >> Custom CSS.

Please check now the issue seems to be resolved.

Best Regards

THere are still minor changes needed. pls, refer attachment.

Attachments:

You must be logged in to view attached files.

Hello,

I have adjusted the CSS again and the issue seems to be fixed. Please clear cache and check back.

Best Regards

issue not resolved. Though it looks good now on wider mobile screens. For small screens, the last two icons seem to be cut. please refer attachment

Attachments:

You must be logged in to view attached files.

Hello,

Sorry but one particular Custom CSS code could not make it work for all the devices. And adding CSS for each device width is not recommended. You are trying to display 3 columns but it’s not possible to make the 3 columns visible within the mobile width.

So we recommend you use separate sections for mobile and desktop versions and set them to display 2 columns on mobile that will automatically fix the issue for you instead of adding CSS.

Please read the following article for help in hiding specific columns per devices:
https://elementor.com/help/show-or-hide-columns-per-device/

Best Regards

[Author]

Posts