Bootstrap Mobile Alignment vs Desktop

Question

Basically, I am coding a simple page and on desktop, it all aligns just fine. When switched over to mobile it appears very differently. I will include screenshots to show what I mean. I have tested this on Nexus 5, iPhone 6, iPad Air and two different desktop monitors (21in + 17in).

How would I go about fixing this exactly? I am not very advanced in bootstrap but I couldn't find anything in the documentation about mobile.

Also, the alignment of things and their position changes based on size of monitor. Even if I zoom out it will change the position of things and make it look weird.

I guess what I'm wondering is how to make this page more repsonsive!

Here is the code for the section:

    <div class="well" style="height:12%;width:75%;">
        <div class="col-md-10">
            Testing12332<br /><br /><a class="link" href="view.php?id=27"><b>Testingthis</b> - 0 seconds</a>
        </div>
        <div class="col-md-2">
            <form action="like.php?id=27" method="POST" style="margin-bottom:0px;margin-top:-8%;">
                <button class="btn btn-primary btn-sm" type="submit" name="submit" id="submit">&#9650</button><br />
                <input type="hidden" name="id" value="27">
            </form>
            <div class="well" style="padding:0px;margin-bottom:0px;">
                0
            </div>
            <form action="dislike.php?id=27" method="POST">
                <button class="btn btn-primary btn-sm" type="submit" name="submit" id="submit">&#9660;</button><br />
                <input type="hidden" name="id" value="27">
            </form>
        </div>
    </div>

Let me know if more information is needed! I tried to provide as much as possible! Also, yes, I am using Bootswatch (Flatly) if that makes a difference.

Edit: All of the code is here --> http://pastebin.com/AvYEkDNN

Sorry for the format being messed up, a lot of it is output with PHP and messed up the format in each loop.

Answer 1

Here's a link to your complete HTML. http://pastebin.com/ZCvDzz3b The only other thing you need to do is create an external stylesheet if you don't already have one called style.css and then add this code at the bottom of this sheet. Make sure your style.css is placed in the same location as your index file.

@media (min-width:768px) {
        .well {width:75%!important;
                height:22%!important;
        }
    }

Answer 2

OK, I have found the issue thank you to your comment

First of all, do NOT use inline styling. It usually means problems and quite rarely a solution.

With that in mind, get rid of this:

<form action="like.php?id=27" method="POST" style="margin-bottom:0px;margin-top:-8%;">

and replace it by

<form action="like.php?id=27" method="POST" class="my-custom-form">

this will allow you to re-use that style every time.

Now you can do something like this by simply adding some EXTERNAL CSS:

.my-custom-form{margin-bottom:0px;margin-top:-8%;}
/** add some styling for small devices **/
@media handheld, only screen and (max-width: 767px) {
.my-custom-form{margin-bottom:0px;margin-top:1% /* or whatever, just not a negative value */;}
}

and it will fix your issue

EDIT:

Besides the above, clean your code like this:

<div class="well row-fluid">
    <div class="col-md-10">testingthis
        <br />
        <br /><a class="link" href="view.php?id=28"><b>Anonymous</b> - 27 minutes ago</a>

    </div>
    <div class="col-md-2">
        <form action="like.php?id=28" method="POST" class="my-form">
            <button class="btn btn-primary btn-sm" type="submit" name="submit" id="submit">&#9650</button>
            <br />
            <input type="hidden" name="id" value="28" />
        </form>
        <div class="number">-1</div>
        <form action="dislike.php?id=28" method="POST">
            <button class="btn btn-primary btn-sm" type="submit" name="submit" id="submit">&#9660;</button>
            <br />
            <input type="hidden" name="id" value="28" />
        </form>
    </div>
    <div class="clear clearfix"></div>
</div>

and also get rid of your element. With all these changes (plus any additional visual adjustment you may need), it will work on all sizes