Slider image size / responsiveness

Hello-

I'm using the Alfresco theme for on my version 3.30 nopcommerce site. I have a Nivo slider configured on my website. When creating it, I uploaded two images, both of which were 200px in width and 250px in height.

On the page where the widget appears, in a fully expanded browser window, the slider displays the images at original size, just like you'd expect. However, when the page where the widget appears is viewed in a mobile device, it looks horrible....tablet size and phone sizes both look really bad, but tablet and netbook sizes are the worst...

You can see it here:

http://www.myfootshop.com/shoe-insoles-and-arch-supports

The slider is at the bottom of the left column....under the Symptoms/Conditions box (Your feedback is invaluable to us..)

It looks fine in a browser unless you squish it down to mobile device sizes, then you will see what I mean.

Also, (and maybe related) in the administrative pictures tab, the two graphics that are displayed are at 320pixels wide and 400 pixels tall. When I view details about them, I see that they are actually not the two graphics I originally uploaded, but new ones...stretched and named with   _400, like:  /content/images/thumbs/0001768_400.jpeg

I guess these new stretched versions of my graphics were generated by the plugin, because I didn't create them myself....not sure why the plugin does this?? Maybe it is those stretched/blurry graphics that are being displayed when the page is viewed in a mobile device?

Is this a bug? Any help would be appreciated!

Thanks-

Hi joster,

Actually there is no bug here. The administration simply always shows the uploaded picture with size 400 as we are limited in the grid and we can't show the original size if for example the uploaded image size is 1200px. But this picture is used only in the administration and it does not replace the original picture. The original picture has the size that you have uploaded and it is used in the public store.

About the Slider in the left column it is how it works as the Slider is responsive and it stretches to the size of its container. On mobile devices the left column disappears and it becomes part of the main column then the Slider takes the full width. That is why the image is stretched as the container gets bigger but this is expected behavior.
How do you expect this to work? Any suggestions are welcome.

Thanks

Hmmm...ok....

Then in order for me to be sure that the graphics don't appear blurry, I just need to upload larger images that look good at all resolutions...and ensure that the container where my widget appears is defined at 200px in width for non-mobile visitors.

This will at least make better looking graphics, but I really don't want my slider widget to be so prominent in mobile devices..I'd rather it always be displayed at the size of the uploaded graphics.

Perhaps a better way of handling it is to allow administration of the size properties of the widget. This way we can define the maximum and minimum dimensions of the displayed widget..regardless of which device it is viewed on....just a thought.

Thanks!