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

How to align columns in the same row on mobile

Discussion in 'Free Divi Community Forum' started by Samantha Shi, Jun 6, 2021.

  1. Samantha Shi

    Samantha Shi New Member

    Hello

    I have a row with 4 columns. 1st column has an image and the remaining columns have icons.

    On mobile view, I would like to have the image in the first column displayed in one row by itself (100% width) and then the 3 columns with icons displayed in another row.

    I was wondering how I could achieve this.

    Cheers

    Samantha
     
    #1 Samantha Shi, Jun 6, 2021
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring modern overlay archive blog layout with hover effects:View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    You may try the below sample:

    Go to the Row Settings > First Column Settings > Advanced > Custom CSS > Main Element > Tablet View > width: 100%!important;
     
    #2 Divi.Help, Jun 9, 2021
  3. Samantha Shi

    Samantha Shi New Member

    Hi there, thank you for your reply.

    I managed to display the image with 100% in width. But I failed to display the icons in the same row. I have attached a photo to explain the layout. It will be much appreciated if you could have a look. Thanks
     

    Attached Files:

    #3 Samantha Shi, Jun 9, 2021
    1. PRO MEMBER PERKS Divi.Help Header AI Generator - Try the power of AI to generate a custom Divi header for you:Try Now
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    Use the same method as the above for the column 2, 3 & 4. But you will need to change the width to 33.33% instead.
     
    #4 Divi.Help, Jun 13, 2021
(You must log in or sign up to post here.)