[winifredarumemiParticipant]

Hi X-theme team,
I was just about ready to launch the site I’m working on when we decided to adde commerce functionality. I’ve managed to modify a few things on the woocommerce shop page to fit in with the appearance of the rest of the website. I’m stuck on the layout of the shop page though, I would like the main content to appear with a margin of 30px on the left and right which actually works great on full sized screens. Once the size of the screen is less than 1000px though, the margin disappears and it all looks very strange.
These are the changes I’ve made so far to the css style sheet in the child theme;

.archive .x-container.max.width.offset, .woocommerce .x-container.max.width.offset {
background-color: white;
margin: 0px 30px 30px auto;
padding: 30px;
max-width: 940px;
}

.archive .x-header-landmark {
background-color: white;
margin: 30px 30px 0px;
padding: 30px;
}

.archive .x-landmark-breadcrumbs-wrap {
text-align: center;}

What do I need to add to make sure the margin remains as it should on smaller screen sizes.

Thanks so much for your help!

PS. Log in details to follow

[winifredarumemiParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

Please try this code:

@media (max-width: 999px) {
    .woocommerce.single-product .x-container.max.width.offset {
        margin: 0 2% !important;
        width: 96%;
    }
}

Hope this helps.

[winifredarumemiParticipant]

Hi Jade,
You guys are amazing as ever. That worked great. I also applied the same style to the x-header-landmark class so that they would be doing the same thing.
Thanks so so so so much.
😀

[FriechModerator]

Glad we could help, feel free to get in touch with us regarding any further queries about the X|Theme and Cornerstone.

Cheers!

[Author]

Posts