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 Responsive order of Blog Post Sections - Divi Ultimate Child Theme

Discussion in 'Basic Support Forum' started by Keegan Lanier, Jun 20, 2019.

  1. Keegan Lanier

    Keegan Lanier New Member
    Divi Ultimate Child Theme

    I was going to try and dig in to the code itself, but thought it may be better suited to ask here first.

    I am using the Divi Ultimate Child Theme. Specifically I am using a layout for blog posts which includes the main content area, sidebar and related posts.

    When on a smaller screen, typically Everything on the left (main content area and related posts) would be above the sidebar. The sidebar would stack to the bottom just above the footer.

    What is happening for me is that the main blog post content is first, the sidebar stacks below the main content, then related posts are below the sidebar.

    Is there any way to swap the sidebar to be under the related posts section when the screen size shifts to a smaller size? Ideally related posts would be immediately under the post's main content. Is this attainable?
     
    #1 Keegan Lanier, Jun 20, 2019
    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 Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    This is not achievable using CSS only, because the sidebar is in the same wrapper as the main content. And the related posts is a separate section below it.

    It will require file code edit for the blog template.

    If the sidebar is not important in mobile, what about hiding it in mobile & the related posts will be right below the main content?
    If you wish to do that, just add the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
    #2 Divi.Help Pro Support, Jun 20, 2019
  3. Keegan Lanier

    Keegan Lanier New Member
    Divi Ultimate Child Theme

    I'd thought about that. Will have to talk with the client. The sidebar will house some important CTAs so I doubt they will go for it being hidden completely on mobile. Is it not possible to adjust the template file and change the order on mobile?

    This implementation is a bit strange to me. If someone has an extremely long sidebar, wouldn't this push related posts far away from the main content as well? If the related posts section was coded into the #main-content section, the sidebar would naturally fall below it all when on a smaller device.

    Thanks for the quick response. I apprecaite it.

     
    #3 Keegan Lanier, Jun 21, 2019
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add more varieties for your Divi header (12 premade styles) + menu hover effects:Learn More
  4. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Will need to edit the blog template at Divi-Ultimate-Plugin/blog/du-blog-1.php

    We will look into this to see what we can do & update you.
     
    #4 Divi.Help Pro Support, Jun 21, 2019
  5. Keegan Lanier

    Keegan Lanier New Member
    Divi Ultimate Child Theme

    Makes sense. For some reason I was lookin gat theme files, not plugin files
     
    #5 Keegan Lanier, Jun 21, 2019
    1. PRO MEMBER PERKS Divi Ultimate Child Theme - Tons of premade layouts & section designs + functionalities for your Divi site:Learn More
  6. Keegan Lanier

    Keegan Lanier New Member
    Divi Ultimate Child Theme

    I took Lines 202-248 and moved them to 187-233. It lined everything up the way I'm looking for it to, but styling was off with 3 related posts due to the padding on both sides of the container.

    Also had to add the following to the styles sheet

    Code:
    Log In or Sign Up to view this code.

     
    #6 Keegan Lanier, Jun 21, 2019
  7. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Do note that if you update our assistant plugin in future, you will lose the customization that you made on that blog template. You will need to re-edit the blog template again after updating. Though, it's totally optional for you to update, unless you wish to access the new features.

    If you want, we can add a new option in our assistant plugin to display the sidebar below the related posts in mobile only. What we will do is: Duplicate another sidebar below the related posts that will only be shown in mobile. Then use CSS to hide the desktop sidebar in mobile.

    Let me know.
     
    #7 Divi.Help Pro Support, Jun 21, 2019
    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Industrial' Divi layout for all Pro members:View Demo
  8. Keegan Lanier

    Keegan Lanier New Member
    Divi Ultimate Child Theme

    This would be incredible!

     
    #8 Keegan Lanier, Jun 22, 2019
  9. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Try to re-install Divi-Ultimate-Plugin.zip for v8.0: https://divi.help/threads/divi-ultimate-v8-0-0.2319/#post-7254

    And there should be a new option in Theme Customizer > Divi Ultimate Blog Post > Customize Blog Sidebar > In mobile, move sidebar to footer

    Have a try & let me know if it works for you.
     
    #9 Divi.Help Pro Support, Jun 23, 2019
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add custom vertical navigation for your Divi site. Turns into slide in menu on mobile:Learn More
(You must log in or sign up to post here.)