Product attributes layout issue after the theme update

Hello

Today the WoodMart theme was updated from previous version to new v.7.5.2

After making the updates, there are issues in the layout of the product attribute in mobile version.

For example

https://excentshop.com/product/granulu-apkures-katli-froling-pe1-a-a-premium-klase-sildjaudu-diapazons-no-7-kw-lidz-35-kw/

Unfortunately, this situation repeats and was +/- similar the previous time when the WoodMart theme was updated. (Our communication from May 2024)

Please your suggestions and solutions.

Thanks & best regards

Attachments:

You must be logged in to view attached files.

Hello,

Please, update access to the admin panel so I can investigate it.

Thank you in advance.

Kind Regards

Hello
May apologise, but somehow I had missed your reply.
Best regards

Hello,

Add the code below into the Mobile CSS area:

.woocommerce-product-attributes tbody tr:nth-child(2) .woocommerce-product-attributes-item__value {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

And the below one for the Mobile landscape:

.woocommerce-product-attributes tbody tr:nth-child(2) .woocommerce-product-attributes-item__value {
    display: flex;
    flex-wrap: wrap;
}

Kind Regards

Hello

Your suggestions have been implemented and the results are dual.

-Mobile screen in vertical | English language -> everything looks good

– Mobile screen in vertical | Latvian language -> everything looks good except location of question mark

– Mobile screen in landscape | English language -> layout of attribute and location of question mark looks far from perfect

– Mobile screen in landscape | Latvian language -> layout of attribute looks far from perfect but location of question mark looks good.

Best regards

Attachments:

You must be logged in to view attached files.

Hello,

1. Recheck the issue now – https://take.ms/xP1MPu

2. To “Mobile CSS” area:

.woocommerce-product-attributes-item--attribute_pa_paredzamais-piegades-termins th {
    max-width: 70%;
}

Kind Regards

Hello
Thank you, looks better but not perfect yet.

-Mobile screen in vertical | English language -> everything looks good
-Mobile screen in landscape | English language -> location of question mark???

-Mobile screen in vertical | Latvian language -> location of question mark ???
-Mobile screen in landscape | Latvian language -> everything looks good.

Thanks & best regards

Attachments:

You must be logged in to view attached files.

Hello,

Sorry for the delay.

It looks like this custom affects it – https://take.ms/i5mFW, remove it, clear the cache and check how it works.

Kind Regards

Hello
Thank you.
All suggestions have been implemented.
Almost OK.

-Mobile screen in vertical | English language -> everything looks good
-Mobile screen in landscape | English language -> everything looks good

-Mobile screen in vertical | Latvian language -> everything looks good
-Mobile screen in landscape | Latvian language -> location of question mark ???

Thanks & best regards

Attachments:

You must be logged in to view attached files.

Hello,

I have defined this code https://take.ms/iemZu and it looks fine now – https://take.ms/vvhBW

Clear the mobile/browser cache and check how it works.

Kind Regards

Hello
I followed your suggestions and deleted everything what is possible (cache and web browsing history) but unfortunately the question mark is not in the right place.
I have tested on three devices both on the iOS platform and Android and the result is the same in all of them.
When the screen of the mobile device is in landscape position the question mark is not in the right place.
That’s how it looks from my point of view…..unfortunately.
Thanks & best regards

Attachments:

You must be logged in to view attached files.

Hello,

Try to enable “English” and then change back to “Latvian” – https://take.ms/ROVX7, https://take.ms/JkihF

In general, different languages have different text length so it’s difficult to control it. I suggest you
on the landscape enable the full-width columns, thus when you add some new attributes you will not need to adjust them again.

.single-product .product-images {
    flex: 0 0 100%;
    max-width: 100%;
}

.single-product .summary.entry-summary {
    flex: 0 0 100%;
    max-width: 100%;
}

Define the code above for Tablet and Mobile areas in Theme Settings -> Custom CSS.

Kind Regards

[Author]

Posts