Anshupriya Goswamy Anshupriya Goswamy - 1 year ago 139
CSS Question

Resized woocommerce image size but product box remains too large

Hello everyone and thanks in advance for your help.

Background: I am a non-programmer.

Past problem: My wordpress site theme was not optimized for woocommerce. Consequently, the image sizes of products were being expanded and blurred. So I searched here and as suggested changed .woocommerce div.product div.images img{display:block;width:48%;height:auto;box-shadow:none} to .woocommerce div.product div.images img{display:block;width:auto;height:auto;box-shadow:none}

Now my product sizes are coming out fine. However, I am still facing the problem below

Current problem: When trying to insert products inline in post, the product box is auto expanding and becoming too large.

See example of product page (which is fine) here
See example of bad box design when inserting the above product in page here
(you will need to scroll a little. The product has been inserted via shortcode and appears after the heading :Book interpreter today @ 125$/day only or for all 3 days @ $360 only!! Hurry before we run out of available interpreters.)

Please help me!

Answer Source

Oh I see: you have this pre class which makes the problem. fix this:

pre {
display: block; //to inline or inline-block
padding: 5px 10px;
margin: 1.07142857em 0;
word-break: break-all;
word-wrap: break-word;
white-space: normal; //this is what made the problem
color: #d14;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;

I think that when you used the shortcode, wordpress automatically added "pre" taglike code coz it thought this was a code. Try adding the shortcode to "text" editor without any wrapping. If not just change what I wrote in the css style

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download