At above page, I have set up at Appearance > Woo commerce Single product > Content Area Style to Wide. But it is still be boxed with left and right padding.
If I set up the Maximum Site Width at General Options > General > Layout to 1900px, the website could be full width on PC device but still be boxed like it shows now on Mobile device.
Hi @min4836
There is an option in Elementor that will help you make a certain section full width, please see this video – https://d.pr/v/EoDwy8
Hope this helps.
Hi,
Yes, I try this option before. But the mobile layout will be full width only when I set it to be Full Width Section + Full Width Content Width.
If I turn on Full Width Section and keep Content Width Boxed. The mobile container will still remain padding/margin.
But If Full Width Section is on + full width content, the container on all devices will be full width, it will be not aligned to header and footer width. I can only control container width by % left and right padding. For example, I set 10% left and right padding, then on difference media screen, the 10% left and right padding produce diffeent width and also won’t align to header and footer. That confused me a lot.
I also try to create duplicated sections, one for PC and tablet devices, another for mobile. But it seems to slow down the website loading speed.
So I wonder if this problem can be solved by simpler method like CSS code.
Best
Cary
Hello @min4836,
Please try this custom CSS, it should disable the left/right spacing only on mobile devices:
@media (max-width: 690px) {
.single-product .site-main {
--container-width: 100%;
}
}
Let us know if this helps.
hi and tx for reply,
I puted code into CSS and it works perfectly.
Tx a lot for your help. Blocksy Theme YES!!!!!
Best regards
Hello @min4836,
You’re welcome, glad it works fine 🙂
Have a nice day!
