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>
