Unaligned table data

Hello, we are using Advance Shipment Tracking addon by zorem for woocommerce, unfortunately the table data specially in phone view is not aligned, we have contacted the plugin support but they said it is related with our theme. Screenshot is attached for your reference. (This addon is showing tracking information on “My Account” page, both desktop and phone resolution is attached)

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshot you attached. Please provide the URL of the website with the login credentials of the user for which the data is displayed to check it myself and help out accordingly.

Best Regards.

Hello, you can login with the information in the private content. If you go to My Account > Order > Tracking Table < this is completely unaligned in phone view.

Hello,

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

.tracking-provider img {
	margin-left: 52%;
}

.tracking-number {
	text-align: right !important;
}

.date-shipped {
	text-align: right !important;
}

Best Regards.

Hello, I wanted it for mobile only so I added this code:

@media screen and (max-width: 768px) {

.tracking-provider img {
margin-left: 26%;
}

.tracking-number {
text-align: right !important;
}

.date-shipped {
text-align: right !important;
}

}

Most of it worked, thank you for that but the image has some margin on the right preventing it from being aligned with the content below it. I tried left right margin, higher percent than what you suggested but it just wont align to right.

Hello,

This is due to the padding that is given to the main td. Please try and add the following Custom CSS to reduce the padding of the right side.

.tracking-provider {
padding-right: 0px !important;
}

Best Regards.

Hello, I tried what you suggested and it partially works. Your help with the following issues is appreciated:

1. Tracking image aligned to left in desktop resolution

I found the following code upon inspection:

.my_account_tracking td:first-child{
text-align: left !important;
padding-left: 10px;
}

This makes the tracking image to be aligned to left as far as I can tell, this has to be removed so it is centered in desktop view.

2. The image is still not aligned to right like the other data in mobile view.

At certain width the tracking image is adjusted like the text below it, but as the width changes, the image becomes unaligned. You can also see in the screenshot attached that at 3 different width the image is a mess.

Thank you.

Hello,

Sorry but currently I am unable to see the screenshots you attached. Please make sure that you attached them correctly to check it myself and help you out accordingly.

Best Regards.

Hello, sorry about that, here it is. I have attached images for both problems I described above.

Attachments:

You must be logged in to view attached files.

For 2nd problem

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshots you attached. Unfortunately, I am unable to login to the customer account you provided

It seems that you have changed it. Please provide me with the correct account to see the issue myself and help you out accordingly.

Best Regards.

Sorry about that, here are the login information.

Hello,

I have logged in the user account and unable to see the order tracking page it displayed an error. Please make sure that the order tracking is working correctly for the user account you provided me to check it myself and help you out accordingly.

Screenshot for Clarification: https://ibb.co/z4ZGdRn

Best Regards.

Hello, my apologies, I completely forgot that I have to have an order created for you to see the tracking table. I have done that now, you can look using the credentials below. I appreciate your patience.

Hello,

I have visited your website. The CSS you mentioned in your screenshot is coming with the !important tag that could not be overridden or removed using simple CSS code.

Screenshot for Clarification: https://ibb.co/DR9ZMT5

The same CSS is also affecting the mobile view as well that’s why it is displayed like that.

Best Regards.

[Author]

Posts