Blockshop - Disable 3 columns on Product Page

[hannahdossary]

Hi, I’m using the Blockshop theme and I noticed that when the page is larger than 1280px, the product page shows as 3 columns which I don’t like at all.

Does anyone know how I can force it to only show 2 columns on desktop, and once it gets to a certain width (lets say 1280px), it shows negative space on the sides?

My site preview is: https://bichtsv44fupewq7-345362.shopifypreview.com

Thanks so much!

Hannah

[AvadaCommerce]

Hi @hannahdossary ,

Do you mean you want the maximum container to be 1200px?? Can you confirm again?
If not, you can send us a mockup so we can get an idea of what you mean

Thanks

[hannahdossary]

hi @AvadaCommerce

Yes that would be ideal so that the rule to move the layout to 3 columns doesn’t work.

I’ve attached 2 images below of the specific page at roughly 1400px.

Image 1 shows how i would prefer it to be, with container set to 1200px max and the rest of the browser width empty.

Image 2, shows how it currently moves to 3 columns (responsive)

Thanks so much

Hannah

[AvadaCommerce]

Hi @hannahdossary ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme–critical.css->paste below code at the bottom of the file:

@media (min-width: 1280px) {
    .product-page--main-content {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
    }
    .product-page--main-content .product-page--left-column {
        width: 40%;
    }
    .product-page--main-content .product-page--center {
        width: 60%;
        padding-right: 0;
    }
    .product-page--main-content .product-page--right-column {
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
    }
    .product-page--main-content .product-page--right-column .product-page--block {
        width: 40%;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[hannahdossary]

hi @AvadaCommerce

This how it looks when i added the code. any ideas what has happened?

Thanks

Hannah

[AvadaCommerce]

Hi @hannahdossary ,

You try replacing the previous code with the one below:

@media (min-width: 1280px) {
    .product-page--main-content {
        max-width: 1200px;
        margin: 0 auto;
        display: flex !important;
        flex-wrap: wrap;
    }
    .product-page--main-content .product-page--left-column {
        width: 40%;
    }
    .product-page--main-content .product-page--center {
        width: 60%;
        padding-right: 0;
    }
    .product-page--main-content .product-page--right-column {
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
    }
    .product-page--main-content .product-page--right-column .product-page--block {
        width: 40%;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[hannahdossary]

This is perfect, thanks so much for your help @AvadaCommerce

[hannahdossary]

Hi @AvadaCommerce

I just noticed something weird happens after 1280px.

Before 1280px, the thumbnails are locked to underneath the main image. this means than when the collapsible tab is enlarged, it doesnt move up and down (see screenshot 1279px).

After 1280px, the thumbnails seem to jump to the right and become part of the row with buttons (.product-page–right-column). They now jump up and down with the collapsible tab opening/closing. See screenshot 1280px

Do you know what i can do to stop this happening?

Thanks!

Hannah

[AvadaCommerce]

Hi @hannahdossary ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme–critical.css->paste below code at the bottom of the file:

@media (min-width: 1280px) {
.product-page--main-content .product-page--right-column {
    display: none !Important;
}
.product-page--thumbs[data-position=image-column],
.product-page--block[data-block-type=thumbnails] {
    display: block !important;
}}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[hannahdossary]

@AvadaCommerce

Thank you! so close, thats much better. but now the buttons aren’t showing up as they were part of Right Column.

I tried re-adding it back in with this code but it doesn’t work.

.product-buy-buttons[data-position=left-column],
.product-page--block[data-block-type=buy-buttons] {
    display: block !important;
}

Any idea what else i should add to bring in the buttons back?

[AvadaCommerce]

Hi @hannahdossary ,

You try replacing the previous code with the one below:

@media (min-width: 1280px) {
.product-page--main-content .product-page--right-column .product-page--block:first-child {
    display: none !Important;
}
.product-page--thumbs[data-position=image-column],
.product-page--block[data-block-type=thumbnails] {
    display: block !important;
}}

[hannahdossary]

It now makes the buttons jump to the right column.

sorry!!

[AvadaCommerce]

@hannahdossary ,

You try below code:

@media (min-width: 1280px) {
.product-page--main-content .product-page--right-column {
    flex-direction: unset !important;
}
}

[hannahdossary]

Hi @AvadaCommerce

thanks for the code. sorry to be a pain but it still shows a big gap between the text and the buttons.

it looks like the grid isnt working the same as <1279px.