Okay
  Public Ticket #995617
Product page
Closed

Comments

  •  2
    Caroline started the conversation
    December 20, 2016 at 5:16pm

    Hi everyone, 

    i'm triying to modify this page. I mean i'd like to have the calendar centered and wider. I've already tried different things in the woocommerce option within the theme options but it doesn't fit me, 

    thanks for your help :D

    Caroline

    ps : see the sceen capture 

     http://www.universetequilibre.com/product/soins-energetiques/

  •   Andrew replied privately
  •   Caroline replied privately
  •  3,030
    Andrew replied
    December 22, 2016 at 1:16pm

    Hi Caroline,

    Apologies for the late reply.

    To have that look you we would need to make everything on the page stacked i.e. image on top, table following and then the fields.

    This bit of CSS can do that for you:

    div.span_5.col.single-product-main-image{width:100% !important;}
div.span_7.col.col_last.single-product-summary{width:100% !important;}
div.DOPBSPCalendar-container{width:100% !important;}

    Add it to salient \ general settings - css script related - custom css code.
    Hope this helps.

  •  2
    Caroline replied
    December 22, 2016 at 2:22pm

    Hey Dear Andrew,

    Thank you so much  ! I'm a bit bothered by the huge product images of this CSS render. Is there a way to have it smaller ? 

    Best, 

    Caroline 

  •  3,030
    Andrew replied
    December 22, 2016 at 4:57pm

    Hi Caroline,

    Please use this CSS instead:

    div.span_5.col.single-product-main-image{width:100% !important;}
div.span_7.col.col_last.single-product-summary{width:100% !important;}
div.DOPBSPCalendar-container{width:100% !important;}
.woocommerce div.product div.images img {
    width: 50%;
    margin: 0 auto;
}

    It should scale down the image and keep it centered.
    The 50% width can be increased to increase image sizes.

    Hope this helps.

  •  2
    Caroline replied
    December 26, 2016 at 3:58pm

    Thank you Andrew !  

    This will be fine :)