2 Replies Latest reply on May 13, 2016 8:51 AM by g.bollmann

    Responsive scaling: how to set media query on stage height?

    jenniferw43736705

      Hi Adobe community,

       

      My banner width is 100% so that the green background always extends to the browser width. (see image below)

      I'm trying to trim off the top and bottom portions of the stage so there is less empty green space when the user is browsing on mobile.

       

      Label A of the picture below is my current banner, i'm trying to achieve a closer look to Label B.

       

      My question: Is there a way to have the browser width trigger the stage height to decrease?

      For instance at 480px, the stage height will decrease from 100px to 50px?

       

      ae-question.png

        • 1. Re: Responsive scaling: how to set media query on stage height?
          g.bollmann Level 1

          Hi, I've just been working on this myself.

           

          To get the effect you want, disable Responsive. You want a % stage.

           

          Percent stage and stage elements will remain the same when the window changes. Responsive will shrink your image.

           

          For your example, I suggest:

          • 100% Stage height and width (flip the toggles)
          • Center the stage (checkbox)
          • Make the green bar 100% width but use static pixel height.
          • In the elements panel, drag the black circle onto the green rectangle. (Nest it.) Anchor to top-right. Set Left and Top to percentage toggles.
          • Nest the black lines onto the black circle. Anchor to top-right. Set Left and Top to static px.

           

          Maybe this does not create the exact effect you want, but some manner of nesting will. You might need invisible boxes to help position things.

           

          Hope I'm not too late.

          /G

          • 2. Re: Responsive scaling: how to set media query on stage height?
            g.bollmann Level 1

            To use media queries on a single element of your composition (while leaving the green bar as-is), you can use javascript:

             

            1) On your timeline, set labels and triggers. Change the element without transitions. (toggle off the auto-keyframe and auto-transition). My labels below are 600, indicating to myself a 600px-wide device, and 400, indicating a 400px-wide device.

             

            2) In your Stage:compositionComplete  & Stage:resize & Stage:changeorientation (ALL 3) put the query and conditional action.

             

            // the media query match request

            if (window.matchMedia('only screen and (min-device-width: 569px)').matches) {     

                        //anything you want to change

                     sym.$(".red").css({"background-color": "#650097"});                                       

                       // Go to label "600"

                     sym.stop("600");                                                                                                

                } else {

                      sym.$(".red").css({"background-color": "#000000"});

                     sym.stop("400");

                };

            Viola! The device will be queried. Your element, repositioned or altered on the timeline, will be displayed.

             

            An alternate query would be:

            if ($(window).width() <= 569) {

              sym.stop("600");

            } else {

              sym.stop("400");

            };

             

            See also this definitive article on using either HTML or Javascript.