Woocommerce content margin

anusha75
(@anusha75)

6 years, 7 months ago

Hi,

Please recommend what to do. attached screenshot. The woocommerce content area part is too far away from the side bar on the left. How do I fix that so it the margine are as 20% side bar+padding – 80% woocommerce content area.

20-60-20 is what I have used in the rest of the site and it works.
the problem only seems to be happening on woocommerce pages.

The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)

Amit Singh
(@apprimit)

6 years, 7 months ago

Hello,

Go to Customize > Woocmmerce > Archive and single Product section – select two sidebar style to fix it.
If you want to use only one sidebar, then you need to add some css code to do it.

Thread Starter anusha75
(@anusha75)

6 years, 7 months ago

Alright. It’s one side bar on the left.
What would be the css selector for that please?

Thanks
Amit Singh
(@apprimit)

6 years, 7 months ago
Use the below code to do it –
```
.single-product .content-area, archive.woocommerce .content-area {
 width: 72%;
}
.single-product .widget-area, archive.woocommerce .widget-area {
 width: 28%;
}
```
Thread Starter anusha75
(@anusha75)

6 years, 7 months ago

I tried this Amit, but for some reason nothing changes. not even a pixel.

Also while the elementor (free version) is taking 1170px as content width. it does not recognise the #primary content area for Pages (area between the two side bars) as 640 but as 452.8px) I am using elementor only on pages and not on posts. I have checked the elementor settings, the stretch section fit to area is empty. So it should take the defined #primary width. It just doesn’t. What I am doing wrong? Maybe if we solve this, we can solve the woocommerce are problem too?

thanks so much.

Amit Singh
(@apprimit)

6 years, 7 months ago

Go to Dashboard > Elementor > Settings > Style tab and try to adjust the width. Check it works or not.

Thread Starter anusha75
(@anusha75)

6 years, 7 months ago

Hi Amit, it doesnt. I shall try explaining again

My general site content area is 1170 px (including 2 sidebars, main blog content and padding). but on woocommerce pages where I have only used one sidebar, then elementor (non pro) only for a custom header, it suddenly changes the margins narrowing the width of content area by about a 100 pixels. I have noticed this in some “pages” too, if there is a side bar then the content area narrows done if i use one side bar or two.
I have checked elementor content area space settings, and it is 1170px the same as theme settings, as per my preference. can you recommend what might be going wrong..help please?

Amit Singh
(@apprimit)

6 years, 7 months ago

Can you please share your site link? Without seeing it, I can’t tell why it is happening.

Thread Starter anusha75
(@anusha75)

6 years, 7 months ago

I can. It’s a staging site to view but it has a username password that I can share. Would you be comfortable with that ? if so can I do it privately. you will NOT have access to the WP back end.

Amit Singh
(@apprimit)

6 years, 7 months ago

I can’t ask for any sensitive information in this forum. It is against the forum guideline. Hope you understand it. I understand your concern but I can’t.
Thread Starter anusha75
(@anusha75)

6 years, 7 months ago
That’s alright meanwhile i figured this out with some help.
But now I am stuck at a solution. The culprit of margin conflict is woocommerce.

Woocommerce is adding lines in the header sections of even NON WOO-COMMERCE PAGES and that is creating a conflict between theme’s left and right margins. (sidebar/content area/sidebar)
ideally my left .widget-area is 28%.

But If I inspect element and uncheck this line below added by woocommerce it fixes the layout.
Line added by woocomerce -> @media only screen and (min-width:960px){.widget-area,.content-left-sidebar .widget-area{width:20%}}

The same is happening in the actual woocommerce pages. which has one sidebar

Line 1 added by woocommerce -> @media only screen and (min-width:960px){.widget-area,.content-left-sidebar .widget-area{width:20%}}
Line 2 added by woocommerce -> @media only screen and (min-width: 960px) .content-area, .content-left-sidebar .content-area {width: 60%;}
If you uncheck these two widths in inspect element it seems to fix the left right margin problems

Overall this spacing issue is caused by the way woocommerce is applying styles to sidebars and primary content area. I am thinking we can override these styles in custom css. But Can you recommend the actual custom css to try and fix this? how do I fix this.

It seems to be doing this in any page on the site that has a sidebar or two, (not posts) plus all other woocommerce pages.
- This reply was modified 6 years, 7 months ago by anusha75.

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Woocommerce content margin’ is closed to new replies.