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

Divi columns vertical align content: problems with mobile and tablet view

Discussion in 'Free Divi Community Forum' started by kotkota, Aug 9, 2019.

  1. kotkota

    kotkota Member

    Need to make content the same height size like image.
    Using this code in Custom CSS of for each column:

    Code:
    Log In or Sign Up to view this code.
    On desktop it looks good, but have some problem on mobile view and a lot of problem on tablet view (special on iPad Pro view).
    Can you help me resolve this problem and make the same height on all devices?

    Desktop - Desktop.png
    Mobile - mobile.png
    iPad - ipad pro.png
     
    1. PRO MEMBER PERKS Divi Mini Cart Pro Plugin - Instantly add 3 different types of mini cart to your Divi site:Learn More
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    For the image, just make it a column background image. Then it will always have the same size as the other column.
     
  3. kotkota

    kotkota Member

    If images made by background they are disappear on mobile and tablet.
     

    Attached Files:

    1. PRO MEMBER PERKS Divi Block Pro - Premade content toggle design for your Divi site without using any plugins:View Demo
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    For this issue, try to set padding top for the column settings. Then the background image will show up on mobile and tablet.
     
  5. kotkota

    kotkota Member

    Have made top-padding. No results. It is still invisible on mobile and tablet.
     
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Replace the default archive "Older Entries" with beautiful pagination:Learn More
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    It should work. Do note that it's the top padding for the column settings, not row settings. If still not working, kindly share your URL.
     
  7. kotkota

    kotkota Member

    Have add top-padding for column settings. If columns haven't any content backgroind is not visible is not visible on mobile.
    please check here (pass: Master1). All rows with images. Last row Test 1 and Test 2 with image backgrounds. One with lorem ipsum text (it is visible)
     
    1. PRO MEMBER PERKS Divi Block Pro - Powerful Divi header builder for you to mix & match premade header design, mobile menu & more:Learn More
  8. Divi.Help

    Divi.Help Administrator
    Staff Member

    I see it's because Divi automatically hide those column without modules.

    You can try to add an empty code module in the column & see if it works.

    Alternatively, you can try to add the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
    kotkota likes this.
  9. kotkota

    kotkota Member

    It works with this CSS code and with padding top. Thanks!
    Want to ask about columns order on mobile.
    It is possible to make it like: Image - Text - Image - Text- Image - Text.... Now on mobile it looks like: Image-Text-Image-Text-Text-Image... ?
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade card carousel design for your Divi site without using any plugins:View Demo
  10. Divi.Help

    Divi.Help Administrator
    Staff Member

    kotkota likes this.