Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #30407
    Tim
    Member

    Hello,

    I was hoping that by choosing a left sidebar, the sidebar would show up before the page content on a mobile device. Instead, it still shows up after the page content.

    Is there a way to have the sidebar information show before the page content on a mobile device?

    Thanks.

    #30435
    Sakin
    Keymaster

    @Tim: Sorry this option in not there. As in general user have most priority information in Content Section. So, we load the content first and sidebar second.

    At this stage, you can build child theme and then add “Sidebar First Page Template” in your child theme as page-sidebar-first.php. See the code https://gist.github.com/catchthemes/b1b0f49a48c8e9b84fd0

    Then in your page you can select Left Sidebar and in Page template you can choose “Sidebar First Template” and add the following css in child theme style.css

    .left-sidebar #primary {
        clear: none;
    }

    This is bit technical answer. I hope you understand it.

    #30470
    Tim
    Member

    @Sakin–
    Awesome! Seemed to have worked perfectly.

    One thing that doesn’t still show right is, in part due to me, the text in the boxes. BTW, I’m using the text/html widget in the sidebar to highlight services. That is why I want them to show first on the mobile device.

    Anyway, I had modified the style with

    .textwidget ul {
         list-style-type: disc;
    }

    On a big screen, the bullets show fine. On my iPhone, the bullets show outside the box. Is this simple for me to fix?

    Tim

    #30505
    Sakin
    Keymaster

    @Tim: Send me the link where you want to fix it. I will send you custom css.

    #30587
    Tim
    Member

    @Sakin,

    This is the specific page: https://www.itstechnical.net/?page_id=68

    And here is the custom css I added to turn the bullets back on:

    .textwidget ul {
         list-style-type: disc;
    }

    Thanks!

    #30600
    Sakin
    Keymaster

    @Tim: Either you need to add in padding as below:

    .textwidget ul {
        list-style: disc;
        padding-left: 11px;
    }

    Or you need to make the disc inside in bullet as below:

    .textwidget ul {
        list-style: disc inside;
    }
    #30726
    Tim
    Member

    Thanks. I preferred the former as it left the text aligned better.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Sidebar/Page Order on mobile devices’ is closed to new replies.