[Resolved] Woo Product pages not centered (off to the right)

[Brent]

I’m having issues with my woo product pages not being centered and they seem to be shifted right. I have widgets disabled on product pages and I have tinkered with layout settings, but at least on desktop and not mobile descriptions and tabs seem to be shifted to the right. Any suggestions would be welcomed.

I’m trying to have the text more centered, but I believe the image is moving it right.

Thanks.

[Fernando]

Hi Brent,

May we know how you prefer it to look like? Where should the image be if the text is put in the center?

[Brent]

Hi,

The Image should be right above the “Description” and “Additional Information” tab aligned with the text below and be centered left with the text description.

The to Add cart and product title should be to the right and centered but centered right.

[Brent]

Here is a web page that looks correct that is not my website in private information.

[David]

Hi there,

did you import a site from the Site Library ? If so check in your Customizer > Additional CSS and look for:

@media (min-width: 768px) {
    .single-product #right-sidebar {
        float: right;
    }

    .single-product div.product .woocommerce-tabs,
    .single-product div.product .related.products,
    .single-product div.product .upsells.products {
        width: 66%;
        display: inline-block;
    }
}

DEELTE THAT CSS. And make sure you clear your Litespeed caches afterwards

[Brent]

Ok, thanks…yes it’s a site from the site library. Quite a bit of CSS with a few additions over the years.

/* GeneratePress Site CSS */ /* Typography */

.single-post .entry-content *+h2 {
    margin-top: 48px;
}

h2.large-heading {
    font-size: calc(28px + (64 - 28)*(100vw - 400px)/(1600 - 400));
    line-height: 1.1em;
}

.single-post .entry-header {
    text-align: center;
}

::selection {
    background: #1dd19b;
}

/*-- Buttons and input elements --*/

a.button,
.wp-block-button__link,
.happyforms-submit,
.woocommerce button.button {
    -webkit-box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
    -webkit-transition: all .15s ease;
    transition: all .15s ease;
    border-radius: 4px !important;
}

a.button:hover,
a.wp-block-button__link:hover,
.woocommerce button.button:hover {
    -webkit-box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
    box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

/* Block Styling */

.bg-grey {
    background-color: #f2f3f4;
}

.column-banner {
    padding: 64px 56px 64px 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

}

.center-vertical {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

hr {
    height: 3px;
}

@media (min-width: 769px) {
    .forty-sixty-columns .wp-block-column {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 55%;
        flex: 1 0 55%;
    }

    .forty-sixty-columns .wp-block-column:first-child {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 35%;
        flex: 1 0 35%;
    }

    .sixty-forty-columns .wp-block-column {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 35%;
        flex: 1 0 35%;
    }

    .sixty-forty-columns .wp-block-column:first-child {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 55%;
        flex: 1 0 55%;
    }
}

/*-- Headers, Page Heros and Entry Header */

.inside-header {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.header-wrap .site-header {
    border-bottom: 1px solid transparent;
}

.site-header {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.tax-product_cat .woocommerce-products-header {
    display: none;
}

/* Navigation and Links */

@media (min-width: 768px) {
    .main-navigation .menu>.menu-item>a:before,
    .main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
    .loud-link a:before {
        content: "";
        position: absolute;
        display: block;
        bottom: 1em;
        width: 0%;
        height: 2px;
        background-color: currentColor;
        -webkit-transition: 0.3s width ease;
        transition: 0.3s width ease;
    }

    .main-navigation .menu>.menu-item:hover>a:before,
		.main-navigation .menu>.menu-item.sfHover>a:before,
    .main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
    .loud-link a:hover:before {
        width: calc(100% - 40px);

    }

    .loud-link a {
        position: relative;
        padding-right: 40px;
    }

    .loud-link a:hover:before {
        width: calc(100% - 64px);

    }

    .loud-link a:before {
        bottom: -0.5em;
    }
}

.loud-link a:after {
    content: '\21e2';
    margin-left: 5px;
}

/* Custom Single Post Header */

.custom-post-header {
    text-align: center;
    padding: 4%;
    max-width: 680px !important;
    margin-right: auto;
}

.custom-post-header .entry-subtitle {
    margin-top: 1em;
}

/* WPSP related Posts */

.wpsp-related-posts {
    background-color: rgba(0,0,0,.03);
    padding: 64px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wpsp-related-posts h2 {
    text-align: center;
    margin-bottom: 1em;
}

/* Form Adjustments */

.woocommerce.single-product div.product form.cart .variations {
    background-color: rgba(0,0,0,0.03);
    padding: 30px 40px;
}

/*-- Woocommerce Shop --*/

.woocommerce span.onsale {
    position: absolute;
    margin: 10px !important;
    border-radius: 4px !important;
	left: 0;
}

.woocommerce ul.products li.product {
    overflow: hidden;
}

.woocommerce ul.products li.product:hover .button {
    -webkit-transform: translatey(0) !important;
    transform: translatey(0) !important;
}

.woocommerce ul.products li.product .button {
    font-size: 12px;
    line-height: 15px;
    padding: 8px 12px;
    min-height: 15px;
    font-weight: bold;
    text-transform: uppercase;
}
.woocommerce ul.products li.product .button.loading {
		padding-right: 30px;
}

@media (min-width: 1024px) {
    .woocommerce ul.products li.product .button {
        position: absolute;
        top: 0;
        -webkit-transform: translatey(-150%);
        transform: translatey(-150%);
        -webkit-transition: 0.35s;
        transition: 0.35s;
        margin-top: 10px;
        margin-left: 10px !important;
    }
}

@media (max-width: 500px) {

    .woocommerce ul.products[class*=columns-] li.product,
    .woocommerce-page ul.products[class*=columns-] li.product {
        width: 100%;
    }
}

/*-- Right Sidebar --*/

@media (min-width: 768px) {
    #right-sidebar {
        border-left: 1px solid rgba(0,0,0,0.1);
    }

    #right-sidebar .widget {
        margin-bottom: 0;
    }

    #right-sidebar aside:first-child {
        padding-top: 0;
    }

    #right-sidebar aside:not(:first-child) {
        border-top: 1px solid rgba(0,0,0,0.1);
    }
}

/* Single Product Sidebar position */

@media (min-width: 768px) {
    .single-product #right-sidebar {
        float: right;
    }

    .single-product div.product .woocommerce-tabs,
    .single-product div.product .related.products,
    .single-product div.product .upsells.products {
        width: 66%;
        display: inline-block;
    }
}

