Changing width margins on woocommerce pages (shop, basket, checkout)

[fxground]

Hello,

I’ve used this code to change my margin widths on the main pages:
@media (max-width: 480px ) {
.x-brand {
float: none;
margin: 15px 0 0;
text-align: center;
}

However all my shop pages do not have the same margins apply and the text goes right to the edge of the screen on mobiles.

Do i need to replace x-band with something else for the woocommerce pages?

[tristup]

Hi @fxground,

The class .x-brand that you have used in your custom CSS code is used for the logo section, which common to every page. I would recommend you to add the page-specific class as prefix to it. Like you can add .home to implement it in the Home page or .blog for the Blog page.
Code may look like the following.

@media (max-width: 480px ) 
{
    .home .x-brand 
    {
        float: none;
        margin: 15px 0 0;
        text-align: center;
    }
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks