Hey,
I am looking to make it so that my product page is centered at all times.
Website: Wholesome Boy
Current:
What I want:
It seems like someone has edited your theme code and added the AOS animation. This might have had an effect on the settings and changed the layout. With the dawn theme, everything is aligned automatically, and that’s how it is built. I had a quick look at your code, and adding this small block of code might fix the issue. Your page has 50px padding on both the left and right; hence, I used 50px. Hope it helps
@media screen and (min-width: 750px)
.header.page-width {
padding-left: 50px;
padding-right: 50px;
}
Where do I place this code?
Click on “Edit Code.” search for “base.css”. Scroll to the very bottom of the page and paste the code. Hit save, and hopefully it will work. If it does not, edit the code and delete the code you just added.
@media screen and (min-width: 750px)
.header.page-width {
padding-left: 50px;
padding-right: 50px;
}
- From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
- Go to Asset folder and open the base.css file
- At very end of the code, add the code below
@media screen and (min-width: 990px) {
product-info.product__info-container {
max-width: unset;
}
.product--medium:not(.product--no-media) .product__info-wrapper, .product--small:not(.product--no-media) .product__media-wrapper {
max-width: calc(50% - 4rem);
width: calc(calc(50% - 4rem) - var(--grid-desktop-horizontal-spacing) / 2);
}
}