3 Replies Latest reply: Feb 21, 2013 6:27 PM by alayna11 RSS

    How do I make a slideshow stretch to fit a larger size screen?

    alayna11 Community Member
    alayna11 Feb 15, 2013 6:46 PM

      Hello

      Can someone please have a look at this website I have made with an adobe edge animate slideshow on the home page and an edge animate static banner on the other pages.

      http://hartshealthservices.com.au

       

      It looks fine when viewed on a 1024 x 768 or smaller screen, but on a larger screen the text goes out wider than the slideshow or image header. Can any one suggest what code I can put on the text to keep it lined up with the slideshow width - that will also look good on a mobile phone - or is there a way to make the slideshow and image header enlarge to match the width of the text for screens larger than 1024 wide?

       

      Any advice would be most appreciated.

       

      Cheers

       

       

      Alayna.

        • 1. Re: How do I make a slideshow stretch to fit a larger size screen?
          jdhughen Community Member
          jdhughen Feb 15, 2013 9:10 PM (in response to alayna11)

          I assume you could make your edge project "stretch" to fit larger screens by setting you stage and elements widths to "%" and make use of the min/max settings, but then that would distort your images unless you set it all to "%" and in affect scaled it all up (width and height) to match the text (left-right margins @ 9.8%). Right now your edge slide show is set to fixed px width and your html "textBlock" is set up to be liquid. Personaly would limit the witdh of the "textBlock" div to 1024px when the text would never get any bigger than your slide show.

          Try this....

          In your header  ".textBlock" style tag add max-width: 1024px;

          I'm not sure but you might need to change the left and right margins in your "body" tag to "auto" to keep it all centered when the screen get larger than 1024

           

          btw, right now for me, your edge slide show doesn't load in firefox17. the preloader shows but nothing happens. And in IE10 and firfox your preloader pops up on top of your text and once it's all loaded it all pops into place and moves the text down. to prevent this you can go to your preloader stage in edge and on the TL with the preloader.gif create an empty div (rectangle with no color or border) and make it the size of your animation on your page (looks like 580 x 1024). this will create this space for you slide show to load into and place your textBlock below it while it's loading so it's not jumping around.

           

          Joel H


          • 2. Re: How do I make a slideshow stretch to fit a larger size screen?
            alayna11 Community Member
            alayna11 Feb 18, 2013 3:23 AM (in response to jdhughen)

            Thanks Joel

            That's awesome feedback. I will have a go at what u have suggested.. Wouldn't it be great it all the browsers just rendered everything the same, that's what I love about flash websites, they always look they same - I am not used to this business of things looking different on every browser and version... It seems almost impossible to check all the browsers too, as browser labs only does a snap shot. I would need 10 different computers all different sizes with all different operating systems... as if..

             

            alayna

            • 3. Re: How do I make a slideshow stretch to fit a larger size screen?
              alayna11 Community Member
              alayna11 Feb 21, 2013 6:27 PM (in response to jdhughen)

              Hey Joel

              Thanks for the code suggestions, it is looking much better on a large screen width now. Not looking so good on ipads and smaller though..

              If you get time could you have another quick look at the site and if you can think of a way to improve this for ipads or smaller please let me know. Or if other people have a suggestion please comment.

               

              http://hartshealthservices.com.au

               

              Thanks kindly

              alayna.