I am trying to center content of columns in bootstrap 3 using cs like this:
.row{
padding: 40px 0px;
width: 100%;
min-height: 100%;
display:table;
height: 100%;
position:relative;
}
#media (min-width: 1200px)
{
.col-lg-6,
.col-lg-4,
.col-lg-8 {
display: table-cell;
vertical-align:middle;
float: none;
}
}
#media (min-width: 992px)
{
.col-md-6,
.col-md-4,
.col-md-8 {
float: none;
display: table-cell;
vertical-align:middle;
}
}
HTML
<div class="fill">
<div class="row" id="section-0">
<div class="col-lg-6 col-md-6">
<h1>Webtoaster</h1>
<p>some text </p>
</div>
<div class="col-lg-6 col-md-6">
<img src="img/koko.png" class="img-responsive" alt="Responsive image">
</div>
</div>
<div class="row" id="section-1">
<div class="col-lg-4">
<h1>Heading</h1>
<p>some text</p>
</div>
<div class="col-lg-8"><img src="img/fista.png" class="img-responsive" >
</div>
</div>
The above code does center vertically but in Firefox my image is not responsive anymore, and does not scale on resizing window.
It does resize in chrome and Safari however when i resize to a very small screen it does not put the image underneath the text. This problem is caused by float: none; if I comment it all responsiveness works well.
Example of page here: http://jajko.byethost16.com
Please help
Like Adam said, don't modify grid. Just place a div inside your col div and give to it display: table, height: 100% and inside that place another div with display: table-cell and vertical-align: middle.
Related
I am trying to build my UI using Bootstrap. I am trying to set 3 divs in one row next to each other for medium and large screens. And for
under 768px I would like to place them one under another.
file.html
<section className="about" id="about">
<div className="container-fluid">
<div className="row boxes justify-content-md-center">
<div className="col-sm-12 col-md-4 box">
<div className="innerBox">
<div className="icons">
<img src={iconEducation} className="img-responsive" />
</div>
<div className="box-body">
<h3 className="box-title">Title </h3>
<div className="box-list">
<div className="box-list-items">
<div className="item-ul"><img src={dot} className="img-responsive" /></div>
<div>
<p>Text</p>
</div>
</div>
<div className="box-list-items">
<div><img src={dot} className="img-responsive" /></div>
<div className="item-ul">
<p>Text</p>
</div>
</div>
</div>
</div>
</div>
</div>
The HTML code is the same for all three divs.
Problem
On large and medium screens I have two divs in one row and a third underneath in new row. For tablet screens the divs do not flow one under another but are still in the same row. The layout I want is two in one row and the third underneath.
file.css
.about{
padding: 127px 0 196px 0;
}
.about .row.boxes >div{
margin: 0 20px 0 20px;
}
.about .box{
height: 550px;
width: 100%;
background-image: linear-gradient(144deg, #fdfdfd, #f9f9f9);
}
.about .innerBox{
margin: auto;
color: black;
width: 100%;
overflow: hidden;
}
.box-list-items > div {
display: inline-block;
}
.box-list-items img {
height: 35%;
width: 35%;
}
.icons {
height: 95px;
width: 95px;
float: right;
margin: 7% 5% 5% 0;
}
.icons img {
width: 100%;
height: 100%;
}
h3.box-title{
font-size: 2.7em;
}
As I was going through the Bootstrap docs I thought that naming the class as .col-md-4 would align my divs for above 768px in same row one next to each other and underneath would place them in kind of display: box view.
theres is no use of #media only screen and all ,this will work:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">abc</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">xyz</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">123</div>
</div>
</div>
you can check:
https://jsfiddle.net/bfos8ttd/
you need to put all the code in file.html in side a div with class row and test it again.
Go to this Link for bootstrap columns (col-lg-4, col-md-4, col-sm-6, col-xs-12)
And follow these media query as per your device.
#media only screen and (min-width:1024px) and (max-width: 1200px) {
}
#media only screen and (min-width:992px) and (max-width: 1023px) {
}
#media only screen and (min-width:768px) and (max-width: 991px) {
}
#media only screen and ( max-width: 767px ) {
}
#media only screen and ( max-width: 479px ) {
}
#user9347049 This wouldn't fit in the comments, so I'm putting it here for clarity.
Your container-fluid lets you use the entire width of the screen, but it's still just a container, that contains your rows and columns. You create rows, then, you add columns. As in:
<div class="container"> <!-- you can change this class to container-fluid class if you like -->
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
You can only have one container class. The row div contains all your cols divs for that row. You can have as many rows of columns as you need. If you adapt you code, you should start getting some of the results you're looking for before you look at the media query side of it.
I'm trying to get a set of 8 images (all with same dimensions), to display in-line with equal spacing and respond to browser width.
Starting with 4 images over 2 rows then as the browser width decreases, for them to shrink to a certain point that they are still clearly legible, then move to 2 images over 4 rows. I've noticed that it does this without any styling but it also has a stage in between where it pushes one image down onto a new row, so 3-1-3-1. I want to avoid this.
Here's what I'm currently working with.
.features {
width: 100%;
display: block;
text-align: center;
}
.features img {
width: 220px;
margin: 10px;
}
<div class="features">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-lighweight-black.png?9028853389915552257">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-pocket-black.png?9028853389915552257">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-solar-black.png?9028853389915552257">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-battery-black.png?9028853389915552257">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-apple-black.png?9028853389915552257">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-compatible-black.png?9028853389915552257">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-connector-black.png?9028853389915552257">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-led-black.png?9028853389915552257">
</div>
Hope that makes sense. I'd like to do this just using CSS and HTML assuming that's possible.
A grid system using media queries to set the breakpoints for where you want the columns to change width is what you want. https://codepen.io/anon/pen/EmXrMm
CSS tricks has a good article on rolling your own grids here https://css-tricks.com/dont-overthink-it-grids/.
Or you could do the same using flexbox depending on the support constraints.
Note: border box stops the padding declaration adding additional width to the columns. cf is a clearfix, makes the container grow in size relative to the floated elements inside. Rest is pretty straight forward.
* {
box-sizing: border-box;
}
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.features__col {
width: 100%;
float: left;
padding: 15px;
}
.features__col img {
width: 100%;
}
#media (min-width: 400px) {
.features__col {
width: 50%;
}
}
#media (min-width: 800px) {
.features__col {
width: 25%;
}
}
<div class="features cf">
<div class="features__col">
<img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" alt="" />
</div>
<div class="features__col">
<img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" alt="" />
</div>
<div class="features__col">
<img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" alt="" />
</div>
<div class="features__col">
<img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" alt="" />
</div>
</div>
</div>
if you want the images to shrink you'll need to set some breakpoints with media queries and try using flexbox
.features{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.features img {
padding: 10px;
width: 310px;
height: 381px;
}
#media all and (max-width: 600px) {
.features img {
width: 50%;
height: 50%;
}
Try This :
.col {
width: 25%;
float: left;
text-align: center;
box-sizing: border-box;
}
#media screen and (max-width: 1285px) {
.col {
width: 50%;
float: left;
}
}
#media screen and (max-width: 670px) {
.col {
width: auto;
float: none;
}
img {
min-width: 220px;
}
}
#media screen and (max-width: 365px) {
img {
width:100%;
}
}
<div class="features">
<div class="col">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-lighweight-black.png?9028853389915552257">
</div>
<div class="col">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-pocket-black.png?9028853389915552257">
</div>
<div class="col">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-solar-black.png?9028853389915552257">
</div>
<div class="col">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-battery-black.png?9028853389915552257">
</div>
<div class="col">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-apple-black.png?9028853389915552257">
</div>
<div class="col">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-compatible-black.png?9028853389915552257">
</div>
<div class="col">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-connector-black.png?9028853389915552257">
</div>
<div class="col">
<img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-led-
black.png?9028853389915552257">
</div>
</div>
I'm trying to place links on images in one row so that different images have different links. I'm also having this div to shrink to fit certain media screen sizes. However, the images didn't resize according to the wrapper requirements. Please help.
Here's the HTML:
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
#media screen and (min-width: 768px) and (max-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 768px;
margin: 0 auto;
background-color: #fff;
}
}
#media screen and (min-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 500px;
margin: 0 auto;
background-color: #fff;
}
<div id="wrapper">
<div class="box">
<img src="image/pea.jpg">
</div>
<div class="box">
<img src="image/pea_01.jpg">
<img src="image/pea_02.jpg">
<img src="image/pea_03.jpg">
<img src="image/pea_04.jpg">
<img src="image/pea_05.jpg">
</div>
<!-- main issue here -->
<div class="box">
<img src="image/pea_footer.jpg">
</div>
</div>
Here's a screenshot of the line up (desktop). Mobile seems to look ok after adding display:inline-block;
width:auto; to .box:
I reckon remove any static widths because you only need to detect when the viewport is a certain size and then change the img width then, as I have done here. I set each image to display block to remove any margin or padding around them. You might prefer to not do this, but I like setting this as default.
This way you can pick different breakpoints that suit you rather than setting static widths at each breakpoint. This is the beauty of responsive development. Stay flexible rather than controlling what happens to containing divs; let the content run things. Run this snippet below in Full Screen mode to see the full desktop styling (each img goes to 20% instead of 50%):
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
img {
display: block;
width: 20%;
float: left;
}
#media screen and (max-width: 767px) {
img {
width: 50%;
}
}
<div id="wrapper">
<div class="box">
<img src="http://placehold.it/100x100">
</div>
<div class="box">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
</div>
<!-- main issue here -->
<div class="box">
<img src="http://placehold.it/100x100">
</div>
</div>
Your .box could be in display:flex
.box {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}
Keep in mind that your 5 <img> should be the icons, not containing your background (the clouds).
And I think the following code would be correct for your images:
.box img {
max-width: 20%;
}
I think it's better to not apply an explicit width or height to the image tag.
Please try:
max-width:100%;
max-height:100%;
Just use percentage based layouts rather than pixels or other measurements.
For example:
<img width="50%">: that will fill half of the containing element, at any size
<img width="500px">: that will always fill exactly 500 pixels, if it's too big or if it's too small.
Does anyone have ideas how to get gap between two divs fixed?
I have one main content Div and inside it there are two Div's with pictures. View is 768px wide and when I start to stretch the view, two pictures start to move away from each other. But ideally main content Div should stretch with whitespace around and pictures should remain with fixed gap between them.
HTML:
<div class="main-content">
<h2 class="title-two" id="portfolio">PORTFOLIO</h2>
<div class="column-left left">
<img src="images/picture1.png" class="first">
<h2>Title</h2>
<p>Text field</p>
</div>
<div class="column-left right">
<img src="images/picture2.png" class="first">
<h2>Title</h2>
<p>Text field</p>
</div>
<div class="column-right left">
<img src="images/picture3.png" class="first">
<h2>Title</h2>
<p>Text field</p>
</div>
<div class="column-left right">
<img src="images/picture4.png" class="first">
<h2>Title</h2>
<p>Text field</p>
</div>
</div>
CSS:
#media (min-width: 768px) {
.left {
display: block;
float:left;
width: 47%;
padding-left: 2%;
}
.right {
display: block;
float:right;
width: 47%;
padding-right: 2%;
}
}
Also same problem is in header where text and icon start to move away from each other, although their space between should remain same.
I have read that flexbox should help, but when I set display to flex, all pictures are in random places.
use margin-left and margin-right in your css
#media (min-width: 768px) {
.left {
display: block;
float:left;
width: 47%;
margin-left: 2%;
}
.right {
display: block;
float:right;
width: 47%;
margin-right: 2%;
}
}
Use margin-right and margin-left. Like this. As you can see, there is a gap between the divs.
.right{
margin-right: 2%;
}
.left{
margin-left: 2%;
}
I'm trying to create a layout with 3 columns when over 1440px, and two columns from 800px to 1440px - the media queries I've got are working fine, however the problem is trying to get the cols to align vertically:
Screen shot http://pichut.eu/x/Screen_Shot_2013-10-13_at_10.png
As you can see the third col when collapsed aligns left, however it sits bellow the end of the first column, but I would prefer if it were aligned with the bottom of the first! (make sense? :L)
Here's the HTML for the cols:
<div class="dyn-col">
<div class="widget">
<div class="widget-title">
Widget Title
</div>
<div class="widget-content">
Widget Contents
</div>
</div>
</div>
<div class="dyn-col">
<div class="widget">
<div class="widget-title">
Widget Title
</div>
<div class="widget-content">
Widget Contents
</div>
</div>
</div>
<div class="dyn-col">
<div class="widget">
<div class="widget-title">
Widget Title
</div>
<div class="widget-content">
Widget Contents
</div>
</div>
</div>
And here's the CSS i've got for the page...
/*=================================================
Dynamic Cols
=================================================*/
.dyn-col {
width: 100%;
display: block;
float: left;
-webkit-box-sizing: border-box;
box-sizing: border-box
-moz-box-sizing: border-box
}
#media screen and (max-width: 800px) {
.dyn-col {
width: 100% !important;
}
}
#media screen and (min-width: 801px) and (max-width: 1439px) {
.dyn-col {
width: 50% !important;
float: left;
}
.dyn-col:last-child {
}
}
#media screen and (min-width: 1440px) {
.dyn-col {
width: 33.3% !important;
}
}
Would recommend using bootstrap 3 makes life easier when doing stuff like that I use it alot.