3 Replies Latest reply on Jul 1, 2013 11:53 AM by mweezer

    "Use presets for responsive layout" not working in Chrome

    WillGets Level 1

      I am building a responsive website. I am going to have parts of the website animated using Edge Animate. I will make the animation and then insert it into a div in the responsive website I am building.

       

      The Adobe Edge animation has a width of 100%, so that it resizes according to the area that it occupies the full width of the div no matter how wide that div may be in px.

       

      It is all working fine, but:

       

      I have an image in the Edge animation that is center aligned. It must stay center aligned no matter what width the animation ends up being.

       

      Within Adobe Edge, in Properties, in Position and Size, there is a option where, if you hover your mouse cursor over the top right button a tool tip says "Use presets for responsive layout"

       

      With the image on the stage selected, I can click on the "Use presets for responsive layout" button and then choose "Centre background Image".

       

      It works perfectly in all browsers accept Chrome (even IE is playing ball this time). In chrome the width of the image stretches out as the div stretches out..

       

      The "Centre background Image" setting says that it won't scale the image. But in Chrome it does.


      What can I do to "tell" Edge Animate to center the image but not scale it in the Chrome browser?

       

      I can see that in the image properties it is set to Background image x axis and y axis 50%. And the width is set to pixels. But in Chrome, the image stretches.

       

      If you go to http://www.brainstormadvertising.co.uk/demo/services.html you will see what I mean. The circle image is centering BUT stretching in chrome browsers while centering nicely and NOT stretching in other browsers.

        • 1. Re: "Use presets for responsive layout" not working in Chrome
          josh.dura Adobe Employee

          When I look at this in Chrome, it looks like the width is set to 21.72%. This is probably why it is stretching. It should be set to either a max-width, or a set pixel width.

           

          style="position: absolute; margin: 0px; left: 38.82%; top: 18.24%; width: 21.72%; height: 24.37%; right: auto; bottom: auto; background-size: 48px; -webkit-background-size: 100%; background-image: url(http://www.brainstormadvertising.co.uk/demo/services-ellipse.png); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-position: 50% 50%; background-repeat: no-repeat no-repeat;

          1 person found this helpful
          • 2. Re: "Use presets for responsive layout" not working in Chrome
            WillGets Level 1

            Thank you for your reply Josh. But the point of this setting in Edge Animate is that you can set it up that the background image is center aligned and does not scale. Yet it produces code that gives the width as 21.72%.

             

            A little further along I see background-size: 48px; .  This is correct.

             

            So all the browers are reading background-size: 48px; as the scale measurement but Chrome is reading the width only, not the background-width. So this "Use presets for responsive layout" works in all browsers except chrome.

             

            I don't know how to change that code after the artwork has been published. I can see the code using Firebug, but where do I change it in my code on my computer before uploading to the server?

             

            I have reported this bug to Adobe.

             

            Please see the attachment. You can see where all the settings are made and where I am getting a problem.

            edge-problem.jpg

            • 3. Re: "Use presets for responsive layout" not working in Chrome
              mweezer

              I was having the same issue and stumbled on a workaround. Under the 'Image' section, change the W and H to 'Auto' by selecting the letter. Then turn it back off and type in the px values of the image.  It's weird that you have to do something, then undo it, but I'm guessing it's setting something in the CSS.  Hope that helps

              1 person found this helpful