Boostrap button resize

Question

I have a simple form: For some reason, the "Generate Passcode' button is not resizing on my iphone and occupies double its size (it occupies 8 cols). Can someone help?

<form action="#" class="form-horizontal">

                    <fieldset>


                        <div class="form-group">


                        </div>  



                        <div class="form-group">
                                <label class="control-label col-xs-4 col-sm-4 col-md-4" for="passcodeID" > Amount: </label>

                                <div class="col-xs-4 col-sm-4 col-md-4">
                                <input type="text" class="form-control" id="passcodeID" autofocus/>
                                </div>

                        </div>  



                        <div class="form-group">


                                <div class="col-md-4 col-md-offset-4 col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-4">
                                <button class="btn btn-primary" data-toggle="modal" data-target="#generatePasscode"> Generate Passcode </button>
                                </div>

                        </div>  


                    </fieldset>
                    </form>

Answer 1

For this you have to reduce font size and padding of the button for mobile. resolution by @media screen. For mobile it is not changing the column to 8. The button is overflowing. This is due to large no of text inside the button. You can verify it by giving overflow:hidden style for div above buttton.

So the fix is For mobile resolution add an extra class for the button and give @media screen css and reduce font size and padding of button for small screen resolution in which you face issue.