Okay
  Public Ticket #1907078
Element will not center in column
Closed

Comments

  •  8
    Simeon started the conversation

    The Woocommerce product widget in left column will not center in the column despite the column setting being for centered content.

    This does not look so bad on larger screens, but as the screen size shrinks and on mobile smartphones it looks really awful being forced so far left.

    I've tried targeting it with CSS to center the containing element 'div.product-wrap' but that requires sizing it less than 100% and all it does is shrink the size of the visible element and still it remains off center to the left. I'm therefore not sure how to get that element centered. It surely has to be one of the block elements that div.product-wrap is within.

    Please advise.

    Thanks,
    Simeon

  •  8,996
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    .woocommerce-page.columns-1 ul.products li.product, .woocommerce.columns-1 ul.products li.product {
        width: 100% !important;
    }

    Thanks


    ThemeNectar Support Team 

  •  8
    Simeon replied

    Hi Tahir,

    I've done as you've indicated. The product image now displays centered on large and small screen and mobile smartphone as it should.

    HOWEVER, when shrinking the browser viewport to check for smaller screen size display and on smartphone, there are still some problems...

    ***With your custom css in EITHER the main Salient Custom CSS panel (only) or the page's Custom CSS panel (only):

    *Chrome & Firefox: both the product title and the "Choose Your Amount" (add to cart) text are still displayed left-aligned.

    *IE v11: product title is still still displayed left-aligned but the "Choose Your Amount" (add to cart) text is centered along with the image.

    *iPhone 6s PLUS in Chrome & Safari: the product title is still still displayed left-aligned but the "Choose Your Amount" (add to cart) text is centered along with the image.

    Please advise further.

    Thanks,
    Simeon




  •  8,996
    Tahir replied

    Hey Again, Hope you had a Great Weekend, 

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    .woocommerce.columns-1 ul.products[data-product-style="text_on_hover"] li.product .woocommerce-loop-product__title {
        text-align: center;
    }
    html .woocommerce.columns-1 ul.products .text_on_hover.product .add_to_cart_button {
        display: table;
        margin: auto !important;
    }

    Thanks


    ThemeNectar Support Team 

  •  8
    Simeon replied

    Yes, had a good weekend Tahir and hope you did too... and it's an even better Monday! Your additional custom css code has worked to resolve the remaining problems! As always, your support is awesome!

    Thanks a bunch,
    Simeon