What settings do we use in Dreamweaver (CS6) to make the slideshow responsive? We changed width to 100% but the height of the images stays fixed when we reduce browser width. Thanks in advance.

Hello,
Please check the following video tutorial: www.dmxzone.com/go?19902

Hi Teodor

Thanks for the video link.

Unfortunately this is not really responsive. You've just changed the height of the image for each media query.

Therefore the width of the image reduces as the browser window reduces BUT THE HEIGHT DOES NOT CHANGE. So the image is distorted.

Try your example on a desktop at 1920x1200 and then drag the browser down to 1024x768. The image stays the same height!

I've got a single image in a Fluid grid that is FULLY responsive WITHOUT changing any media queries. I think your slideshow extension needs to work without any changes to the media queries so that the image scales properly in height AND width.

Regards

Simon

Also ALL of the image should be visible at ALL TIMES. With your example (because the image is distorted) sometimes you only see a part of the image.

Hello Simon,

Actually the media queries are what you need to use in the responsive design.
Please provide a link to your page.

Hi Teodor

I am using the media queries set up by the CS6 fluid grid BUT I DON'T CHANGE THEM. I'll send you a link later.

Simon

Hi Teodor

Single image in CS6 responsive grid (media queries not changed).
www.internetbuff.co.uk/dmxzone/simple-image.html

Dmxzone slideshow in the exact same responsive grid (media queries not changed).
www.internetbuff.co.uk/dmxzone/dmxzone-slideshow.html

I think you will see the difference when you drag the browsers right hand edge. Then drag the edge to the right to make the browser big again. Dmxzone slideshow corrupts the image.

It is INCORRECT to enter image heights in the CSS media queries.

1.The image should reduce in WIDTH smoothly.
2.The image should reduce in HEIGHT smoothly.

Simon

Hi,

I see the fluid grid adds img {max-width:100%;} that also applies to slideshow images.
Please add anywhere in your css:

.dmxSlideshow .dmxSlide img, .dmxSlideshow .dmxSlide canvas {
max-width:none !important;
}

And use the media queries as described in the video tutorial - that is how you do the "responsive slideshow"