HTML5 Slideshow Support Product Page

Responsive Slideshow is not re sizing in fluid grid layout

Asked 19 Jun 2013 00:56:31
1
has this question
19 Jun 2013 00:56:31 Andrea Cambria posted:
I am unable to create a responsive slide show in a fluid grid layout DWCS6. I followed the tutorial. I read the response to Pete Mannings question but the answer is vague. Does anyone know where I can find a proper tutorial. Thanks Andrea

Replies

Replied 19 Jun 2013 08:42:54
19 Jun 2013 08:42:54 Miroslav Zografski replied:
Hello Andrea. can you provide a link to the page in question?

Regards.
Replied 19 Jun 2013 17:03:10
19 Jun 2013 17:03:10 Andrea Cambria replied:
Hi,
I have not uploaded the test page. At this point I only created a page to test the slideshow on a local server(wamp). May I provide the code or email you the DW site? The file is small, just 1 fluid grid page with the test slideshow and CCS generated by DMX as well as the fluid grid CSS file.
Thanks Andrea
Replied 19 Jun 2013 21:24:51
19 Jun 2013 21:24:51 Teodor Kuduschiev replied:
Hello Andrea,

Can you please explain the problem a little more detailed or better - to upload the page on a public server where we can check it?
Did you watch the video tutorial here: www.dmxzone.com/go/19901/creating-a-responsive-html5-slideshow ?
Replied 20 Jun 2013 18:32:32
20 Jun 2013 18:32:32 Andrea Cambria replied:
Hello,
I uploaded the page at: 03746ed.netsolhost.com/
I used images 557x338px. The text included within the images is missing from the slideshow(overflow?). If you resize the browser you will see how poorly the images respond. I did watch the tutorial. When determining the CSS heights for resizing how to you pick the heights that will produce the best results without distortion? This must be based on both the size of the original image and the space it will take up on the page. Thanks so much for your help! Andrea
Replied 21 Jun 2013 08:21:22
21 Jun 2013 08:21:22 Teodor Kuduschiev replied:
Hello Andrea,

First what i notice on your page is the fluid grid layout is placing:

img, object, embed, video {
    max-width: 100%;
}

Which distorts the images in the slideshow. Please add the following rule somewhere in your css:
.dmxSlideshow .dmxSlide img, .dmxSlideshow .dmxSlide canvas {
max-width:none !important;
}


Then - the best way to check the width/height proportion is for example in Photoshop - resize the image width to the main breakpoints widths and remember the height, then enter it in your css.
Replied 21 Jun 2013 18:36:30
21 Jun 2013 18:36:30 Andrea Cambria replied:
Thank so much for your help. i added the CSS and will work on properly resizing the images as per your advice.

Best,
Andrea

Reply to this topic