DAWN THEME: Center Product Info Container

[skymochi]

How do I center my product info container without impacting anything else?

Would like it so the product info stays center no matter how much information or how long the description is without such a huge margin on top/padding on top.

PRODUCT PAGE

[Vortifytech]

This is actually happening when we are not adding any image to our product, themes developers actually added a global class and style all inner items, that if no media text align center or item center. So if you have not added any image to your anyone product you will see the content for that product will be in center.

if you want this on your product page even you have added image then share the link we can check this form our End.

Thanks.

[skymochi]

Hello. There is an added image already — please assess provided in the original post.

[Vortifytech]

THE TEAM TEE

Is this your store product page link and you want to remvoe the white space right ?

[skymochi]

Not remove the white space but as pictured—the margin on top is excessive above the product info container. I’d like simply center the product info on the screen.

[Vortifytech]

To solve this white space issue:
Step 1:
Go to the css file by name: section-main-product.css

Find the below code and replace with new one i added

Replace this code: 

@media screen and (min-width: 750px) {
    .product__column-sticky {
        display: block;
        position: sticky;
        top: 25rem;
        z-index: 2;
    }
}

With: 

@media screen and (min-width: 750px) {
    .product__column-sticky {
        display: block;
        position: sticky;
        top: 25rem;
        z-index: 2;
    }
}

Step 2:

Replace this code: 

@media screen and (min-width: 990px) {
    .product--large:not(.product--no-media) .product__info-wrapper {
        padding: 0 0 0 4rem;
        max-width: 35%;
        width: calc(35% - var(--grid-desktop-horizontal-spacing) / 2);
        margin-top: 15% !important;
    }
}

With:

@media screen and (min-width: 990px) {
    .product--large:not(.product--no-media) .product__info-wrapper {
        padding: 0 0 0 4rem;
        max-width: 35%;
        width: calc(35% - var(--grid-desktop-horizontal-spacing) / 2);
        margin-top: 5% !important;
    }
}

Make change these changes and save the code and then you will see this will be show like this:

Thanks

[skymochi]

Hi, Sorry — aren’t these codes the same?

@Vortifytech

Replace this code: 

@media screen and (min-width: 750px) {
    .product__column-sticky {
        display: block;
        position: sticky;
        top: 25rem;
        z-index: 2;
    }
}

With: 

@media screen and (min-width: 750px) {
    .product__column-sticky {
        display: block;
        position: sticky;
        top: 25rem;
        z-index: 2;
    }
}

Replace this code: @media screen and (min-width: 750px) { .product__column-sticky { display: block; position: sticky; top: 25rem; z-index: 2; } } With: @media screen and (min-width: 750px) { .product__column-sticky { display: block; position: sticky; top: 25rem; z-index: 2; } }

[namphan]

Hi @skymochi,

Please go to Customize > Theme settings > Custom CSS and add code:

@media screen and (min-width: 990px) {
    .product--large:not(.product--no-media) .product__info-wrapper {
        margin-top: 0 !important;
    }
    .product--large:not(.product--no-media) .product__column-sticky {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}

If I helped you, then a Like would be truly appreciated.

[oscprofessional]

Hii @skymochi

To solve your issue:
Step 1:
Go to the CSS file: section-main-product.css

Find the below code:
@media screen and (min-width: 990px) {
.product–large:not(.product–no-media) .product__info-wrapper {
padding: 0 0 0 4rem;
max-width: 35%;
width: calc(35% - var(–grid-desktop-horizontal-spacing) / 2);
margin-top: 15%!important
}
}
Replace this code with:

@media screen and (min-width: 990px) {
.product–large:not(.product–no-media) .product__info-wrapper {
padding: 0 0 0 4rem;
max-width: 35%;
width: calc(35% - var(–grid-desktop-horizontal-spacing) / 2);
}
}

Step 2:
.product__info-wrapper.grid__item {
margin-top: 8% !important;
margin-left: 6% !important;
margin-right: 6% !important;
}

Replace it with:
.product__info-wrapper.grid__item {
margin-top: 4% !important;
margin-left: 6% !important;
margin-right: 6% !important;
}

Step 3:
@media screen and (min-width: 750px) {
.product__column-sticky {
display: block;
position: sticky;
top: 25rem;
z-index: 2;
}
}

Replace it with:
@media screen and (min-width: 750px) {
.product__column-sticky {
display: block;
position: sticky;
z-index: 2;
}
}

Save this changes and you will get the result: