There is going to be quite a bit of exposition and reference to screenshots so buckle up:
We want our product pages to look like this:
Two columns with the section itself centered
they currently look like this:
Three columns (title-n-vendor, cart-form and media) with the section centered
The original lay out was more or less this:
So the basic formatting has been done but I can’t figure out how to further change the layout without distorting the page as explained below
Hiding or deleting the section of code results in:
Or with the media on top if i also move the section of code to the first position
If i move the media code to the first position without removing title-n-vendor, I get this:
I’m so close but can’t quite crack this one.
feel free to inspect the live page if needed:
https://thesunshopp.com/collections/mens-sunglasses/products/nike-adrenaline-ev0605-011-mercury-gray-silver-gray
Thanks
Hi! Did you figure out how to change it to 2 columns and centered? I waned to do the same on my store.
Yes I have actually:
This will be somewhat technical but explained in n nontechnical manner. I will do my best to be as clear as possible.
Use the web developer tools to inspect product-page–main-content:
in the middle section you will see a section with “grid-template-columns” in blue.
Each “minmax” represents a column and what percentage of space it occupies and its positioning represents what column number it is.
you can add or remove columns just by adding or deleting another “minmax” as you see fit
you then need to go through each section (cart form, description etc.) and make sure they are in the column you desire:
once the layout is to your liking, click the light grey text at the top of the section where you edit the grid column information.
copy and paste the entire section to your theme–async.ccs replacing everything currently in there.
as always, make sure to save a backup before you actually edit any code.
and that should do it.
