How do I move the sidebar more to the right in TwentySeventeen?

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.

Topic theme-twenty-seventeen sidebar Wordpress

Category Web


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

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.