Moving Sidebar Right
  • mikemike
    February 2013
    It's super easy to move your sidebar to the right. Just copy/paste this CSS to the bottom of your style.css file:

    body #sidebar {right:0px; border-left:2px solid #e7e7e9; border-right:none; }
    .lt-ie8 body.page-template #sidebar {right:0px;}
    body {background-position:top right; background-image:url(images/sidebar-right.png);}
    body #content {padding: 22px 318px 15px 20px;}
    body #page-content { float:right; max-width:100% !important; margin-left:0px; margin-right:293px; border-left:2px solid #e7e7e9; border-right:none ; border-bottom:2px solid #e7e7e9;}

    /* Tablet Styles */
    @media only screen and (min-width: 768px) and (max-width: 959px) {
    body #content {padding: 22px 0px 15px 18px;}
    body #page-content, body #full-width {margin-left:0px; margin-right:0px; padding: 22px 30px 15px 34px; background:#ffffff; border-right:2px solid #e7e7e9; border-bottom:2px solid #e7e7e9; max-width:1000px;
    }

    }

    /* Mobile Styles */
    @media only screen and (max-width: 767px) {
    body:after {content: "0 to 480px"; background-color: hsla(90,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */

    body #content {padding: 22px 0px 12px 18px;}
    body #page-content, body #full-width { padding: 22px 20px 12px 20px;margin-left:0px;margin-right:0px;background:#ffffff;border-right:2px solid #e7e7e9;border-bottom:2px solid #e7e7e9; max-width:1000px;
    }

    }
  • Is the padding correct on this, I'm getting the left margin cut off on iPhone.
  • Yeah I see what you mean.

    I believe the problem is not with the code above, but with your 2 google ads.

    First, locate the #sidebar {
    width: 270px!important;
    }


    And remove the !important.

    Next, set your sidebar-widget to:
    @media only screen and (max-width: 767px) {
    #sidebar-widgets {
    width: 90% !important;
    padding: 20px 5% 30px 5% !important;
    }
    }


    I would also check both google ads, and the scroll-back-to-top plugin, as their width could break to formatting.
  • Disabled all plugins, disabled all ads.

    Added the code. No change in layout.
  • Try to add this line:
    @media only screen and (max-width: 767px) {
    #sidebar {
    width: 90% !important;
    }
    }
  • Still nothing. Disabled all ads and plugins. Same problem.

    FYI-I'm going to use a Mobile theme (just for mobile devices), until we get this figured out.
  • Could you please send an image describing the issue?

    Also, only if you leave our theme for mobile I could look into it, otherwise it would be difficult to help.
  • Ok,

    http://popworkouts.com/the-issue/

    I took a screenshot of what it looks like on an iphone and posted it here. You can also reproduce the issue by minimizing the width in firefox (but not chrome or safari).

    I disabled the mobile theme, so you can take a look.

    Thanks,
  • So are you referring to a single post?

    When browsing on this page with firefox:
    http://popworkouts.com/jessica-simpson-workout-diet-weight-loss/

    I could see the issue. Here's a fix:
    @media only screen and (max-width: 767px) {
    body #page-content {
    max-width: 90% !important;
    }
    }


    Note that there are still elements that are too wide for a mobile display (for example the tables, and probably the back to top plugin)
  • Perfect!

    It works great. Now, I have all this code:


    @media only screen and (max-width: 767px) {
    #sidebar-widgets {
    width: 90% !important;
    padding: 20px 5% 30px 5% !important;
    }

    }

    @media only screen and (max-width: 767px) {
    #sidebar {
    width: 90% !important;
    }
    }

    @media only screen and (max-width: 767px) {
    body #page-content {
    max-width: 90% !important;
    }
    }


    Should I delete either of the first two snippets?

    Thanks,
  • Yeah I believe the first two are not relevant to the issue you described.
  • URL: http://popworkouts.com/images/sidebar-right.png

    This is coming up as a 404, since I moved my sidebar from the left to the right. (webpagetest.org)

    Is there a way to add this?
  • You can either remove the line from the CSS completely, or simply remove the '-right' from the link.

    Though note this would cause a tiny formatting issue so you'll have to move your top ad banner to the left.
  • radistasradistas
    August 12
    Hi,
    you had here a big discussion , so can you tell now what the completely correct code to move sidebar right (with no bugs)
    Thks.
  • Hi,

    The initial solution should work. The discussion was due to the other user's customization.

    If something doesn't work correctly, please send us a link to your site and we'll check that out.