• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Making Embedded HTML Responsive?

New Here ,
Feb 03, 2017 Feb 03, 2017

Copy link to clipboard

Copied

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>

Views

772

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Feb 03, 2017 Feb 03, 2017

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 m

...

Votes

Translate

Translate
LEGEND ,
Feb 03, 2017 Feb 03, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 03, 2017 Feb 03, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 03, 2017 Feb 03, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 03, 2017 Feb 03, 2017

Copy link to clipboard

Copied

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​

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 03, 2017 Feb 03, 2017

Copy link to clipboard

Copied

try this link = Adobe Creative Cloud

demo page = Log In Page

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 03, 2017 Feb 03, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 03, 2017 Feb 03, 2017

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines