Buttons not Horizontally Aligning for Mobile - html

I have two buttons and they horizontally align perfectly for desktop, but they don't for mobile. I am also using MaterializeCSS if that matters.
Here is the relevant code:
html {
--global-color: white;
--global-color-invert: black;
--background-color: white;
--not-current-screen: lightgray;
--current-screen: black;
--padding-of-side: 0%;
--padding-bottom: 5%;
--margin-left: 15%;
--margin-right: 15%;
--padding-left: 0%;
--padding-right: 0%;
}
html[data-theme="dark"] {
--global-color: black;
--global-color-invert: white;
--background-color: #1A1B1C;
--not-current-screen: #787878;
--current-screen: white;
}
#media screen and (min-device-width: 0px) and (max-device-width: 600px) {
html {
--padding-of-side: 20%;
--padding-bottom: 3%;
--margin-left: 2%;
--margin-right: 2%;
--padding-left: 1%;
--padding-right: 1%;
}
}
.not_current_screen {
color: var(--not-current-screen);
border-left: 1.5px solid var(--not-current-screen);
padding-left: var(--padding-of-side);
margin-top: 2px;
}
.current_screen {
color: var(--current-screen);
border-left: 1.5px solid var(--current-screen);
padding-left: var(--padding-of-side);
margin-top: 2px;
}
body {
background-color: var(--background-color);
color: var(--global-color-invert)
}
label > span {
color: var(--global-color-invert)
}
input[type="checkbox"] {
border: 2px solid var(--global-color-invert) !important;
}
.padded_div {
border: 1px solid var(--global-color-invert);
border-radius: 5px;
padding-top: 1%;
padding-bottom: var(--padding-bottom);
margin-left: var(--margin-left);
margin-right: var(--margin-right);
padding-left: var(--padding-left);
padding-right: var(--padding-right);
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div id="appMain" class="padded_div">
<h5>Please Agree to These Terms and Conditions:</h5>
<div class="row">
<div class="col s2">
<div>
<ul>
<li class="current_screen">Terms and Conditions</li>
<li class="not_current_screen">Patient Info</li>
<li class="not_current_screen">Suggested Symptoms</li>
<li class="not_current_screen">Symptoms</li>
<li class="not_current_screen">Diseases</li>
</ul>
</div>
</div>
<div class="col s8">
<br>
<ul style="text-align: center; list-style-position: inside;" class="browser-default">
<li>This is not a replacement for doctors.</li>
<li>This app may not be completely accurate.</li>
<li>Do not use this to actually check symptoms for patients.</li>
<li>This is a demo, we are non-liable.</li>
</ul>
<br>
<br>
<label style="text-align: center;">
<input type="checkbox" class="filled-in" />
<span>I understand</span>
</label>
</div>
</div>
<br>
<button style="margin-right: 33%" id="back" class="waves-effect waves-light btn">Back</button>
<button style="margin-left: 33%" id="next" class="waves-effect waves-light btn disabled" onclick="moveToPage(2)">Next</button>
<script>
var checkbox = document.querySelector("input[type=checkbox]");
checkbox.addEventListener('change', function() {
if (this.checked) document.getElementById("next").classList.remove("disabled");
else document.getElementById("next").classList.add("disabled");
});
</script>
</div>
Image showing broken on mobile:
If you want the website url, here: https://healthhacks2021.herokuapp.com/

Take off the margin-right:33% for the left button and margin-left:33% for the right button on mobile breakpoints and they will be side by side.

Put the buttons into SPAN, remove margins (that I think that are the problem) then encapsulate in a DIV, then set flex to it, just like this:
<div class="mybuttons">
<span><button id="back" class="waves-effect waves-light btn">Back</button></span>
<span><button id="next" class="waves-effect waves-light btn disabled" onclick="moveToPage(2)">Next</button></span>
</div>
And in CSS file:
.mybuttons {
display: flex;
justify-content: space-between;
text-align: left;
}
.mybuttons:last-child {
text-align: right;
}
Your buttons will show aligned without using margins. Maybe is not elegant... but will do.

Related

the code are messed up in a few resolution

I am checking my website different resolutions and browsers using Dev Tools and www.responsinator. in the web site I have used the owl Carousel, but in iPhone XR (414896) or iphone 12 pro (390844) or samsung galaxy (412 * 912) it is messed up.
in real it is like this
but on those resolution it is like this
this is the code for this part:
.cart-col {
width: 100%;
padding: 10px;
border: 1px solid #e2efef;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.29);
position: relative;
display: inline-block;
background: #fff;
border-radius: 10px;
margin-bottom: 15px;
}
.cart-title {
font-size: 13px;
font-family: IRANSans;
font-weight: bold;
padding-right: 7px;
display: inline-block;
}
.btn-filter {
background-color: #ffffff;
font-size: 14px;
outline: none;
cursor: pointer;
border: 1px solid #ccc;
vertical-align: middle;
width: 100px !important;
float: right;
margin-right: 15px;
margin-top: 15px;
}
.btn-filter>a {
color: #ccc;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
}
.btn-filter>a:hover {
color: black;
}
.img-filter {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.filter-title {
font-size: 12px;
font-family: IRANSans;
padding-right: 7px;
display: inline-block;
margin-top: 20px;
}
.filter-option {
font-size: 12px;
font-family: IRANSans;
padding-right: 7px;
}
<!-- ----- Bootstrap-4 ----- -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- ----- Body ------------ -->
<div class="col-lg-2 col-md-2 col-sm-12 mr-1 ml-2 cart-col fixed" style="height:650px;">
<div class="cart-title">Filter </div>
<div>
<hr /> </div>
<div class="filter-title">Select the options </div>
<div>
<div class="btn-filter">
<a asp-controller="" asp-action="">0-2 </a>
</div>
<div class="btn-filter">
<a asp-controller="" asp-action="">3-5 </a>
</div>
</div>
<div>
<div class="btn-filter">
<a asp-controller="" asp-action="">6-8</a>
</div>
<div class="btn-filter">
<a asp-controller="" asp-action="">8-12 </a>
</div>
</div>
<div>
<div class="filter-title">Select the type </div>
<div>
<select class="form-control filter-option" id="BookType" asp-items="#ViewBag.BookType">
<option value="">vocal </option>
</select>
</div>
</div>
<div>
<div class="filter-title">select the subject </div>
<div>
<select class="form-control filter-option" id="BookSubject" asp-items="#ViewBag.BookSubject">
<option value="">comic</option>
</select>
</div>
</div>
<div class="img-filter"><img src="~/images/filter.jpg" /> </div>
how can I make adjustable for this resolution
Update
=============================
I checked my code and I found that I have search input in my layout
<form asp-action="Index" asp-controller="Products" method="get" class="form-inlineflex">
<input type="search" class="header-search-input d-inline-flex" name="SearchKey">
<div class="action-btns d-inline-flex ">
<button class="btn btn-search" type="submit">
<i class="bi bi-search "></i>
</button>
</div>
</form>
with CSS:
.header-search-input {
background: #f0f0f0;
font-size: 12px;
height: 24px;
padding: 0;
outline: none;
}
if I remove this class from input box, so everything will be ok in any resolution and browser, but things will be messy in a few resolution as soon as I set that class to the inputbox
can anyone give me a clue for the reason?

How to move images to the left [duplicate]

This question already has an answer here:
How to get images side by side
(1 answer)
Closed last year.
I'm trying to move my images over so they are at the center of the page. If you look at the image you can see that they are to the left of my page and they are overlapping each other. Right now they are overlapping each other so how do I get them to not overlap and that they are side by side in the center of the page below my text? Any help will be greatly appreciated!
body {
margin: 0;
padding: 0;
font-family: "Open+Sans", sans-serif;
}
.navbar {
border-bottom: 2px solid #0C133C;
}
#nav {
background-color: #fff;
color: white;
width: 100%;
}
.nav {
float: right;
text-align: left;
margin: 0;
}
.nav>li {
display: Inline-block;
padding: 20px 50px 10px 9px;
}
.nav>li a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
border-bottom: 3px solid transparent;
}
.clearer {
clear: both;
}
.subnav class {
margin: 0;
position: relative;
}
.subnav>div a {
text-decoration: none;
color: #0C133C;
font-size: 18px;
padding: 20px 30px 10px 9px;
}
.logo {
margin-top: 1rem;
}
.subnav {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 1rem;
}
.flex-container {
display: flex;
}
.split {
width: 50%;
z-index: 1;
overflow-x: hidden;
padding-top: 20px;
}
.centered {
text-align: center;
}
.left {
left: 0;
background-color: #282C41;
color: white;
margin-top: .5rem;
}
h1 {
line-height: 1.2;
font-size: 35px;
bottom: 20px;
}
p1 {
font-size: 30;
}
.row {
display: flex;
justify-content: center;
left: 100px;
}
.row .column img {
width: 100px;
left: 50px;
}
.right {
right: 0;
background-color: #CDCDCD;
margin-top: .5rem;
font-size: 18px;
}
input,
select {
position: relative;
left: 140px;
width: 50%;
height: 30px;
padding: 12px 20px;
margin: 3px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.button {
background-color: #282C41;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-left: 225px;
border-radius: 12px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" href="styles.css" </head>
<body>
<div class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Sign In</a>
</li>
</ul>
<div class="clearer"></div>
</div>
<subnav class="subnav subnav-light bg-light">
<img src="universallogo.jpg" class="logo" />
<div class="container-fluid">
<a class="subnav=brand" href="#">
<a class="nav-link active" aria-current="page" href="#">Bonds</a>
</a>
<a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
<a class="nav-link active" aria-current="page" href="#">About Us</a>
<a class="nav-link active" aria-current="page" href="#">Search</a>
</div>
</subnav>
<div class="flex-container">
<div class="split left">
<div class="centered">
<h1>GET YOUR LICENSE & PERMIT BONDS FAST & EASY</h1>
<p1>We provide our Customers with a fast, easy, and secure way to get bonded. Get your Free Quote in minutes.
</p1>
</div>
<div class="row">
<div class="column">
<img src="Demotech.png" alt="rating" style="width:150%">
</div>
<div class="column">
<img src="USTreasury.png" alt="treas" style="width:40%">
</div>
</div>
</div>
<div class="split right">
<form name="form1" id="form1" action="/action_page.php">
<select name="subject" id="subject">
<option value="" selected="selected">Select Your State</option>
<option value="California">California</option>
<option value="California">Illinois</option>
<option value="California">Michigan</option>
<option value="California">Ohio</option>
</select>
<br><br>
<select name="topic" id="topic">
<option value="" selected="selected">Who is requring the bond</option>
</select>
<br><br>
<select name="chapter" id="chapter">
<option value="" selected="selected">What jurisdiction is requring the bond</option>
</select>
<br><br>
<select name="chapter" id="chapter">
<option value="" selected="selected">Select Your Bond</option>
</select>
<br><br>
</form>
<form action="/action_page.php">
<input type="text" id="date" name="startdate" placeholder="Effective Start Date">
<br><br>
<input type="text" id="email" name="typeemail" placeholder=" Type E-mail">
</form>
<br><br>
<button class="button button4">GET QUOTE NOW</button>
<p> Don’t see your Bond? Click Here to Submit Request</p>
</div>
</div>
</body>
</html>
I would suggest having the width of your column class set to 50% since you have two items and then have them display inline or inline-block.
I hope that you are intended to center the images of 'row' div inside 'split left' div.
<div class="row">
<div class="column">
<img src="ss.png" alt="rating" s̶t̶y̶l̶e̶=̶"̶w̶i̶d̶t̶h̶:̶ ̶1̶5̶0̶%̶"̶ />
</div>
<div class="column">
<img src="ss.png" alt="treas" s̶t̶y̶l̶e̶=̶"̶w̶i̶d̶t̶h̶:̶ ̶4̶0̶%̶"̶ />
</div>
</div>
Remove those inline style for image.
.row {
display: flex;
justify-content: space-around;
j̶u̶s̶t̶i̶f̶y̶-̶c̶o̶n̶t̶e̶n̶t̶:̶ ̶c̶e̶n̶t̶e̶r̶;̶
l̶e̶f̶t̶:̶ ̶1̶0̶0̶p̶x̶;̶
}
.row .column img {
height: 100px; /*height you needed for the image*/
width: 100px; /*width you needed for the image*/
l̶e̶f̶t̶:̶ ̶5̶0̶p̶x̶;̶
}
Do the above modification in your styles.css. Hope now the image will not be overlapped.

Cannot separate the item un-ordered list and button

I don't know how to describe this problem. I'm using three styling frameworks Bootstrap, Semantic, and Materialize CSS. I've created an unordered list after that there is a button when I use the br tag to separate them separation works but the gap doesn't fill with the body background color so I used margin but still, the gap is not filling with body color.
You can see this problem in this
HTML code
<section>
<div class="container dashboard ">
<div class="row">
<aside class="col-sm-3">
<ul class="list-group text-center">
<a class="list-group-item active" href="#">Dashboard</a>
<a class="list-group-item" href="#">All Posts</a>
<a class="list-group-item" href="#">Create/Edit Posts</a>
</ul>
<a class="btn btn-light btn-block" href="#"> <i class="fa fa-power-off"></i> <span class="text">Log out</span> </a>
</aside>
</div>
</div>
</section>
CSS
.dashboard{
margin-top: 100px;
margin-bottom: 100px;
padding: 30px 0px;
}
.dashboard .col-sm-3{
border-bottom: none;
border-radius: 5px;
height: fit-content;
padding-left: 0;
padding-right: 0;
background: #fff;
}
.dashboard .col-sm-3 ul a{
text-decoration: none;
font-weight: 500;
}
.dashboard .col-sm-3 .btn {
margin-top: 50px;
}
.btn-light {
background-color: #fff;
border-color: #e4e4e4;
text-align: center;
}
.btn-light span{
text-transform: none;
font-weight: 500;
}
You can check this question this thing will help you link
Actually, this question helps me too I've also faced a similar situation.
I will make this more simple I think this work you can try this
br {
content: "A" !important;
background: #fafafa !important;
display: block !important;
width: 100% !important;
height: 30px !important;
}

bootstrap navbar list dropdown extends far too wide

I have a navbar dropdown with the 'bell' icon that will hopefully show some notifications.
When for example, I add more text lines to any list item, the sentence extends horizontally and does not break on a new line, thus the dropdown box just keeps exceeding in width.
I have added this image to show what I mean:
How do I stop this? I dont want to give it a fixed width because the list item just breaks free out of the dropdown box and goes on extending.
here is my code:
body {
padding-top: 102px;
background-color: #4d4d4d;
font-family: 'Lato', verdana, sans-serif;
}
.container {
width: 1530px;
margin-top: 0;
}
.navbar-fixed-top {
background-color: #fff;
}
.navbar-header {
min-height: 80px;
}
.hamburger-icon {
margin-top: 20px;
}
.navbar-default .navbar-brand {
line-height: 45px;
font-size: 45px;
color: #010101;
text-transform: uppercase;
}
.navbar-default .navbar-brand span {
font-style: normal;
color: #ff5500;
}
.search .input-group {
padding-top: 15px;
font-family: 'Lato', sans-serif;
}
.search .input-group input.search-field {
border-radius: 0;
border: 0;
box-shadow: none;
background-color: #fff;
font-size: 18px;
font-weight: 100;
}
.search .input-group input.search-field:hover {
background-color: transparent;
}
.search .input-group-btn button {
padding: 2px;
border: 0;
box-shadow: none;
background-color: transparent;
border-radius: 0;
}
.search .input-group-btn button:hover {
background-color: #f8f8f8;
color: #ff5500;
}
.search .input-group-btn .glyphicon-search {
font-size: 22px;
}
.dropdown-toggle.inbox {
padding-top: 15px;
margin-bottom: 5px;
}
.dropdown-menu li {
width: 400px;
}
.dropdown-menu.bell {
background-color: #f8f8f8;
border-radius: 0;
box-shadow: 0;
}
.dropdown-menu.bell h4 {
padding: 10px 0;
color: #010101;
text-align: center;
display: block;
}
.dropdown-menu.bell li a {
padding-top: 5px;
padding-bottom: 5px;
}
.nav>li.dropdown.bell>a:hover,
.nav>li.dropdown.bell>a:focus {
background-color: transparent;
}
.dropdown-menu.bell li.divider {
padding: 0;
margin: 0 20px;
}
.dropdown-menu.bell .label {
background-color: transparent;
color: #ff5500;
font-weight: 100;
}
.badge-notify {
background: #ff5500;
margin-top: -24px;
margin-left: -20px;
height: 1.7em;
}
/* caret for notification dropdown */
.dropdown-menu.bell:before {
position: absolute;
top: -10px;
right: 10%;
display: inline-block;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
border-left: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.dropdown-menu.bell:after {
position: absolute;
top: -9px;
right: 10%;
display: inline-block;
border-right: 9px solid transparent;
border-bottom: 9px solid #f8f8f8;
border-left: 9px solid transparent;
content: '';
}
.user span.fullname {
font-size: 14px;
color: #010101;
font-weight: 400;
}
.user span:last-child {
padding-right: 10px;
}
.user span:first-child {
padding-right: 30px;
padding-left: 10px;
}
.user .dropdown-menu.user-list {
width: 100%;
border-radius: 0;
border: 0;
background-color: #f8f8f8
}
.user .dropdown-menu.user-list li a {
margin: 5px 0px;
color: #010101;
}
.user .dropdown-menu.user-list li a:hover {
background-color: transparent;
color: #ff5500;
}
.user .dropdown-menu.user-list li.divider {
padding: 0;
margin: 0 20px;
}
/* Large desktop */
#media (max-width: 1590px) {
.container {
width: auto;
}
}
/* Portrait tablet to landscape and desktop */
#media (max-width: 979px) {}
/* Landscape phone to portrait tablet */
#media (max-width: 768px) {
.container {
width: auto;
}
.navbar-default .navbar-brand {
font-size: 40px;
}
.dropdown.bell .inbox {
width: 100% !important;
}
.dropdown-menu.bell h4 {
margin: 0 0;
}
.dropdown-menu.bell:before,
.dropdown-menu.bell:after {
display: none;
}
.bell,
.user {
text-align: center;
}
}
/* Landscape phones and down */
#media (max-width: 480px) {
.navbar-default .navbar-brand {
font-size: 30px;
}
}
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="container">
<div class="navbar navbar-default navbar-fixed-top navbar-md" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle hamburger-icon" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
BRAND<span>LOGO</span>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- search bar -->
<li class="dropdown search">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control search-field" placeholder="Search name or keyword" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-128.png" height="30" width="30" class=" avatar-img img-square">
</button>
</div>
</div>
</form>
</li>
<!-- notification bell -->
<li class="dropdown bell">
<a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-bell-outline-128.png" height="45" width="45" class=" avatar-img img-square">
<span class="badge badge-notify">1</span>
</a>
<ul class="dropdown-menu bell" role="menu">
<li>
<h4 class="menu-title">Notifications</h4>
</li>
<li><span class="label label-default">4:00 AM</span>Favourites Snippet
</li>
<li class="divider"></li>
<li><span class="label label-warning">4:30 AM</span>Email marketing
</li>
<li class="divider"></li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email blaaaa
blaaaddddddddddddddddddddddddddddddddddddddddddddddddblaaadddddddddddddddddddddddddddddddddddddddddddddddd
design</a>
</li>
<li class="divider"></li>
<li>View All
</li>
</ul>
</li>
<!-- user login information -->
<li class="dropdown user">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span><img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-128.png" height="50" width="50" ></span>
<span class="fullname">Jacky Smith</span>
<span><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png" height="20" width="20" ></span>
</a>
<ul class="dropdown-menu user-list" role="menu">
<li>Action
</li>
<li class="divider"></li>
<li>Another action
</li>
<li class="divider"></li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>dfsjfhskfs</p>
<!-- <div class="chevron right">
</div>
<div style="height: 1em;">
</div> -->
</div>
</div>
</div>
</div>
If you don't want to give a fixed width, then you may use max-width.
It will not set any fixed width but when the text will exceed the given max-width, it will automatically break down to a new line.
This works. You have to stick a DIV to all content and occupying 12 cells text, and do not overflow. In the text I have also gotten a span, texts can not go empty label, everything should always be labeled
<li>
<div class="col-xs-12">
<a href="#">
<span class="label label-warning">5:00 AM</span>
<span>iber focused email bla Subscriber focused email bla Subscriber focused email bla Subscriber focused email bla Subscriber focused email bla Subscriber focused email bla Subscriber focused email bla Subscriber focused email bla Subscriber focused email bla Subscriber focused email bla</span>
</a>
</div>
</li>
you should use a (max-width) for your div.
Property white-space: normal helps to wrap words on new line, when it necessary, but if you have too long words, property word-break: break-word helps you to break word on new line
.dropdown-menu.bell li a {
...
white-space: normal;
word-break: break-word;
}
JSFiddle-example
I finally got my solution working, with the help from the stackoverflow community!.
I included the following on my .dropdown-menu.bell > li > a:
white-space: normal;
width: 350px;

