1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Divi Tabs Module Content Layout

Discussion in 'Free Divi Community Forum' started by VMelanie, Jun 4, 2023.

  1. VMelanie

    VMelanie New Member

    I have a strange problem. I'm using the Divi tabs module to show a product list in categories from the Booqable plugin. The full list displays the products in three columns, however, each internal tab for separate categories displays the products in a single column. Each card in that single column blows up the product image so that it is cut off. This behavior seems to change when I change the browser window size. When I make it smaller, the items fall into three columns and the images become sized properly inside the cards.

    When I put the category shortcode in a separate row, it displays fine. However, when I use the show/hide button for that row, it again displays in a single column with enlarged and cut-off photos. :(

    I tried playing with the section and row sizing, but nothing seems to work. Booqable support is also no help and claims the issue is with Divi.

    Any ideas to fix this would be very much appreciated! Images attached. Link https://www.coastalcrawlri.com/shop-rentals/
     

    Attached Files:

    #1 VMelanie, Jun 4, 2023
    1. PRO MEMBER PERKS Divi Block Pro - Premade card carousel design for your Divi site without using any plugins:View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Just a simple CSS fix will do the job.

    Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
    #2 Divi.Help, Jun 16, 2023
  3. VMelanie

    VMelanie New Member

    Thank you, yes, I have played with that, but it does not fix the images being blown up and cut off.
     
    #3 VMelanie, Jun 17, 2023
    1. PRO MEMBER PERKS Divi Block Pro - Easy-to-use drag & drop interface to mix & match 456+ premade Divi blocks & export as json file:Learn More
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    The previous CSS should work to make the list width 50% for all devices. But you will need to set the CSS for different breakpoint for different sizes. For example:
    Code:
    Log In or Sign Up to view this code.
    ===========

    Originally, it uses Booqable JS to calculate the width. But when the list is hidden, Booqable JS was not able to calculate the width & thus set it to be 100%. You may ask if Booqable have any custom jQuery code to trigger the width calculation & you can set it to trigger the recalculation upon clicking the tab.
     
    #4 Divi.Help, Jun 18, 2023
(You must log in or sign up to post here.)