Support Center Visit Demo License manager Buy @ envato

Mobile Product Tabs not responsive

NachbarsaftNachbarsaft
in WooCommerce

Hi Guys,

I´m improving my single product pages and instead of the regular product description, I now use the product tabs element. It is good on desktop, but on mobile the text is not adjusting, and I have no settings to control it. In the description tab, I´d like to decrease the spaces left and right, to have more space for the text:

image.png


In the tab "Additional Information", it looks like this:

image.png


I´d like to centralize the tab titles, and then of course the full content should be visible. This is an example product page with the current settings: https://dein-himmelreich.de/pin-dackelkopf/


Also, could you help me to make these payment tabs better aligned. They look chaotic with random spacing instead of a clean look. They come from woocommerce.


Thank you!

Comments

  • PhilPhil

    Hi,

    1) Please put the following CSS code into Betheme -> Theme options -> Custom CSS & JS -> CSS, and check if the problem persists:

    .single-product .mfn-woocommerce-tabs-nav-top .section_wrapper{
 padding: 0;
}

    2) The payments tabs come from the plugin, and it would be best if you contact their support regarding this.


    Best regards

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • NachbarsaftNachbarsaft
    1. Great that worked. However, there is still an issue of the responsive view when I add the quantity field. Then the add to cart button gets smushed. Here you can see an example: https://dein-himmelreich.de/pin-dackelkopf/
    2. Could you at least help me to make a gap between the payment tabs and the add to cart button?
    3. One more issue: I´ve added a search bar to my woocommerce fields. On mobile, I use the off-canvas filters. When I now try to use the search function on mobile, the filter sidebar directly closes. It should stay open so the user sees what he is typing.
  • PhilPhil

    1) Go to Betheme -> Theme options -> Shop -> Single product, and enable cart button extra options:

    image.png

    2) Try this CSS code:

    .single-product .mfn-product-add-to-cart .cart{
 margin-bottom: 15px!important;
}

    3) I have passed it on to the dev team, and we will take a look at this problem.


    Best regards

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.