Attribute CSS Issue

That’s no solution…

As you can see, my attributes fit fine. The clear button on the same line as the attributes is what is causing this issue.

There are plenty of cases where having many attributes could cause this. yes, in this one particular case changing the width from small to large would fix it, but a better solution that would work no matter what would be to have the clear button separate so this is NEVER an issue.

Thank you.

Exactly. The clear button needs to be on its own row. The display issue in my original post is because it’s on the same row as my attributes. Changing the size of the text area doesn’t help because with more attributes or a smaller screen, you’ll still run into that issue at some point.

Clear should be by itself below all the attributes. That would prevent this issue.

That’s what I’m asking.

A URL is provided in the original post.

Please note that this does not happen on mobile, it’s only on desktop.

That’s not going to do it because it will still make the attributes not look correct.

What I’m saying is the attributes should line up with the attribute label. See the attached screenshot.

The mobile version of the site has position:absolute and bottom:-30px to fix this issue. It looks fine on mobile.

I’ve added the following CSS. Will you add this to the next update? It functions well whether or not the attributes are on a single line or wrap. It extends the bottom margin of the variation div, then offsets the clear button to the bottom so it’s out of the way. You can see the results in the second screenshot.

.product-image-summary .variations {
    margin-bottom:50px;
}
.variations_form .reset_variations {
    position: absolute;
    bottom: -30px;
    left: 0px;
}