- This topic is empty.
-
AuthorPosts
-
April 23, 2013 at 10:31 am #43781
ani7ruddha
ParticipantI have installed Mercor Woocommerce theme for an ecommerce site http://guna.kampusorder.com/
But the product image gets blurred. Although I have changed the dimensions in stylesheet file but still it gets blurred it is taking default 470 X 345 px dimensions..
Please help
April 23, 2013 at 10:34 am #132858chrisburton
ParticipantIt looks like you’re taking a thumbnail version of the image that is much smaller and increasing the dimensions which is causing it to look blurry.
April 23, 2013 at 11:03 am #132861ani7ruddha
ParticipantNo I had uploaded image of size 240 X 320 and I have edited css accordingly
April 23, 2013 at 11:36 am #132872chrisburton
Participant@FragaGeddon Shouldn’t you keep the aspect ratio when adjusting the size? Edit: Ah, I see what you mean. The height will automatically be adjusted when only setting a width. I usually always add `height: auto !important;`, though.
@ani7ruddha According to the file-path of the image, it is much smaller than what you’re trying to output.April 23, 2013 at 11:53 am #132875ani7ruddha
Participanthere is the css file
April 23, 2013 at 12:48 pm #132886TheDoc
Member@ani7ruddha – what @chrisburton is trying to tell you is that the image you are trying to size bigger isn’t the image you should be using at all. You are pulling in a small thumbnail instead of the image that you uploaded. When you uploaded an image to WordPress it creates lots of different sizes for you.
April 23, 2013 at 1:07 pm #132890ani7ruddha
ParticipantCan somebody help me using teamviewer?
April 23, 2013 at 1:13 pm #132891ani7ruddha
ParticipantThis is the .css part I had edited in my stylesheet
.imagesSPAll .panel ,.imagesSPAll .anythingSlider, .imagesSPAll .panel img {height:320px; width:240px;}
.leftContentSP .images.imagesSP{border: 5px solid #eee;background: #fff; min-height:320px; width:240px;}
.leftContentSP .thumbnails img {border: 1px solid #DADADA;margin:5px 4px 0 0px;}
.leftContentSP .thumbnails img:hover {border: 1px solid #bbb; }April 23, 2013 at 1:15 pm #132892ani7ruddha
Participant.imagesSPAll .panel ,.imagesSPAll .anythingSlider, .imagesSPAll .panel img {height:320px; width:240px;}
.leftContentSP .images.imagesSP{border: 5px solid #eee;background: #fff; min-height:320px; width:240px;}
.leftContentSP .thumbnails img {border: 1px solid #DADADA;margin:5px 4px 0 0px;}
.leftContentSP .thumbnails img:hover {border: 1px solid #bbb; }**This was the .css part I had edited**
April 23, 2013 at 11:34 pm #132948chrisburton
ParticipantIt is not a CSS issue, it is a PHP issue in your WordPress template. I assume you are calling a post_thumbnail for that particular area which is outputting a really small version of the image. From there, you are increasing the size of the image which is causing it to be blurry.
You need to change your PHP to output the original image or set the correct dimensions in the PHP loop.
April 24, 2013 at 4:12 am #132991ani7ruddha
ParticipantSo which php file needs correction
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.