bootstrap - class="form-inline" - form field and button are not inline in iphone5c

The URL:
http://roydent.com/index-bs.asp

Check on iphone (I'm using 5c) in both portrait and landscape my "Join" button aligns below the form field. It displays correctly at 320 width on my desktop, but the button moves below the form field on the actual phone.

Here's the code:

        <div class="form-inline">
      <div class="input-group">
      <form name="ccoptin" action="http://visitor.r20.constantcontact.com/d.jsp" target="_blank" method="post">
        <input name="llr" value="gj56b6dab" type="hidden">
<input name="m" value="1103707961638" type="hidden">
<input name="p" value="oi" type="hidden">
  <input type="text" name="ea" class="form-control" placeholder="email..."><span class="input-group-btn">
        <button class="btn btn-default" type="submit">JOIN!</button>
      </span>
      </form>
    </div><!-- /input-group -->
    </div><!--form-inline-->

Open in new window

phillystyle123Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Brant SnowCommented:
It isnt a phone issue as much as it is a browser issue.

You can see that firefox works well however chrome never has the join button to the side, IE has it to the side sometimes and safari which is why your phone is probably have a problem does some of the time too

on bootstrap.min.css you have a class called
.input-group .form-control
This has a width of 100%

this is why the join button is getting pushed below as the above element fills up 100% of the space, I would recommend putting a div that contains both the input field and button, you could make this div span 100% if needed and float the join to the right, anyway this should at least help you track down the problem
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
phillystyle123Author Commented:
This was the issue. Although I had to start at breakpoint 320 with making

.input-group{width:60%;}

and then messed with it at subsequent breakpoints to keep the form-control and button on the same line.

thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.