7 Replies Latest reply on Feb 3, 2017 11:23 PM by Ussnorway

    Making Embedded HTML Responsive?

    dsebo

      Hi there,

       

      I am building an app in Muse and I am currently in the process of making it responsive. I am building a login page and have breakpoints at 290px, 320px, 375px and 435px.

       

      Anything above 376px is working alright, but when it scales below that, everything disappears. I have narrowed this issue down to the embedded HTML I have placed on the page (which is the login form itself.) When this code is removed, the app is responsive at any size, however, when the HTML is there, it is not below 376px (as just mentioned). I have a GIF attached to see this in action.

       

      Feb-03-2017 19-52-44.gif

      ANY HELP IS MUCH APPRECIATED! Please get back to me at DavidSeboOHS@gmail.com or here.

      I am curious how I can make this embedded HTML/CSS responsive so that I can scale it to any size. This is what I am working with:

       

      <style type="text/css">
      .login {
        position: relative;
        margin-top: 270px;
        }
      
      
      form {
          display: inline-block;
          text-align: center;
          margin-left: 0%;
          width: 100%;
        }
      
      
      input.form-control{
        text-align: left;
        width: 67.27%;
        height: 57px;
        margin-top: 21px;
        font-family: "lato", sans-serif;
        font-size: 20px;
        font-weight: 300;
        position: relative;
        color: #7F7F7F;
        box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
        border-width: 0px;
        border-color: transparent;
        background-color: #FFFFFF;
        padding-left: 70px;
      }
      
      
      #u568{
        z-index:10;
        background-color:transparent;
        position:relative;
        margin-right:-10000px;
        margin-top:9px;
        width:9.5%;
        left:11.49%;
        height: 60px;
        }
      
      
      #u581{
        z-index:17;
        background-color:transparent;
        position:relative;
        margin-right:-10000px;
        margin-top:19px;
        width:12.66%;
        left:11.49%;
        }
      
      
      #u579{
        z-index:18;
        display:block;
        width:100%;
        }
      
      
        #u579{
          z-index:11;
          display:block;
          width:100%;
          height: 59.5px !important;
          }
      
      
      button.float {
        width: 84.27%;
        margin-top: 21px;
        height: 57px;
        color: #FFFFFF;
        text-align: center;
        letter-spacing: 1px;
        font-size: 20px;
        line-height: 24px;
        font-family: "lato", sans-serif;
        font-weight: 400;
        background-color: transparent;
        border: 3px solid #fff;
      }
      
      
      </style>
      
      
      
      
      
      
      
      
      
      
          <form action="#">
      
      
            <div class="in
              <span class="input-group-addon"><i class="fa fa-user"></i></span>
              <input type="text" class="form-control" placeholder="Username">
              <div class="clip_frame grpelem" id="u568"><!-- svg -->
                <img class="svg" id="u568" src="images/pasted-svg-179542x158.svg" alt="" style="width:34px;"
               </div>
                </div>
      
      
              <div class="input-group input-group-lg">
                <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                <input type="password" class="form-control" placeholder="Password">
                <div class="clip_frame grpelem" id="u581"><!-- svg -->
                 <img class="svg" id="u579" src="images/pasted-svg-40x18.svg" alt="" style="width:40px;"
                </div>
              </div>
      
      
              <button type="submit" class="float">LOGIN</button>
             </form>
      
        • 1. Re: Making Embedded HTML Responsive?
          Ussnorway Adobe Community Professional

          the two main options that spring to mind;

          redesign the form to fit in a smaller (233ppi min) space or use an iframe to display it with the right edge cut off when it goes below your 376px limit

          • 2. Re: Making Embedded HTML Responsive?
            dsebo Level 1

            Thanks for the response! Any easier way to explain that or show it in my html for me? I know enough HTML/CSS to get by, but some of that goes over my head with how to exactly do it.

            • 3. Re: Making Embedded HTML Responsive?
              Ussnorway Adobe Community Professional

              if you put a copy the muse file (strip it down to just what you need to make this error) into a drop box I'll take a shot at it... another idea is the make a fixed 380 alt layout and test that but we need something to work with mate

              • 4. Re: Making Embedded HTML Responsive?
                dsebo Level 1

                https://www.dropbox.com/s/36jm8kdqz9x6v7q/Forum%20Test.muse?dl=0

                 

                The muse file is at this link, just to one page. I can use whatever we learn here in the other pages. I can't thank you enough for taking the time to check this out!

                 

                Ussnorway

                • 5. Re: Making Embedded HTML Responsive?
                  Ussnorway Adobe Community Professional

                  try this link = Adobe Creative Cloud

                   

                  demo page = Log In Page

                  • 6. Re: Making Embedded HTML Responsive?
                    dsebo Level 1

                    That was near perfection!

                     

                    1) What changes did you make to achieve this? HTML/CSS or something in Muse? Both?

                     

                    2) See GIF Below. The only hiccup is around 400px or so, the page doesn't reach all the way to the right. Everything still scales, but there is a gap.

                    5895634764c38697526324.gif

                     

                    You are a life saver right now! Answer to #1 will hopefully help me to apply this to my other pages.

                    • 7. Re: Making Embedded HTML Responsive?
                      Ussnorway Adobe Community Professional

                      dsebo wrote:

                       

                      That was near perfection!

                       

                       

                      I'll try harder next time then lol

                      dsebo wrote:

                       

                       

                       

                      1) What changes did you make to achieve this? HTML/CSS or something in Muse? Both?

                       

                      as a rule I assume login code needs to be left alone because servers are picky... wordpress servers are really picky, so you don't touch the code they give you.

                       

                      the main issue is your login code has size instructions for how the login fits but the Muse html is not part of that script... think of it like a gallery were one company is making the frame but the artist makes the painting to go inside it.

                       

                      short version = set the html resize to none (green) and the breakpoints to fixed (yellow) ... this removes the issue of the painting not fitting inside its frame i.e, Muse rounds the factions up or down to the pixel but your script doesn't

                       

                      Screenshot (712).png

                      you can adjust the layout by changing the page min, and the breakpoint size but I set it to look correct at 350px which is where most 2g and 3g vintage phones live... at 400 px you have a small screen turned on its side but its not as big a stress imo

                       

                      dsebo wrote:

                       

                      2) See GIF Below. The only hiccup is around 400px or so, the page doesn't reach all the way to the right. Everything still scales, but there is a gap.

                      5895634764c38697526324.gif

                       

                      You are a life saver right now! Answer to #1 will hopefully help me to apply this to my other pages.

                      be clareful using page-script previews because they are only a ruff guide... the actual phone is the only way to know how the page will display

                       

                      p.s, avoid pin (red) under 400px because that is most phones and they don't like pin... you should use pin [to browser] or nothing by then as a rule... its not what caused this error but you still need to be aware of it.

                       

                      p.p.s, wecome... anytime mate