Please i have tried to look for solutions to this div but found none, I dont want my div to overflow and create a scroll. How can i adjust it that it wont overflow again.Thanks. My code is below
.contact-bar {
/*overflow: hidden;*/
}
.contact-top {
background-color: #1a1a1a;
border: 1px solid transparent;
padding: 5px;
}
.contact-top p {
margin: 0 20px;
color: white;
}
* {
margin:0;
padding:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row contact-bar">
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6 contact-top">
<p><i class="fa fa-phone"></i><span> </span><i class="fa fa-whatsapp"></i> +2347033501657</p>
</div>
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6 contact-top">
<p><i class="fa fa-envelope"></i> allamit#gmail.com</p>
</div>
</div>
Try to wrap row in a container or container-fluid as per your requirements
.contact-bar {
/*overflow: hidden;*/
}
.contact-top {
background-color: #1a1a1a;
border: 1px solid transparent;
padding: 5px;
}
.contact-top p {
margin: 0 20px;
color: white;
}
* {
margin:0;
padding:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row contact-bar">
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6 contact-top">
<p><i class="fa fa-phone"></i><span> </span><i class="fa fa-whatsapp"></i> +2347033501657</p>
</div>
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6 contact-top">
<p><i class="fa fa-envelope"></i> allamit#gmail.com</p>
</div>
</div>
</div>
Working fiddle here
Remove the row and use the container. Hope it helps..
.contact-bar {
/*overflow: hidden;*/
}
.contact-top {
background-color: #1a1a1a;
border: 1px solid transparent;
padding: 5px;
}
.contact-top p {
margin: 0 20px;
color: white;
}
* {
margin:0;
padding:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container contact-bar">
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6 contact-top">
<p><i class="fa fa-phone"></i><span> </span><i class="fa fa-whatsapp"></i> +2347033501657</p>
</div>
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6 contact-top">
<p><i class="fa fa-envelope"></i> allamit#gmail.com</p>
</div>
</div>
overflow:hidden; applies hide to its childrens. But in this case it is you contact-barclass that wraps them all. So you need to apply overflow:hidden to the one that contains contact-bar which is body. By the way, you bootstrap applies -15px margin and thats why there is a gap in the example code of mine.
https://cr8code.co/editor.php?workid=e42b821765c82cdc32e457c79b638d35
Related
This is the css. The problem is when the screen is in 1366x768, div didn't stick with the bottom navbar.
Is there any other ways that can replace the bottom property?
.Newmealpopout {
position: fixed;
left: inherit;
bottom: 56px;
height: 220px;
padding: 6px;
background-color: #9e9e9e;
color: #333;
}
<div class="col-xs-3 col-md-2 col-lg-3 mts-padding-all-15 mts-border-right text-center" style="">
<span style="margin-left:-3px; color: black!important; text-shadow: 0px 0px 0px ;">Meal</span> <a href="javascript:$('#pnlmealNew').slideToggle('fast');" onclick="fntToggleHotelList(event);" class="meal-toggle tourdetail-ttp mts-hypl mts-text-12"
data-toggle="tooltip" title="" data-original-title="View Meals"><i class="fa fa-lg fa-info-circle"></i></a>
<br>
<div class="row">
<div id="pnlmealNew" class="col-xs-3 col-md-2 col-lg-3 Newmealpopout mts-padding-top-10 mts-padding-side-10" style="display: none;">
</div>
</div>
you can refer the screenshot for references
body {
margin-left: 50px !important;
margin-right: 50px !important;
}
.section {
background: rgba(255, 255, 255, 0.69);
height: 200px;
border: 1px solid #000;
}
.outer {
display: table;
width: 100%;
height: 100vh;
}
.inner {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.parent-div {
margin: 0 auto;
width: 82%;
}
.table-parent {
display: table;
}
.table-child {
display: table-cell;
vertical-align: middle;
}
.section:hover {
color: #ececeb;
transition: all 0.3s;
cursor: pointer;
}
.table-child .fa {
padding-right: 6px !important;
}
.section:hover .item-overlay.bottom {
bottom: 0;
}
.item-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
width: 100%;
-moz-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
-webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
.item-overlay.bottom {
bottom: 100%;
}
.table-child p {
display: inline-block;
text-rendering: auto;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
a {
text-decoration: none;
color: #333 !important;
}
#AddProduct {
display: inline-block;
}
#media screen and (max-width: 767px) {
.col-xs-12 {
width: 100% !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="row outer">
<div class="row inner">
<div class="clearfix parent-div">
<a data-toggle="modal" data-target="#myModal">
<div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
<div class="item-overlay bottom"></div>
<h4 class="table-child"><i class="fa fa-plus-circle" aria-hidden="true"></i>
<p>ADD A PRODUCT</p>
</h4>
</div>
</a>
<a>
<div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
<div class="item-overlay bottom"></div>
<h4 class="table-child"><i class="fa fa-pencil" aria-hidden="true"></i>
<p>EDIT A PRODUCT</p>
</h4>
</div>
</a>
<a data-toggle="modal" data-target="#removeModal">
<div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
<div class="item-overlay bottom"></div>
<h4 class="table-child"><i class="fa fa-minus-circle" aria-hidden="true"></i>
<p>REMOVE A PRODUCT</p>
</h4>
</div>
</a>
<div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
<div class="item-overlay bottom"></div>
<h4 class="table-child"><i class="fa fa-bars" aria-hidden="true"></i>
<p>USER'S LIST</p>
</h4>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
<div class="item-overlay bottom"></div>
<h4 class="table-child"><i class="fa fa-sort" aria-hidden="true"></i>
<p>ORDERS</p>
</h4>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
<div class="item-overlay bottom"></div>
<h4 class="table-child"><i class="fa fa-power-off" aria-hidden="true"></i>
<p>LOGOUT</p>
</h4>
</div>
</div>
</div>
</div>
</body>
I am using Bootstrap v3. The divs are not taking 100% width in mobile devices with col-xs-12. Code is working fine for medium and small screens but retaining the 50% width for screens less than 768. Here is the link to the screenshot of the behaviour.
Image
Gone through all other available solutions but none worked for me.
I don't know how to put this into words but I am getting the desired output on resizing the browser window but the code doesn't seem to work on the actual device and the web inspector. Screenshot of the device Image
Additionally I tried with !important as well at the end of css but facing the same problem.
Taken from comment of chetan kalra and posting answer for quick reference for others. I also faced this issue and found viewport meta tag was missing. Adding below line did the trick.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
So I built a menu and would like to be able to toggle it. I'm simply animation the width using CSS3.
-webkit-transition: width 1s;
transition: width 1s;
Now, when the menu is closed and you re-open it, the menu items "pop in", as shown here: https://gyazo.com/6dfee24687fff026e464323882770959
I think it's because the sentences are wrapping. I've tried everything to stop that from happening, to no avail.
This is my structure:
<div id="menu" class="col-md-2 col-xs-12 nopad closed">
<div id="togglemenu" class="col-xs-12 nopad">
<div class="hidden-xs hidden-sm col-md-3 menu-icon" onclick="document.querySelector('#menu').classList.toggle('closed')">
<div class="vertical">
<div>
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="nopad menu-header col-xs-12" onclick="document.querySelector('#menu').classList.toggle('closed')">
<div class="vertical">
<div class="pull-right menu-toggle">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<div>MENU</div>
</div>
</div>
<div class="col-xs-12 nopad">
<div class="hidden-xs hidden-sm col-md-3 menu-icon">
<div class="vertical">
<div>
<i class="fa fa-usd" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="col-xs-12 col-md-9 menu-item active">
<div class="vertical">
<div>Menu item</div>
</div>
</div>
</div>
<div class="nopad menu-header btop col-xs-12">
<div class="vertical">
<div>Menu divider</div>
</div>
</div>
</div>
And the CSS that goes along with it:
#menu {
min-height: 65vh;
background: #1c2329;
-webkit-transition: width 1s;
transition: width 1s;
}
#menu div {
text-overflow: clip;
}
.togglemenu {
cursor: pointer;
}
.menu-header {
text-align: center;
color: white;
text-transform: uppercase;
background: #181d21;
}
.menu-header.btop {
border-top: 1px solid #3de66e;
}
.vertical {
display: table-cell;
vertical-align: middle;
}
.menu-icon {
background: #1c252a;
text-align: center;
font-size: 2.1vh;
color: #3de66e;
}
.menu-item {
background: #1c2329;
text-transform: uppercase;
cursor: pointer;
}
.menu-item.active {
border-right: 3px solid #3de66e;
}
.menu-icon, .menu-header, .menu-item {
height: 5vh;
display: table;
overflow: hidden;
}
#menu.closed .menu-item, #menu.closed .col-md-9, #menu.closed .menu-header {
display: none;
}
#menu.closed .menu-item div {
display: block;
}
#menu.closed {
width: 3vw;
}
#menu.closed .menu-part {
display: none;
}
#togglemenu {
display: none;
}
#menu.closed #togglemenu {
display: block;
}
I was hoping someone could help me. Thanks in advance!
I am using Bootstrap and trying to center 3 div blocks using the bootstrap 12 columns style. So each div takes up 4 columns. I want some spacing between these columns thus I added 10px margin to the right. This pushes down the 3rd div to the next row. How do I get my spacing and still keep all 3 columns on the same row?
HTML
<div class="container">
<div class="form-group col-sm-4 col-lg-4 cust_box">
<h3>Something</h3>
</div>
<div class="form-group col-sm-4 col-lg-4 cust_box">
<h3>Something</h3>
</div>
<div class="form-group col-sm-4 col-lg-4 cust_box">
<h3>Something</h3>
</div>
</div>
CSS
.cust_box{
margin-top: 15px;
margin-bottom:15px;
padding-left: 10px;
padding-right:10px;
background-color: #1A284B;
color: #fff;
height: 290px;
max-width:100%;
border: 1px solid #162444;
margin-right: 10px; /*Line that causes issue*/
}
Problem recreated in CodePen
Place your class cust_box inside the the column. The h3 has margin so that may also be interfering with your layout. You may also want to just use the row class instead of form-group.
See working Example Snippet. (colors added so you can see what's actually happening)
.cust_box {
margin: 15px 2.5px;
padding: 25px;
height: 290px;
max-width: 100%;
background-color: #1A284B;
color: #fff;
border: 1px solid #162444;
}
.cust_box h3 {
margin: 0;
}
.red {
border: 2px solid red;
}
.yellow {
background: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row yellow">
<div class="col-sm-4 red">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
<div class="col-sm-4 red">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
<div class="col-sm-4 red">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
</div>
</div>
Example without Color
.cust_box {
margin: 15px 2.5px;
padding: 25px;
height: 290px;
max-width: 100%;
background-color: #1A284B;
color: #fff;
border: 1px solid #162444;
}
.cust_box h3 {
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
<div class="col-sm-4">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
<div class="col-sm-4">
<div class="cust_box">
<h3>Something</h3>
</div>
</div>
</div>
</div>
with the additional margin you are destroying the bootstrap grid system.
have you tried using padding instead of margin?
apart from this you can customize bootrap a lot!
have a look on this:
http://getbootstrap.com/customize/#grid-system
EDIT:
i looked at your code and saw your struggle:
use a inner div like this:
<div class="form-group col-sm-4 col-lg-4 cust_box">
<div class="inner">
<h3>Something</h3>
</div>
</div>
and use your style on the inner div:
.cust_box .inner{
margin-top: 15px;
margin-bottom:15px;
padding-left: 10px;
padding-right:10px;
background-color: #1A284B;
color: #fff;
height: 290px;
max-width:100%;
border: 1px solid #162444;
margin-right: 10px; /*should not be an issue anymore*/
}
I have a simple bootstrap grid with a row displaying some text in one column and a stacked font-awesome icon set in another column. The issue I'm having is the icon-set is not vertically aligned in the middle of the div, as the text is. As you can see the icon is more aligned to the top of the div. Is there a way to center align this?
I've created a fiddle here and re-posted the code below:
html:
<div class="container-fluid">
<div class="row posted-content">
<div class="col-md-10">
<h4 class="text-primary pull-left">Hey, this is some text</h4>
</div>
<div class="col-md-2 comment-count pull-right">
<a class="fa-stack comment-action">
<i class="fa fa-comment-o fa-fw fa-stack-2x"></i>
<i class="fa fa-stack-1x">5</i>
</a>
</div>
</div>
</div>
css:
.posted-content {
border-radius: 4px;
border-color: #e7e7e7;
border: 1px solid rgba(0, 0, 0, 0.1);
max-width: 1140px;
background-color: #f8f8f8;
margin-bottom: 0px;
vertical-align: middle;
}
I've tried playing with vertical-align but to no avail. Any ideas appreciated.
Try this
<div class="container-fluid">
<div class="row posted-content centered-vertically">
<div class="col-md-10">
<h4 class="text-primary pull-left">Hey, this is some text ghssd fjkflsdj sdfkkl;asdk</h4>
</div>
<div class="col-md-2 comment-count pull-right">
<a class="fa-stack comment-action">
<i class="fa fa-comment-o fa-fw fa-stack-2x"></i>
<i class="fa fa-stack-1x">5</i>
</a>
</div>
</div>
</div>
CSS
.container-fluid .centered-vertically{
display:flex;
align-items:center;
}
Fiddle here
Here is a little Workaround with flexbox:
.posted-content {
border-radius: 4px;
border-color: #e7e7e7;
border: 1px solid rgba(0, 0, 0, 0.1);
max-width: 1140px;
background-color: #f8f8f8;
margin-bottom: 0px;
display:flex;
align-items: center;
justify-content: space-between;
}
.posted-content:before,.posted-content:after{
display:none;
}
.comment-action {
color: #79858A;
}
.comment-count>a {
text-decoration: none;
}
.comment-count>a:hover {
color: #d9534f !important;
}
JSFiddle