1 Reply Latest reply on Sep 14, 2017 1:31 AM by Günter Heißenbüttel

    Fluid Height and Width master, possible?

    drdarrow Level 1

      Maybe there's something I am just not getting...

      I have a banner at the top of a 960px wide [widest] breakpoint. The bottom of the Header section is set to 275
      ZZ3B02F2DC.jpg

      In the image above you can see the red box that holds my graphic (which is an SVG vector exported from AI). Its bottom comes to about 10px from the bottom of the header zone.


      By the way, I am certain my Master Page is set to Fluid Width:

      ZZ378DC6C6.jpg
      My next break smaller width is at 768px

      ZZ547F05D8.jpg

      Mathematically, this is 80% of 960px.

       

      This makes the header graphic shrink by up to 20%, but up to 1 pixel of width before we hit the breakpoint of 768 (i.e. anywhere between 960 and 769), though the header graphic is shrinking, the header zone is not, therefore the 20 pixels of space below the graphic grows vertically as the page gets horizontally narrower, seemingly pushing the rest of the page elements down (in fact they stay where they are and the graphic shrinks above them). The bottom-most part of the header does not fluidly change to where the header-bottom is placed on the next breakpoint — about 225.

      ZZ53A4EFEB.jpg
      What I should have is a fluidly-shrinking page that reduces the header area in proportion with the diminishing width, but "at 769px width" the space between the bottom of the graphic and the next page element (in the zone below the header) has now "expanded vertically" by about 50px — the difference between the header-bottom of the larger breakpoint at the one it is ABOUT to connect with.

       

      I can't have that.

       

      And I have no control over what browser width anyone will ever open any page affected by this master page. It will only look the way I designed it if their browser is exactly 768px wide or 960px wide, or wider — as far as the placement of "body" elements relative to the header goes.

       

      It seems that the only way to manage this is to design for every a new breakpoint every 2 pixels of horizontal width. That cannot be what the designers wanted.

       

       

      Am I missing something obvious? Or is this what we are forced to live with, with this ever evolving "application" and its worldwide base of paying bug-and-flaw finders? (Seems like Adobe should be subscribing to us!)

       

      Any help appreciated. I am losing my shirt on this site I am creating — and it would be unconscionable to bill hourly for these issues.

       

      Thanks,

       

      David

       

      PS — I have to admit the most of the entire "pinning" scenario eludes me. But thats for another day, I'm afraid.

       

      I sure wish there was a printed manual.