Announcement

Collapse
No announcement yet.

Formatting double sidebar in responsive design

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Formatting double sidebar in responsive design

    Hi. I am working on a website that uses a double right sidebar on most of the pages and posts. In the responsive view for all devices wider than 480px I would like to position the two sidebars next to each other. I have added this code to the Table Portraint to Tablet Landscape Specific @media query (3rd):
    body.override .sidebar-primary {
    width: 45%!important;
    float: left;
    }
    body.override .sidebar-secondary {
    width: 45%!important;
    float: right!important;
    }
    However, whilst it resizes the sidebars and positions them left and right the secondary sidebar is below the primary sidebar.
    When I look at Firebug I notice that my code has not overridden the default code as this is still active:
    body.override .sidebar-primary, body.override .sidebar-secondary {
    width: 100%;


    }

    How can I get the two sidebars to sit side-by-side?
    Last edited by Fiona; 12-13-2016, 06:47 PM.

  • #2
    Not sure if I get your right, but: To float next to eacher other side by side like that, your sidebars would have to be contained in the same div, but they aren´t (can be seen in your screenshot).

    Comment


    • #3
      Thanks for your response. I hadn't noticed that! So the primary sidebar is in the same div as the content, but the secondary sidebar is in a different div. This is how a double sidebar is organised in the theme, so I guess there is nothing I can do about it? Unfotunately the primary sidebars on different pages are quite different heights, otherwise I could fix the height and then reposition the secondary sidebar. Thanks, now I understand that I will have a think about it...

      Comment


      • #4
        Well you could remove the secondary sidebar and hook it back in at a different hook location to get it in the same div (PHP snippets, Google should come up with those). This might cause you to re-write some of the Dynamik CSS for this sidebar though, I don´t know if it´s worth the hazzle....

        Comment


        • #5
          I was able to do this on http://www.csworldcargo.com/
          Using this CSS.

          @media only screen and (min-widthx) and (max-widthx) {

          body.override .sidebar-primary, body.override .sidebar-secondary {
          float: left;
          width: 48%;
          }

          body.override .sidebar-secondary {
          float: right;
          width: 48%;
          }

          }

          Comment

          Working...
          X