@media (max-width: 768px) {

    .wc-columns-container .products,
    .woocommerce .related ul.products,
    .woocommerce .up-sells ul.products {
        grid-gap: 20px;
    }

		.slideout-navigation.do-overlay .slideout-exit {
    	position: static;
    	text-align: center;
		}
}

/* Media Queries Various */

@media (max-width: 768px) {

    .wpsp-related-posts,
    .wp-block-columns.column-banner {
        padding: 32px 16px;
    }

    .sixty-forty-columns,
    .forty-sixty-columns {
        padding: 0;
    }

    .wp-block-columns .wp-block-column {
        margin-bottom: 10px;
    }

    .happyforms-flex {
        padding: 0 !important;
    }

    .mobile-column-reverse {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

} /* End GeneratePress Site CSS */
/* Change price font size for single product and archive */
.woocommerce-Price-amount {
    font-size: 15px;
}

.wc-block-grid__product-rating .star-rating span:before, .wc-block-grid__product-rating .wc-block-grid__product-rating__stars span:before {
    color: #11a4ff !important;
}

.cr-voting-cont span.cr-voting-downvote-count, 
.cr-voting-cont span.cr-voting-downvote {
    display: none;
}
.cr-voting-cont span.cr-voting-upvote-count, 
.cr-voting-cont span.cr-voting-upvote {
    display: none;
}

/* PART 1 - Before Lazy Load */
img[data-lazyloaded]{
    opacity: 0;
}

/* PART 2 - Upon Lazy Load */
img.litespeed-loaded{
    -webkit-transition: opacity .5s linear 0.2s;
    -moz-transition: opacity .5s linear 0.2s;
    transition: opacity .5s linear 0.2s;
    opacity: 1;
}

button, 
html input[type="button"], 
input[type="reset"], 
input[type="submit"], 
a.button, 
a.button:visited, 
a.wp-block-button__link:not(.has-background) {
    border-radius: 5px;
}
.woocommerce-ordering {
  display: none;
}
#order_comments_field {
  display: none;
}
.woocommerce-invalid #checkout-checkbox {
    outline: 2px solid red;
    outline-offset: 2px;
}

[Brent]

Fixed, thank you.

[David]

Glad to hear that !

[Author]

Posts