Close

Slider Image Size and Blurriness

nabeel1983khan
9 years ago
#6036 Quote
Avatar
  • 7
I m using the latest nop 3.3 plugins , but the issue I am getting is how to upload images that will fit my design ... as there no option of setting the width and height of the slider .... it gets to various sizes and then gets blurry as it tries to expand the image ... please help me as I cant get around this issue

www.zarla.co.uk

this is the website where it is currently running ... blurry images and size issue ... help needed urgently. Thanks
Boyko
9 years ago
#6039 Quote
Avatar
  • Moderator
  • 1570
nabeel1983khan wrote:
I m using the latest nop 3.3 plugins , but the issue I am getting is how to upload images that will fit my design ... as there no option of setting the width and height of the slider .... it gets to various sizes and then gets blurry as it tries to expand the image ... please help me as I cant get around this issue

www.zarla.co.uk

this is the website where it is currently running ... blurry images and size issue ... help needed urgently. Thanks


Hi nabeel1983khan,

If you are using the Nivo slider type then please note that it is responsive, which means that it expands to its container. This is how the responsiveness works, so that on a smaller device the container is smaller and the slider image gets smaller respectively. The same applies if the container gets bigger then the image is stretched to fill the container and that is probably why your images get blurred. This could happen if your images have lower resolution and when they are stretched they get blurred.

There are two ways of getting around your problem:

1. Upload images with better resolution, so that they are not stretched and not blurred respectively.

2. Specify the width or the height of the Slider explicitly. You can do this by adding a theme class name of the slider. When you do so i.e add a theme name fixed, a css class will be added to the slider i.e theme-fixed. Then you can add your styles via this class i.e:

.theme-fixed { width: 980px;  }


This approach is much more flexible as this way you can specify the width of the Slider based on the various resolutions (if you support responsive design) via css media queries.

Hope this helps!

Thanks
Regards,
Nop-Templates.com Team
nabeel1983khan
9 years ago
#6041 Quote
Avatar
  • 7
Yup thanks I had figured out the issue as I had it stretched I was using low resolution images. thanks