Home › Forums › Basel support forum › Alternative product style

Alternative product style

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 19, 2019 at 4:34 pm #113814

    manik
    Participant

    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.
    March 19, 2019 at 4:35 pm #113816

    manik
    Participant

    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.
    March 19, 2019 at 9:32 pm #113857

    Elise Noromit
    Member

    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

    March 19, 2019 at 9:54 pm #113861

    manik
    Participant

    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.

    March 20, 2019 at 11:23 am #113938

    Elise Noromit
    Member

    Hello,

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

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

    Best Regards

    March 20, 2019 at 1:02 pm #113966

    manik
    Participant

    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.

    March 20, 2019 at 2:32 pm #113993

    Elise Noromit
    Member

    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

    March 20, 2019 at 3:25 pm #113999

    manik
    Participant

    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

    March 20, 2019 at 4:54 pm #114014

    Elise Noromit
    Member

    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
Viewing 9 posts - 1 through 9 (of 9 total)