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 Vertically aligned text within a column on tablet and mobile

Discussion in 'Free Divi Community Forum' started by RuggedlyRefined, Aug 25, 2024.

  1. RuggedlyRefined

    RuggedlyRefined New Member
    Pro Member (Support Expired)

    Hello!

    I am using the method of enabling "Equalize Column Heights" on a single-column row, then entering "margin: auto;" in Row settings > Column settings > Advanced > Custom CSS > Module Elements > Main Element. This works great on desktop! However, once reaching the breakpoint for tablet, the text aligns to the top. Please see the attached screenshots.

    What am I missing to make that remain vertically aligned?

    (If a link is needed, may I send it via private message? I don't have permission from the client to share it publicly.)

    Thank you!
     

    Attached Files:

    #1 RuggedlyRefined, Aug 25, 2024
    1. PRO MEMBER PERKS Divi Block Pro - Premade testimonial carousel design for your Divi site without using any plugins:View Demo
  2. Divi Booster

    Divi Booster Divi Expert

    Hey RuggedlyRefined,

    I tried to replicate your settings on a test site, but couldn't reproduce the issue. Presumably there's something I'm missing.

    I don't think you can private message on this forum, but if you send me a link, I'll be happy to take a look. You can reach me at:

    https://divibooster.com/contact-form/

    Thanks!
     
    #2 Divi Booster, Aug 25, 2024
  3. Divi Booster

    Divi Booster Divi Expert

    Thanks for sending me through the link.

    I think what's happening here is that Divi doesn't apply the equal columns code on mobile. I'm guessing maybe this is because they originally designed it to equalize the height of multiple side-by-side columns, but on mobile the columns are vertically stacked rather than side-by-side.

    To get your header vertically centering on mobile, you can add this CSS to your site:

    Code:
    Log In or Sign Up to view this code.
    You can add it in the "WP Admin > Divi > Theme Options > General > Custom CSS".

    It basically makes the relevant parts of the equal columns CSS apply on mobile too.

    I hope that helps!
     
    #3 Divi Booster, Aug 27, 2024
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add more varieties for your Divi header (12 premade styles) + menu hover effects:Learn More
  4. RuggedlyRefined

    RuggedlyRefined New Member
    Pro Member (Support Expired)

    That fixed it! There's still something odd going on once it gets down to mobile size, BUT at first glance that looks to be something affected by a problem with the header (which I will work on next :)).

    Thank you!
     
    #4 RuggedlyRefined, Aug 29, 2024
  5. Divi Booster

    Divi Booster Divi Expert

    Great! To sort the mobile size issue out, try changing the CSS to this instead:

    Code:
    Log In or Sign Up to view this code.
    Divi has a few styles that only apply on very narrow screens (< 480px) and it looks like one of them is affecting the bottom margin on your header - so if we set both top and bottom to auto, I think that should fix all the affected screen widths.

    Hope that helps, but if you're seeing some other issue, let us know.
     
    #5 Divi Booster, Aug 30, 2024
    1. PRO MEMBER PERKS Divi.Help One-Page Layouts - Beautifully crafted one-page Divi layouts just for you:View All Layouts
(You must log in or sign up to post here.)