Alternative product style

Hi Team,

We are using following code shared by you in other post to display variation name on the product page.We need variations on the left hand side of the field. The variations are appearing, but if you check the screenshot, the weight, variation and message on cake do not appear in one line, as opposed to the default layout ( attache in screenshot- they are left aligned). Can you please share the code to align them in one line, like the second screenshot in alternative product style

.product-design-alt .variations tr {
display:block;
}
.product-design-alt .variations td.label {
display:inline-block;
}
.single-product-content .variations td.value {
display: inline-block;
width: auto;
}

Attachments:

You must be logged in to view attached files.

The variations are working fine in default layout, that is, aligned in the same way. Please check screenshot.

Attachments:

You must be logged in to view attached files.

Hello,

Find this code:

.product-design-alt .variations td.label {
    display: inline-block;
}

Replace it for this one:

.product-design-alt .variations td.label {
    display: block;
    text-align: left;
}

And add this code:

body .product-design-alt .variations td.label {
    display: block;
    width: 18%;
    float: left;
}

Best Regards

Hi Elise,

Thank you for responding quickly, appreciate it.

The attributes are now aligned to left. It will be nice if they come under the “blackforest cake” heading. I mean they are too left, they should be at the center, below the title of the product. Please check the link at private content.

Hello,

Please add this code to the Theme Settings > Custom CSS > Desktop:

.basel-scroll-content{
padding-left:30%;
}

Best Regards

Hi Elise,

Thanks once again, appreciate your support. One more thing. Can you please help us in the alignment of the product options? If you check the screenshot at the https://cl.ly/8bccf1404886/Image%202019-03-20%20at%206.15.49%20PM.png

The text field “message” and the selection field “weight” are not in the same alignment. The width of the message is more, and the width of weight is less and they are not aligned properly below each other. Please help in that as well.

Hello,

Please replace the code:

body .product-design-alt .variations td.label {
    display: block;
    width: 18%;
    float: left;
}

for this one:

body .product-design-alt .variations td.label {
    display: block;
    width: 20%;
    float: left;
    margin-right: 4%;
}

Best Regards

Hi Elise,

Thanks for the new code. This works fine on the desktop version, however, there is alignment problem in the mobile version. Sharing the product link a video for more clarity

Hello,

Add this for the desktop only. It will be shifted on each pixel of the responsive. It is not possible to make it stable.

Best Regards

[Author]

Posts