Can’t make Product Archive page full width

I’ve attached two screen shots. One is of my home page and the other my store (product archive) page. Both pages are set to be full width, I am using Elementor. The home page is full width with no white margin around the page content. The shop page has a white margin and I can’t figure out why. Any thoughts on how I can get rid of that?

My site is not live so can’t give you a URL. if that would be helpful, I’ll try to get it deployed to a public URL.

Attachments:

You must be logged in to view attached files.

I’m using a WoodMart layout for my shop page. I did notice that if I disable the layout, the standard page title eliminates the white margin. so… can I do this with a layout?

Hi russellj,

Thanks for reaching to us.

Please move your site online and provide me with URL, I can give you better answer. Honestly, it’s hard to predict what caused the issue via screenshots.

Thanks for understanding.

Regards,

See the notes to moderates for access to my site.

I cannot figure out how to create a new page and have no margin area around the page content. I\’ve been trying to do this on the home page as well which you will see. I was able to get the content to the top by using margin-top:-40px but this seems fragile. it also isn\’t responsive, note how the margin is incorrect in mobile. any help is appreciated. I would like to configure woodmart so that all pages have no margin on any side around the page content.

I’ve made progress on this by adding custom global css:

.whb-header {
	margin-bottom: 0;
}

.main-page-wrapper {
	margin-top: 0;
	padding-top: 0;
}	
	
.main-page-wrapper .container {
	padding-left: 0;
	padding-right: 0;
	max-width: 100vw;
}

and also changing the sticky header settings to:

Sticky effect = Slide after scroll down
Sticky header clone = On

Not sure if this is the best way or if will have unintended side effects.

Hi russellj,

Thanks for details.

Currently, I can’t access your site, please check again https://prnt.sc/YAGrnBsIdAFb

Regards,

Please try now. I turned off the sticky header clone setting. The problem happens when scrolling as woodmart is calculating a padding-top value for the header that ends up incorrect. you can visually see the problem by loading the page and then scrolling. You’ll see the white gap at the top from the excess padding which is applied in code. I can make appropriate code changes if you can help me understand the proper fix.

thank you.

clarification – you need to resize the browser window width to get to the mobile layout to see the issue. Looks like all the math is done as part of Header_Builder in class-styles.php but fairly complicated logic.

[russellj]

I have isolated the problem to headerBuilder.js, line 37. the calculation of headerHeight is incorrect and results in the gap. not sure the proper fix.

$header.addClass('whb-sticky-prepared').css({
  paddingTop: headerHeight
});

• This reply was modified 8 months, 3 weeks ago by russellj.

I believe I have found the bug. It is reproducible without any css changes. The code in headerBuilder.js runs once and whatever the main header height is at that time is stored. If the user then resizes the desktop browser window to a responsive threshold for mobile, the main header height is smaller but the value used in headerBuilder.js is not recalculated. The fix would be to recalculate the headerHeight and thus reset paddingTop whenever the mainHeader height changes. This fix should be made in the Woodmart theme directly and is not just a patch for my site.

Let me know if you agree or have any other questions for me. Thank you.

this ticket ended up being about a different issue than the container width, sorry if that got confusing. I have a js fix for the padding-top issue when the menubar height changes. currently, woodmartThemeModule.headerBuilder() is not called dynamically when the header resizes, such as during a media transition from desktop to mobile. I can patch this in my site by adding the following custom JS on document ready:

(function($) {

	const resizeObserver = new ResizeObserver((entries) => {
		const entry = entries[0];
		woodmartThemeModule.headerBuilder();
	});

	var el = $('.whb-header')[0];
	resizeObserver.observe(el);

})(jQuery);

I believe a permanent fix should be made directly in the woodmart, likely in helpers.js.

Hi russellj,

Glad to hear your issue has been resolved and sharing your solutions. Keep us in mind for future questions and concerns, we’re always here to help!

Regards,

Hung, I am recommending you make the change to add a resizeObserver in helpers.js in the addEventListener() function

Hi russellj,

Our developer will takes a look. Keep us in mind for future questions and concerns, we’re always here to help!

Regards,

[Author]

Posts