Bootstrap Navbar Expands when Window gets smaller

Regular
Smaller
My bootstrap 3.0 navbar expands when the window gets to mobile sizes. I've included pictures of the two views above and where the issue is.
I am trying to get my navbar to not expand when the screen gets smaller and cover part of my page.
It may have something to do with the search bar and the buttons near it. I managed to get the search form stay the same size when it expanded across the entire screen behind the sidebar before.
Any help would be great.
HTML
`
<a class="navbar-brand" style="margin-left: -20px">GCImage</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-right">
<form class="navbar-form" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" align="right" ng-model="nav.keyword" uib-popover="Not Implemented Yet" popover-placement="bottom" popover-trigger="focus">
</div>
<button type="submit" class="btn btn-default" align="right" uib-popover="Not Implemented Yet" popover-placement="bottom" popover-trigger="focus">
<i class="fa fa-search"></i>
</button>
<a class="btn btn-default" href="underConstruction.html"><i class="fa fa-filter"></i></a>
</form>
</div>
</div>
`
CSS
.panel-green {
border-color: #5cb85c;
background-color: #5cb85c;
color: #ffffff;
}
.panel-orange {
border-color: #ff7e47;
background-color: #ff7e47;
color: #ffffff;
}
.shadow {
-moz-box-shadow: 1px 1px 2px 3px #ccc;
-webkit-box-shadow: 1px 1px 2px 3px #ccc;
box-shadow: 1px 1px 2px 3px #ccc;
}
.panel-footer {
color: #000000;
}
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
.body{
margin-left:175px
}
.navbar .navbar-form{
padding: 0 15px;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.box{
border-radius:0;
}
.navbar-collapse.collapse{
display: block !important;
}
.navbar-nav>li, .navbar-nav{
float: left !important;
}
.navbar-nav.navbar-right:last-child{
margin-right: -15px !important;
}
.navbar-right{
float: right !important;
}
It looks like the icons are wrapping underneath the search bar
I played around with your code a little and came up with a solution, however the icons eventually wrap when the screen gets really small (less than 250px wide)
Try changing this code:
<button type="submit" class="btn btn-default" align="right" uib-popover="Not Implemented Yet" popover-placement="bottom" popover-trigger="focus">
<i class="fa fa-search"></i>
</button>
<a class="btn btn-default" href="underConstruction.html"><i class="fa fa-filter"></i></a>
To this code:
<div class="icons">
<ul class="icon-list">
<li class="icon">
<button type="submit" class="btn btn-default" align="right" uib-popover="Not Implemented Yet" popover-placement="bottom" popover-trigger="focus">
<i class="fa fa-search"></i>
</button>
</li>
<li class="icon">
<a class="btn btn-default" href="underConstruction.html"><i class="fa fa-filter"></i></a>
</li>
</ul>
</div>
And add this to your stylesheet:
.icons {
float: right;
}
ul.icon-list {
padding: 0px;
margin: 0px 0px 0px 4px;
}
li.icon {
display: inline;
list-style: none;
}
.form-group {
display: inline-block !important;
}
This solution isn't perfect, and could be improved (make a backup of your old code before trying this)
Just add
.navbar-header{
display: inline-block; or display: inline-block!important;
}
in your stylesheet. I hope this is what you expect. :)