CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Black
Black

Reputation: 20252

Elements are overlapping each other even though I use twitter bootstrap

I am using twitter bootstrap on my site, I noticed that elements are overlapping if I make my window smaller. This does not look nice and I thought twitter bootstrap should make my website full responsive on all sizes.

corrupt

<div class="main row">
    <div class="col-sm-6">
        <center><h3>Firmware Download</h3></center>

<!-- Main Buttons -->
        <div class="row">
            <div class="col-sm-6">
                <button class="mainButtons" id="downloadFW">Download newest firmware to the server</button>
                <button class="mainButtons" id="reboot">Reboot server</button>
            </div>
            <div class="col-sm-6">
                <button class="mainButtons" id="deleteLogfile">Delete logfile</button>
                <button class="mainButtons" id="deleteTemplateStatusFile">Delete status file</button>
            </div>
        </div>

<!-- Template Generierung -->
        <div class="templateButtons col-sm-12">
            <h4>Create Template</h4>
            <select id="firmwareTemplate">
                <option value="mb">MB</option>
                <option value="bm">BM</option>
            </select>
            <select id="fileType">
                <option value="ova">OVA</option>
                <option value="vhd">VHD</option>
            </select>
            <button id="generateTemplate">Template erstellen</button>
        </div>
    </div>

    <div class="codeBox col-sm-6">
        <h5>Ausgabe:</h5>
        <pre id="codeOutput">-</pre>
    </div>
</div>

CSS:

body {
    margin: 20px;
}

.codeBox {
    border: 1px solid black;
    overflow-y: scroll;
}
.codeBox code {
    /* Styles in here affect the text of the codebox */
    font-size:0.9em;
    /* You could also put all sorts of styling here, like different font, color, underline, etc. for the code. */
}
.lineTop {
    height: 1px;
    background-color: #D8D8D8;
    margin-top: 20px;
}
.lineBottom {
    height: 1px;
    background-color: #D8D8D8;
    margin-bottom: 20px;
}
.lineNoMargin {
    height: 2px;
    background-color: #D8D8D8;
}
.main {
    height: 350px;
    margin-left: 20px;
}
.mainButtons {
    min-width: 300px;
    text-align:left;
}
.templateButtons {
    margin-top: 50px;
    margin-left: 12px;
}

#templateStatusOutput {
    min-height: 240px;
}
#deleteTemplateStatusFile {
    visibility: hidden;
}
.statusBarContainer {
    border: 1px solid #D8D8D8;
    padding-right: 0;
    padding-left: 0;
}
.statusBar {
    height: 20px;
    background-color: #5cb85c;
    width: 0;
    color: white;
}
#statusBarTemplateStatus {
    background-color: green;
}
#statusBarCopyStatus {
    background-color: orangered;
}
.makeSpace50 {
    height: 50px;
}
#statusBar1 {
    visibility: hidden;
}
#statusBar2 {
    visibility: hidden;
}

Is this my fault?

Upvotes: 0

Views: 497

Answers (1)

samAlvin
samAlvin

Reputation: 1678

you use absolute value in your css, for example:

.mainButtons {
    min-width: 300px;
    text-align:left;
}

Try using relative value like percentage for example, so that the element can keep the bootstrap's responsiveness:

.mainButtons {
    min-width: 100%;
    text-align:left;
}

-------------- UPDATE -------------------

looking at your code here:

<div class="main row">
<div class="col-sm-6">
    <center><h3>Firmware Download</h3></center>

    <!-- Main Buttons -->
    <div class="row">
        <div class="col-sm-6">
            <button class="mainButtons" id="downloadFW">Download newest firmware to the server</button>
            <button class="mainButtons" id="reboot">Reboot server</button>
        </div>
        <div class="col-sm-6">
            <button class="mainButtons" id="deleteLogfile">Delete logfile</button>
            <button class="mainButtons" id="deleteTemplateStatusFile">Delete status file</button>
        </div>
    </div>
    // ......

First you divide the screen into two part, <div class="main row"><div class="col-sm-6"> ...., then you divide again the first part of the screen into two again <!-- Main Buttons --><div class="row"><div class="col-sm-6">..., this mean the button only has 1/4 of your screen as its space. If that 1/4 space is less than 300px, as it is the min-width of your mainButtons, then your problem occured.

Upvotes: 1

Related Questions