Attribute tags are not responsive? (pt2)

I dont understand why it is not possible to correct the way the attribute looks on the product screen (shop pages, not product pages)

Please see the attached as this is what people see on mobile and its not very professional.

James

Hello,

Please provide the screen what you mean.

Best Regards

Here you go, look at this, its nasty looking.

Attachments:

You must be logged in to view attached files.

Hello,

You need to increase the width of the block. It is not possible to keep a small block and contain a long phase.

Best Regards

Thank you so how do I do it?

Hello,

Take this code:

body .product-label.attribute-label:not(.label-with-img) {
    background-color: rgba(255, 255, 255, 1);
    color: #000000;
    width: 100px;
    font-size: 20px;
}

Set the values you need, delete lines you do not need. Add this code to the Theme Settings > Custom CSS > type device you need.

Best Regards

This is not working, on mobile, the att is TOO LARGE, if you cant help, then please let me know how to turn this off on mobile, really not fair I cant get this done, all I need is a smaller box, the font size is fine, but the box is over padded taking up picture room.

Please help either way. Its detering customers from buying due to the unprofessionalism.

Hello,

Add this to the desktop:

body .product-label.attribute-label:not(.label-with-img) {
    background-color: rgba(255, 255, 255, 1);
    color: #000000;
    width: 100px;
    font-size: 12px;
}

Add this to Mobile:

body .product-label.attribute-label:not(.label-with-img) {
background-color: rgba(255, 255, 255, 1);
color: #000000;
width: 50px;
font-size: 10px;
}

Change these values as per your needs:

width: 50px;
font-size: 10px;

For example width for desktop – 100 and for mobile 50

Best Regards

[Author]

Posts