Support » Theme: DevDmBootstrap3 » Left sidebar is showing on the top of the content in portrait and mobile view

  • Resolved wp-newbee

    (@wp-newbee)


    Hello,
    Thank you for the wonderful theme. I really like it. However, I have a little problem. I set my layout using left sidebar and it is showing on the top of the content in portrait and mobile view instead of after. Would you please give me some insight how to fix it. So, when user is in mobile view or iPad portrait see the blog first then see the sidebar.

    Thank you,
    Azi

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author DevDm

    (@devdm)

    Sure Azi.

    To solve this problem you can use jQuery to “reorder the divs.”

    Here is a stackoverflow about how to do it.

    Basically you will write a script that detects the window/screen size and then executes this “reordering.”

    Hope this helps.

    http://stackoverflow.com/questions/10088496/jquery-reorder-divs

    Hi DevDm,
    Thank you for your respond. I wanted to just reorder the sidebar for iPad and mobile view and I am not savvy enough using jQuery for that matter, but I created a new sidebar to only show after content by calling it from style sheet for @media(max-width: 768px)and that did fix my problem.
    Thank you again for taking your time and get back to me.

    Best,
    Azita

    I know this was 10 months ago now, but any chance you can share the code you used to get around this or at least point me in the direction? Currently have a left sidebar that i need to fall under content in mobile view. Are you creating two sidebars, and just hiding one and displaying the other at certain widths? thanks!

    Theme Author DevDm

    (@devdm)

    Hey Retrokevin,

    I did some messing around and came up with this. Keep in mind I’m not a JS wizard.

    You’ll need to create some files in your child theme (if you don’t have them already) to follow along here.

    functions.php
    /js/reorder-sidebars-mobile.js

    In your functions.php you want to enqueue the script

    <?php
    
    /**
     * Proper way to enqueue scripts and styles Child Theme
     */
    
    function devdmbootstrap3_child_theme_scripts() {
        wp_enqueue_script( 'reorder-sidebars-mobile', get_stylesheet_directory_uri() . '/js/reorder-sidebars-mobile.js', array(), '1.0.0', true );
    }
    
    add_action( 'wp_enqueue_scripts', 'devdmbootstrap3_child_theme_scripts' );

    In your reorder-sidebars-mobile.js file you can use this code

    jQuery(document).ready(function( $ ) {
    
        var mobilewidth = "767";
    
        if ($(window).width() < mobilewidth) {
            $('.dmbs-left').insertBefore('.dmbs-right');
        }
    
        $( window ).resize(function() {
            if ($(this).width() < mobilewidth) {
                $('.dmbs-left').insertBefore('.dmbs-right');
            } else {
                $('.dmbs-left').insertBefore('.dmbs-main');
            }
        });
    
    });

    The first function sets the “order” when the window is loaded. Moves the left column on top of the right column if mobilewidth threshold is hit.

    The re-size function will ping every time the window is re-sized. I “think” this is triggered with a screen rotation so we are doubling up to cover all our bases. It will also put the left sidebar back when the threshold is detected as no longer hit.

    Hope this helps!

    Thanks a ton for this! I’ll be trying it tonight. In the mean time i found a simple css trick that seems to be working. Something a long the lines of
    `@media only screen and (max-width: 1023px) {
    .content-sidebar-wrap {display:table;}
    .content {display:table-footer-group; float: none;}
    .sidebar {display:table-header-group; float: none;}
    }`

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Left sidebar is showing on the top of the content in portrait and mobile view’ is closed to new replies.