Docs

[piexec]

I have this CSS now in my Customizer:

@media (max-width:768px){
.woocommerce div.product .summary, .woocommerce-page div.product .summary{
width: 55%;
margin-left: -52px !important;
}
.woocommerce-main-image {
max-width: 300px;
}
}
.woocommerce a.x-img > img {
width: 50%;
}

But the gray border is not wrapping to the image. Can you please help with that.

Thanks in advance!

[Rue Nel]

Hello There,

Thanks for writing in! Please update your code and use this instead;

@media (max-width:768px){
  .woocommerce div.product .summary, 
  .woocommerce-page div.product .summary{
    width: 55%;
    margin-left: -52px !important;
  }

  .woocommerce-main-image {
    max-width: 300px;
  }
}

.woocommerce a.x-img {
  width: 50%;
}

.woocommerce a.x-img > img {
  width: auto;
}

Hope this helps.

[piexec]

Getting closer.

Here is what I have now:

/*shrink product image*/
@media (max-width:768px){
.woocommerce div.product .summary,
.woocommerce-page div.product .summary{
width: 55%;
margin-left: -52px !important;
}

.woocommerce-main-image {
max-width: 300px;
}
}

.woocommerce a.x-img {
width: 70%;
}

/*move review stars*/
.woocommerce div.product .images {
float: left;
width: 34%;
margin-right: 10px;
}

[piexec]

How do I get the pricing, etc to left align to the picture better?

[Christopher]

Hi there,

Please find and remove this code:

.woocommerce a.x-img {
  width: 70%;
}

Update your code to :

.woocommerce div.product .images {
    float: left;
    width: 28%;
    margin-right: 10px;
}
.woocommerce div.product .summary {
    width: 68%;
}

Hope it helps.

[Author]

Posts