I have tried adding this to style.css:

.sidebar, .widget-area, .secondary {
position: absolute
    margin-left: 120px;
    max-width: 250px;
}

But it won't move. If I remove position:absolute, it is pushed down, getting under all the other content.

  • The blog sidebar is already in the right side, which sidebar are you referring to? – David Lee Sep 5 '17 at 14:43
  • isn't... isn't the sidebar already on the right sidebar in twenty seventeen? srd.wordpress.org/themes/twentyseventeen – kuchenundkakao Sep 5 '17 at 14:44
  • Sorry for being unclear, @DavidLee, what I meant was "more to the right". It is already on the right side but it's not as far right as I'd like it. I have corrected the title. – DisplayName Sep 5 '17 at 15:28
  • Pure CSS questions are off topic here. – Pat J Sep 5 '17 at 15:41
up vote 2 down vote accepted
+50

You have 2 options:

Option 1.

Just add negative margin to the sidebar CSS like this:

@media screen and (min-width: 48em){
    #secondary{
       margin-right:-150px;
    }
}

Option 2.

Add more max-width to the wrapper:

@media screen and (min-width: 48em){
    .wrap{
        max-width: 1340px;//the default is 1000
        padding-left: 348px;//you have to add padding left so the left side doesnt move, the amount needs to be proportional to the amount of max-width you are incrementing
    }
}

i added the media query, its needed so this CSS doesnt affect the mobile view.

there are 2 pieces of code in the css:

.has-sidebar #secondary {
    float: right;
    padding-top: 0;
    width: 36%;  //change this to change the sidebar width
}

.has-sidebar:not(.error404) #primary {
    float: left;
    width: 58%; //counter the changes above with this code (increase this if you decrease the sidebar etc..
}

if you're looking to change the overall width of the content so that the sidebar moves altogether more to the right than increase the overall wrap width by changing this code:

.wrap {
    max-width: 1000px;  // increase this number to increase the width of your site.
    padding-left: 3em;
    padding-right: 3em;
}

Of course these changes can be made by adding these to your style.css of your child theme

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.