1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, 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

Solved Divi Card Carousel: Changing card width

Discussion in 'Support Forum' started by Rory Skinner, May 21, 2024.

  1. Rory Skinner

    Rory Skinner New Member
    Pro Member

    Hi there,

    I'm trying to change the width of the Divi card carousel, but can't seem to find the code to amend this.

    I've attempted the following steps:

    1. Changing the max-width in the 'Carousel Container' code:
      html.et-fb-root-ancestor:not(.et-fb-preview--wireframe) .free-462-light-wrapper~.swiper-slide {
      max-width: 375px!important;


    2. Changing the row width using Divi's settings to max of 375px.

    However, inspecting the html element on Chrome it looks like the original 525px is being pulled in and overridden from elsewhere. Could you please advise on where I can change the 525px to 375px?
    • <div class="et_pb_row et_pb_row_9 swiper-slide dh-swiper-img-hover et_clickable et_pb_section_video swiper-slide-active" style="width: 525px; margin-right: 30px;" role="group" aria-label="1 / 6">

    Appreciate the help.

    Thanks,
    Rory
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade logo carousel design for your Divi site without using any plugins:View Demo
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    You will need to go to the container module settings. See screenshot below:
    upload_2024-5-21_23-47-49.png

    And scroll down & you will find the below:

    data-columnsdesktop="2" data-columnstablet="2" data-columnsphone="1"

    The width is based on how many items per view, not by width. Meaning with data-columnsdesktop="2", it means in desktop view it will have 2 items in the container.
     
  3. Rory Skinner

    Rory Skinner New Member
    Pro Member

    Thanks for the help, all resolved, appreciate it!
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade dynamic background hover design for your Divi site without using any plugins:View Demo