CODEWITHSUNDEEP
htmlcss
GregH
GregH

Reputation: 5461

HTML elements (buttons) moving to new line at smaller screen sizes

I have a series of divs (which contain buttons) that are all on the same line at large screen sizes. As I make the screen smaller and smaller, the right most button gets pushed to a new line instead of staying on the same line as the other buttons. See pictures below (pic1 of large screen size, pic2 of small screen size)

pic1: pic1 - large size

pic2: enter image description here

and my html:

<div class="col-xs-12 clearfix">
    <div class="col-xs-4" style="padding-left: 290px">
        <button class="btn btn-default" ng-click="createProject()">New
            Project</button>

    </div>
    <div class="col-xs-4" align="center"
        ng-controller="CsvImportController"
        style="display: inline-block; padding-left: 200px">

        <a href="#" class="btn btn-default btn-file"
            onclick="document.getElementById('fileBrowser').click(); return false;">
            Select CSV File </a>
        <input id="fileBrowser" style="visibility: hidden;"
            class="btn btn-default btn-file" type="file" file-input="files" />
    </div>
    <div class="col-xs-4" align="center" style="padding-left: 110px">
        <a class="btn btn-default" href="projects.html#/projects">Browse
            Projects</a>
    </div>
</div>

Upvotes: 0

Views: 2206

Answers (2)

Sam Apostel
Sam Apostel

Reputation: 603

use 

box-sizing:border-box;

in css This subtracts the padding and the border from the inner width when showing.

Upvotes: 1

Przemysław Melnarowicz
Przemysław Melnarowicz

Reputation: 1057

Padding is consuming your space.

Instead of:

align="center" style="padding-left: 110px"

Try:

style="text-align: center"

Bootstrap buttons are inline-blocks by default, so giving text centering css property will align them as I think you want without harcoded padding which is problem here.

Upvotes: 1

Related Questions