Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
How to delete the area under the navbar? I used the "margin-bottom: 0" and it's not working correctly.
just add .container class to your .wide div
<div class="wide container">
<h1>test</h1>
</div>
https://jsfiddle.net/grassog/1b0m6ztx/
use clearfix class with wide or just add overflow: hidden; in .wide to set h1 margin
<div class="wide clearfix">
<h1>test</h1>
</div>
or
.wide {
overflow: hidden;
}
Wrap all the content inside wide div with <div class="container"></div> to keep full width background image as it is in your screenshot.
<div class="wide">
<div class="container">
<h1>test</h1>
</div>
</div>
JSFiddle example
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
enter image description hereI have some html which is causing a box shadow in mobile view. I didn't put it there and I've tried everything to get rid of it. It only shows up in mobile view but I suspect its there because I'm inserting all the text in one place and then moving it left.
Html:
<div class="b">t</div>
<div class="c">n</div>
<div class="d">a</div>
<div class="e">t</div>
<div class="f">l</div>
<div class="g">u</div>
<div class="h">s</div>
<div class="i">n</div>
<div class="j">o</div>
<div class="k">c</div>
<div class="l">n</div>
<div class="m">g</div>
<div class="n">i</div>
<div class="o">s</div>
<div class="p">e</div>
<div class="q">d</div>
</div>
And
</div><div id="text-7" class="widget widget_text"> <div class="textwidget"><div class="line-down">
Tried altering the id css:
#text-7 {box-shadow: none}
Didn't work.
You can view here
Here is Codepen but I can't seem to reproduce the problem https://codepen.io/adsler/pen/rXoNGJ
The box-shadow is caused by this css rule
.n {box-shadow: 0px 0px 10px #808080;}
I'ld suggest to remove or override it with some more specific css
body .n {box-shadow: none;}
or just inline:
<div style="box-shadow:none;" class="n">i</div>
And #mertcanb is right, your markup is a mess ;)
You have .n {box-shadow: 0px 0px 10px #808080;} in your css which creates that box-shadow. Search your css for that using CTRL+F.
Consider using svg or other formats instead of creating your complex illustration with divs. The nesting is incredibly dirty.
Cheers!
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Issue
I finally found an easy way of vertical aligning div elements and any other type of element, using the CSS properties/values display:flex; align-items: center. Only issue now is that the Boostrap grid system i.e. col-*-12 doesn't work. If I set a div to expand 12 columns when on a small screen, it doesn't react, in less I remove the styling used for vertically aligning the items.
Aim
To be able to use the grid system and vertically align elements. Any idea why display: flex is preventing the grid from working?
HTML
<div class="header-container padding-top--sm padding-bottom--sm">
<div class="row" style="display:flex;align-items:center">
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="#" alt="logo">
</div>
<div class="col-xs-12 col-sm-6 col-md-6 text-md-center">
<p class="txt--white no-margin-bottom h-thin"> Lorem Ipsume, lorem ipsum</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 text-md-right">
<span class="txt--white">support#support.com</span><br>
<span class="no-margin-bottom txt--white">001111111111 (8am - 8pm GMT)</span>
</div>
</div>
</div>
CSS
.padding-top--sm { padding-top: 1rem; }
.padding-bottom--sm { padding-bottom: 1rem; }
.header-container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
width: 90%;
}
The reason is because you are not letting your row "wrap" its contents.
By default its is set to nowrap value which means it does not allow the content to extend the container.
Try adding flex-wrap: wrap; property to your row style
<div class="row" style="display:flex;align-items:center;flex-wrap: wrap;">
...
</div>
Codepen here
PS: Consider avoiding inline styles, use external or atleast internal styles as much as possible
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
How can I put two div side by side with CSS like shown on the image down here?
Eventually I'd like the div on the left to be scrollable, but it's not necessary.
The most important thing I need is to put them side by side.
Side by side divs:
display: inline-block;
//add this to both divs
http://www.w3schools.com/cssref/pr_class_display.asp
Scrollable div:
overflow: scroll;
//add this to the left div
http://www.w3schools.com/cssref/pr_pos_overflow.asp
example:
https://jsfiddle.net/90h5c20x/
Put your divs into common parent, and then you have to use css. For the left div, add style="float: left". For the second one write style="float: right".
You can wrap both divs inside another div and apply the flexbox to the wrapper
html:
<div class="wrapper">
<div class="div1">
<!-- div code here -->
</div>
<div class="div2">
<!-- div code here -->
</div>
</div>
CSS:
.wapper{
display: flex;
flex-flow: row wrap;
}
This works smoother than inline-block and floats and is mobile responsive. It will also allow the scrolling for the first div.
Flexbox is cool and very elegant, but it simply does not work in a production environment (IE9 and lower) without any fixes/hacks. Therefore I am providing this working cross-browser answer.
Here is your HTML:
<h1>Title</h1>
<div class="wrapper">
<div class="div1">
<!-- div code here -->
</div>
<div class="div2">
<!-- div code here -->
</div>
</div>
With the following CSS:
.wrapper {display: table;}
.div1, .div2 {display: table-cell;}
And here is the working code: http://codepen.io/anon/pen/xVMprO
Here is the code with overflow: http://codepen.io/anon/pen/NNoXBJ
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have two divs that are col-xs-12 wide. There is no margin between them so they touch. I would like to add a border between them, like the image on the right (what I have currently is on the left).
I tried adding a 1 px height 11-wide column and centering it, but of course you can see a gap between the two rows on each side of the border.
Here's a jfiddle of the whole thing.
<div class="row top-buffer-10">
<div class="col-xs-12">
<div class="header-text">
<p style="font-size:130%"><b>%REGION%</b></p>
<p style="padding-bottom:15px;">(currently selected)</p>
</div>
</div>
</div>
<div class="row top-buffer-10">
<div class="col-xs-12">
<div class="img-with-text">
<img style="margin-top:5px;" src="img/gsd_list_contact.png" alt="itscl" />
<p style="font-size:90%;padding-left:0px;"><b>PHONE:</b> %LOCAL_PHONE%<br>
<b>TOLL FREE:</b> %TOLL_FREE%<br>
<b>LANGUAGE:</b> %LANGUAGE%
</p>
</div>
</div>
</div>
These are the two relevant divs to look out for.
There seems to be a little confusion, I want the border to be small than the div, as in, not just adding border top or border bottom.
See how the border doesn't quite reach the edges of the div. Thanks.
Here is a possible solution: https://jsfiddle.net/yjtrk00o/4/
EDIT:
add a css called division as shown below
In your HTML, add the line <hr class="division"/> just above the <div class="img-with-text">
CSS
.division{
border-top:1px solid #D3D3D3;
margin-top:0px;
margin-bottom:0px;
margin-left:10px;
margin-right:10px;
}
HTML
<div class="col-xs-12">
<hr class="division"/>
<div class="img-with-text">
I'm not sure if it's the desired effect you're after, but have you tried the following:
<div class="img-with-text" style="border-top: 1px solid black;">
Obviously you can fiddle with colour etc, or add that into the css class.
EDIT:
perhaps this then:
<div class="col-xs-12">
<div style="margin: 0 10px; display: block; height: 1px; background: #000;"></div>
<div class="img-with-text">
You can play with the margin to give you the offset from the edges you want. Probably not the most elegant solution, but seems to get the visual result you're after?
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am always having this issue and I always solved it using webkit-columns. But I wanna know if there is a better way to do it with Bootstrap.
4 boxes inside a grid.
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
</div>
This gives me the 4 boxes but the last box have more margin than the others. I want all of them to have the same margin, but 0 on the corners like the image:
--- EDIT FOR CLARIFY ---
For Clarify my question im gonna add this jsfiddle you see the blue box ? i want to the red boxes start and end with the blue box, can you do that ? not add margin to the blue box, the blue box must be 100% and the other box must be aligned with the first and end of that box
Here i do what i want: Jsfiddle but here im using -webkit-column just for show you, if you can do this with bootstrap that would be nice.
Im gonna share this Demo I created. I hope it gets you somewhere.
HTML
<div class="container">
<div class="row">
<div class="col-sm-3 custom-col">
<div class="child-div">
</div>
</div>
<div class="col-sm-3 custom-col">
<div class="child-div">
</div>
</div>
<div class="col-sm-3 custom-col">
<div class="child-div">
</div>
</div>
<div class="col-sm-3 custom-col">
<div class="child-div">
</div>
</div>
</div>
</div>
CSS
.col-sm-3.custom-col{
height:250px;
/* outline: 1px solid green; */
padding: 5px;
}
.child-div{
height:100%;
width:100%;
background-color:red;
}
UPDATE
I updated the fiddle. HERE