asked on
How can I prevent this Bootstrap column from overlapping the other?
Here's a screenshot that shows my dilemma:
Notice how my "reviews | shipping & returns | checkout | login" menu is overlapping the company's logo?
Why?
And how can I fix that?
Here's my code:
I've got my columns set up accordingly, as far as "col-md-4 col-xs-12," yet when it begins to get smaller, right about the time I would expect the elements to stack on top of one another, the middle menu starts to overlap the logo and I don't know why.
Not sure if it matters, but when I eliminate the center section and make the other two elements - the log and the Shopping Cart icon - col-md-6, it behaves wonderfully. That center section is something I want, however, I just can't get it to '"stack" before it begins to overlap.
What am I missing?
Notice how my "reviews | shipping & returns | checkout | login" menu is overlapping the company's logo?
Why?
And how can I fix that?
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Hardwood Timber & Transportation Services | Camden, Tennessee | Admin Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--<link rel="stylesheet" href="css/style.css">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
@media (max-width: 766px) {
.company_logo {
float: none !important;
margin:auto;
display:block;
margin-top:15px;
}
.shopping_cart {
margin:auto;
display:block;
margin-bottom:10px;
background-image:url('images/shopping_cart.png');
background-repeat:no-repeat;
width:267px;
height:106px;
}
.company_logo {
margin-bottom:25px;
}
.content {
max-width:625px;
border:1px solid #4f77b3;
-moz-border-radius: 14px 14px 14px 14px;
border-radius: 14px 14px 14px 14px;
box-shadow:7px 7px 10px #4f77b3
margin:auto;
}
}
/* Landscape phones and portrait tablets */
@media (min-width: 767px) {
#header_wwol {
text-align:center;
min-height:80px;
}
.company_logo {
margin-top:10px;
}
.shopping_cart {
margin-top:5px;
float:right;
background-image:url('images/shopping_cart.png');
background-repeat:no-repeat;
width:267px;
height:106px;
margin-right:-50px;
}
.center_table_menu {
text-align:center;
padding-top:50px;
}
td.center_menu {
text-align:center;
padding:5px;
white-space:nowrap;
}
}
body, html {
height: 100%;
margin-bottom:45px;
font-size:11pt;
font-family:Arial, Helvetica;
}
.cart_counter {
padding-top:82px;
padding-left:20px;
}
.footer {
position: fixed;
bottom: -5px;
padding: 0px;
width: 100%;
height: 45px; /* Set the fixed height of the footer here */
background-image:url("images/footer_image.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="container-fluid" style="overflow:hidden; background-color:#ffffff;">
<div class="row-fluid">
<div class="col-md-4 col-xs-12">
<img src="images/logo.jpg" class="images-responsive company_logo">
</div>
<div class="col-md-4 col-xs-12 center_table_menu">
<table style="width:100%; margin:auto; ">
<tr>
<td colspan="9" style="border-bottom:1px solid #ccc;"> </td>
</tr>
<tr>
<td style="width:50px;"> </td>
<td class="center_menu">reviews</td>
<td style="text-align:center;">|</td>
<td class="center_menu">shipping & returns</td>
<td style="text-align:center;">|</td>
<td class="center_menu">checkout</td>
<td style="text-align:center;">|</td>
<td class="center_menu">login</td>
<td style="width:50px;"> </td>
</tr>
<tr>
<td colspan="9" style="border-top:1px solid #ccc;"> </td>
</tr>
</table>
</div>
<div class="col-md-4 col-xs-12">
<div class="shopping_cart">
<div class="cart_counter">
number of items in cart:
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12"> <br></div>
</div>
<div class="row-fluid">
<div class="col-xs-12" class ="header_div" style="background-image:url('images/header_divider.jpg'); background-repeat:x-repeat; width:115%; margin-left:-25px; height:41px;">
<div style="display:inline-block; float:right; padding-top:3px; margin-right:12%;">
<a href="admin.php"><img src="images/home.png" border="0" style="height:20px;" class="image_title" title="admin home page"></a>
<a href="journal/index.php" target="_blank"><img src="images/journal.png" border="0" style="height:30px;" class="image_title" title="journal"></a>
<div style="padding-top:6px; display:inline-block;"><a href="logout.php"><img src="images/logout.png" border="0" style="height:20px;" class="image_title" title="logout"></a></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12"><br>
To login to the WWOL Toolbox, fill in the fields below and click on "submit!"
</div>
</div>
<form autocomplete = "off" id = "login" class="form-signin" onsubmit="validate()" action="functions/login.php" method="POST">
<div class="row">
<div class="col-xs-12"><br>
<div style="margin:auto; width:320px; border:1px solid #cccccc; border-radius:10pt; box-shadow:10px 10px 5px #cccccc; padding:0px 10px 0px 10px;"><br>
<div class = "form-group">
<input autocomplete = "off" type="text" id = "username" name = "EId" class="form-control input-sm" placeholder="Employee ID Number">
</div>
<div class = "form-group">
<input autocomplete = "off" type="password" id = "password" name = "pwd" class="form-control input-sm" placeholder="Password">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12" style="text-align:center; margin:auto;"><br>
<input type="hidden" name="login_submit" value="submit">
<input type="image" src="images/submit.jpg" name="login">
</div>
</div>
</form>
</div>
<?php require_once("footer.php");?>
I've got my columns set up accordingly, as far as "col-md-4 col-xs-12," yet when it begins to get smaller, right about the time I would expect the elements to stack on top of one another, the middle menu starts to overlap the logo and I don't know why.
Not sure if it matters, but when I eliminate the center section and make the other two elements - the log and the Shopping Cart icon - col-md-6, it behaves wonderfully. That center section is something I want, however, I just can't get it to '"stack" before it begins to overlap.
What am I missing?
Bootstrap
Last Comment
Bruce Gust