Responsive issue – attributes on mobile fall off screen

I have a responsiveness issue. The attributes are just partly visible on mobile devices. Most values fall off screen/out of bounds.

Hello,

The attributes in the product page are presented as a table. The table is not responsive by its nature. All I can do is to add the scroll on the mobile. Please let me know if you need help with custom CSS.

Best Regards

How is it possible that on the demo websites of Basel this section does work properly on mobile devices?

Is it fixable with smaller font sizes? If a scroll is the only option so be it, but I would have thought the template supported mobile devices. Especially for kind of a crucial section like product attributes.

Best regards,
Michiel

Hello,

Please provide the screen what block you mean, please?

Best Regards

See attachment. It is the tab with all the product attributes. None of the items seem to be fitting on my mobile phone.

Attachments:

You must be logged in to view attached files.

Hello,

Your attributes titles are very long. That is why your table is not responsive.

You can use this code on mobile:

body .woocommerce-Tabs-panel--additional_information {
    max-width: 300px;
    overflow-x:auto;
}

Add this code to the Theme Settings > Custom CSS.

Best Regards

Thank you. I also found it helpful to decrease the font size of the attributes to 10/12 pixels, so it will be (almost) completely visible on screen. However, I only got the values at 10 pixels with the following code

body .shop_attributes {
	font-size: 12px;
}

What is needed to target the attribute titles on the left? Those are still large.

Hello,

Now your attributes have this code:

.single-product-content .shop_attributes th {
    font-size: 16px;
    font-weight: 700;
}

You can change the size to 10 or 12 and check what is the best. In addition your can change font-weight from 700 to 400.

The same is for the values of the attributes:

.single-product-content .shop_attributes td p, 
.single-product-content .shop_attributes th p {
    font-size: 16px;
    font-weight: 700;
}

Best Regards

Thank you very much for the support!

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts