[bluestackParticipant]

Hi,

I know there is only so much you guys can do when asked about WooCommerce and I’ve tried to do as much of this myself as I can but I can’t seem to get the right CSS terms to get the page to look right!

I’ve added the following to the Customizer:

.woocommerce div.product .images,
.woocommerce-page div.product .images {
width: 50%;
margin: 0 auto;
}

.woocommerce div.product .summary,
.woocommerce-page div.product .summary {
display: block;
padding-right: 5px;
padding-left: 5px;

}
.woocommerce div.product .woocommerce-tabs h2 {
display: none;
margin-top: 0;
}
.woocommerce div.product .related h2 {
text-align: center;
}
.woocommerce div.product .woocommerce-tabs div.related ul.products {
padding-left: 20px;
}
.woocommerce div.related.products.cols-4 {
padding-left: 20px;
padding-right: 20px;
}

.woocommerce div.product .woocommerce-tabs {
margin-top: 0px;
clear: none;
float: none;
}
.woocommerce div.product .x-img-thumbnail {
border: 0px;
}
.woocommerce div.product .x-img-thumbnail .x-img-link{
display: none;
}
@media(min-width: 1199px) {
.woocommerce div.product .images,
.woocommerce-page div.product .images {
pointer-events: none;
}
}

@media(min-width: 768px) and (max-width: 1198px) {
.woocommerce div.product .images,
.woocommerce-page div.product .images {
pointer-events: initial;
}
}

@media(max-width: 767px) {
.woocommerce div.product .images,
.woocommerce-page div.product .images {
pointer-events: none;
}
}

Page where it’s implemented: http://numberfun.co.uk/sample-page/downloadable-products/song-resource-packs/song-resource-pack-8/

The first thing is product pictures won’t seem to change size using the first CSS (I know I could the .jpg file size which I have done with one of the products and now it looks rubbish on a retina display).

There is a line above the ‘summary’ section I can’t get rid of.

Can you help?

Thanks!

[bluestackParticipant]

This reply has been marked as private.

[DarshanaModerator]

Hi there,

Thanks for writing in! First of all, I see that there are some issues in your custom CSS. Please copy all of your custom CSS into an online tool like CSS Lint (http://csslint.net/). When there are errors, it means your CSS will not parse correctly.

Thanks!

[bluestackParticipant]

Hi,

I’ve tweaked the CSS as much as possible, got rid of the warnings.

What happens next?

[LelyModerator]

Hi There,

Upon checking, the CSS for product featured image is working and correctly applied. See attached screenshot. Are you expecting different result? Please clarify.

The line is because of the following custom CSS:

.woocommerce div.product .woocommerce-tabs {
  margin-top: 0;
  clear: none;
  float: none;
}

The tabs overlap with your product content. Please remove it.

Hope this helps.

[bluestackParticipant]

I’m sorry I forgot to include another product link!

http://numberfun.co.uk/sample-page/uncategorized/early-years-digital-pack-1-counting/

shows the image hasn’t resized at all…

and the half a line above the “Summary” text? I can’t really remember how I got rid of that above the picture.

thanks for your help!

[LelyModerator]

Hi There,

Thanks for the new link. Please update this CSS:

.woocommerce div.product .images, .woocommerce-page div.product .images{
    width: 50%;
    margin: 0 auto;
}

To this:

.woocommerce div.product .images img, .woocommerce-page div.product .images img {
    width: 50%;
    margin: 0 auto;
}

The half line above the summary text is because of this custom CSS:

.woocommerce div.product .woocommerce-tabs {
    margin-top: 0;
    clear: none;
    float: none;
}

Hope this helps.

[bluestackParticipant]

Thanks! That has helped loads!

[Paul RModerator]

You’re welcome! 🙂

[Author]

Posts