How to change the margins and position of sidebar

Hello everybody;

I hope you a nice day.

We want to change the margins of the sidebar in some pages. We have done in the blog with this CSS code:

body.blog #primary {
width: 100%;
margin-right: 5%;
margin-left: 0%
}

#secondary {
width: 25%;
margin-right: %;
margin-left: 5%
}

But in the rest of pages we can´t do it. Could you help us?
One of the pages is the woocommerce shop (id 11). Other is the woocommerce checkout Id 13.

Thanks.

Hello there,

I hope you are doing well today also.

Could you please provide a link to the page in question so that I can inspect it?

Best Regards,
Support

Good Morning;

Of course I provide you the link. We want adjust margins from body text and sidebar in the pages we show it (shop, products, etc). Top, botton, left and right margins and the width of both. If you provide me the CSS code I try to adjust the px or %.
The web URL is: http://lacasarevuelta.com
And example of page: http://lacasarevuelta.com/tienda/ There is too less space between the main text body and the sidebar

Thanks.

Please use the following CSS code to adjust it on all woocommerce pages.

body.woocommerce-page .main-content-inner.col-sm-12.col-md-8 {
    width: 70%;
    margin-right: 5%;
    margin-left: 0;
}
body.woocommerce-page #secondary {
    width: 25%;
    margin-right: 0;
    margin-left: 0;
}

Hello;

Thanks for your help. Now we have a problem with the movil phone version, the product buttons are cut and the sidebar bar is shown to narrow and we can´t change it adjusting margins.

I send you images attached

Thanks.

To resolve mobile issue please try changing above shared CSS code as following.



@media (min-width: 767px){
body.woocommerce-page .main-content-inner.col-sm-12.col-md-8 {
    width: 70%;
    margin-right: 5%;
    margin-left: 0;
}
body.woocommerce-page #secondary {
    width: 25%;
    margin-right: 0;
    margin-left: 0;
}
}

Good Sunday;

Thanks the within problem is solved, but one more issue, “option buttons” text is longer than its own button, how we can change the text for example “OPCIONES” instead “SELECCIONAR OPCIONES”?

Thanks a lot.

On smaller screens we can break the button text in two lines when it doesn’t fit on the button by using the below CSS code.

.woocommerce ul.products li.product .button {
    white-space: pre-line;
}

Hello, thank you very much, everything ok now.

You are most welcome here :slight_smile: