I yesterday posted the question beneath in another post. It seems that it went messed up. (Posting date, comments... etc) I hope it will go better with this post. I invite the commenters on the other post to look at it and comment aqain. Thanks in advance.
On my woocommerce single product page is a fairly large thumbnail shown. For one product a portrait image for another a landscape. I want to center the portrait ones in the surrounding div. I've tried it with margin-left and margin-right set to x%. This works fine for the portrait ones but the landscape ones are pushed to far to the right. The thumbnail images are floating to the left. Changing this will mess up the size.
In short, i want the portrait thumbnails centered and the landscape thumbnails standard (aligned to the left).
I was wondering can this be achieved with a media query or do I oversee a more simple solution. Please advice.
EDIT
Hereby the generated html/css code:
.woocommerce img,
.woocommerce-page img {
height: auto;
max-width: 100%;
}
.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images {
float: left;
max-width: 100%;
} <body class="single single-product postid-3758 logged-in admin-bar no-customize-support custom-background woocommerce woocommerce-page custom-background-white custom-font-enabled single-author">
<div id="primary" class="site-content">
<div id="content" role="main">
<div itemscope itemtype="http://schema.org/Product" id="product-3758" class="post-3758 product type-product status-publish has-post-thumbnail downloadable virtual taxable shipping-taxable purchasable product-type-simple product-cat-adri-2 product-cat-hellevoetsluis product-tag-adri product-tag-hellevoetsluis product-tag-zaandam instock">
<div class="images">
<a href="http://etc" itemprop="image" class="woocommerce-main-image zoom" title="SONY DSC" data-rel="prettyPhoto">
<img width="567" height="853" src="http://placehold.it/567x853" class="attachment-shop_single wp-post-image" alt="SONY DSC" title="SONY DSC" />
</a>
</div>
<div class="summary entry-summary">
<h1 itemprop="name" class="product_title entry-title">Photo 3</h1>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<p class="price"><span class="amount">€xx,xx</span> <small class="woocommerce-price-suffix">Exclusief BTW</small>
</p>
<meta itemprop="price" content="xx" />
<meta itemprop="priceCurrency" content="EUR" />
<link itemprop="availability" href="http://schema.org/InStock" />
</div>
</div>
</div>
</div>
</div>
</body></div>
You're right. You can achieve what you want using media query just change the float:left to float:inherit or float:none
here is the sample code.
//when screen is resize to 300px
@media screen and (max-width: 300px) {
.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images {
float: inherit;
//more styles here
}
}
it is ok if you don't include max-width: 100%;
With respect for the commenters on this issue, I figured it out. At least for my situation.
First I edited template product-image.php. Of course I copied this file into my child theme first: child-theme/woocommerce/single-product/product-image.php.
I wrapped the whole function in a <p> tag so the code looks like this:
<div class="images">
<p id="thumbnail-align" class="align-thumbnail">
<?php
if ( has_post_thumbnail() ) {
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_link = wp_get_attachment_url( get_post_thumbnail_id() );
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
'title' => $image_title
) );
$attachment_count = count( $product->get_gallery_attachment_ids() );
if ( $attachment_count > 0 ) {
$gallery = '[product-gallery]';
} else {
$gallery = '';
}
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto' . $gallery . '">%s</a>', $image_link, $image_title, $image ), $post->ID );
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );
}
?>
</p>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>
</div>
Next I made some adjustments to woocommerc.css:
.woocommerce #content div.product div.images img,
.woocommerce div.product div.images img,
.woocommerce-page #content div.product div.images img,
.woocommerce-page div.product div.images img {
/* display: block; -> can be deleted
width: 100%; -> can be deleted
height: auto; -> can be deleted*/
box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
-webkit-transition: all ease-in-out .2s;
-moz-transition: all ease-in-out .2s;
-o-transition: all ease-in-out .2s;
transition: all ease-in-out .2s;
}
It is in line 328 or so.
In woocommerce-layout.css is the following changed (line 39):
/*.woocommerce img, -> can be deleted
.woocommerce-page img { -> can be deleted
height: auto; -> can be deleted
max-width: 100%; -> can be deleted
} -> Can be deleted*/
/* and add the following:*/
p.align-thumbnail {
text-align: center;
}