Support Center Visit Demo License manager Buy @ envato

Product Tab

larrywan71larrywan71
in WooCommerce

Hello,

Please see the following link:

This is an embed external element. It can be deleted using the delete key or the backspace key. To view the full element, press the preview button below.

Head crown – Bejewelry

https://jianw32.sg-host.com/product/head-crown/
Amet ipsum, enim massa enim mattis pulvinar. Pretium sem a, sed lacus ac. Mattis sapien nunc malesuada tincidunt. Libero integer velit, lorem est. Velit adipiscing scelerisque eget nunc. Nunc, scelerisque vel netus pulvinar quam phasellus. Aenean at id nam neque fermentum. Sagittis eget bibendum commodo lectus nunc donec tincidunt sociis. Purus magna in diam neque, commodo egestas aliquam blandit.

We added product tab, but, there are several issues.

1, the width of product description in the product tab is narrower than the width of original description in the mobile vesion.

Image_20240622153523.png
Image_20240622153540.png

2, Additional information messed up in the mobile

Image_20240622153547.png

3, Review section was cut off in mobile.

Image_20240622153554.png


Could you help with those? Thanks.

Comments

  • PhilPhil

    Hello,

    1, 2) I have passed it to the dev team, and we will take a closer look at this. For now, please use the following CSS code:

    1. @media only screen and (max-width:767px){
    2.  .single-product .column_product_tabs .section_wrapper{
    3.    padding-left: 0!important;
    4.    padding-right: 0!important;
    5.    max-width: 100%!important;
    6.  }
    7. }

    Put it Betheme -> Theme options -> Custom CSS & JS -> CSS.

    3) On a horizontal view, the width of the devices changes, and the tablet view appears. Please adjust the tablet view of your single product template.


    Best regards

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • larrywan71larrywan71

    1) We put the code, and it works, thanks.

    2) Seems like still messed up.

    3) We changed the wrap into 1/2 for the review section, and still cut off. Could you tell us the detail to adjust the table view of single product template on a horizontal view.

    Thanks,

    LA

  • PhilPhil

    2) Please also add this CSS code:

    1. @media only screen and (max-width: 767px){
    2.  .woocommerce table.shop_attributes th{
    3.    width: 70px!important;
    4.  }
    5. }

    3) It should be rather 1/1 wrap on tablet view.


    Best regards

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • larrywan71larrywan71

    2) Works, and perfect.

    3) Could you screen shot to tell it step by step?

    Thanks,

  • PhilPhil

    Open your Single product template, edit the tablet view, and extend the wrap to 1/1.

    image.png
    image.png
    image.png

    Best regards

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • larrywan71larrywan71

    Perfect, thanks.

Sign In or Register to comment.