there's some problems with responsive grid system to me.
http://imageshack.com/a/img537/9687/4H48G0.jpg
http://imageshack.com/a/img539/8265/ANvr0Y.jpg - problem is here
My source code:
CSS
<style type="text/css">
.wrapper {
height: 100%;
text-align: center;
margin: 0 auto;
}
img { max-width:100% !important;
height:auto;
display:block;
}
.text {
color: #fff;
text-shadow:0px 2px 10px #000;
height: 100%;
left: 0;
position: absolute;
text-align: center;
top: 0;
font-size: 22px;
width: 100%;}
.box {
border: 1px dashed #000;
overflow: hidden;
position: relative;
}
.tb_floater {
font-size: 1.5em;
margin-top: 20%;
padding-top: 10%;
}
.box.tall {
height: 300px;
}
.box.tall > a > img {
height: auto;
}
</style>
HTML
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-md-4 box tall">
<a href="#">
<img src="http://www.websailer.com/wp-content/uploads/2013/07/www_image.jpg">
</a>
<div class="text tall">
<div class="tb_floater">
<p>Loren ipsum shit amet<br/>Loren ipsum</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-6 box" style="height:150px;">.col-xs-6 .col-md-6</div>
<div class="col-xs-6 col-md-2 box" style="height:150px;">.col-xs-6 .col-md-2</div>
<div class="col-xs-6 col-md-2 box" style="height:150px;">.col-xs-6 .col-md-2</div>
<div class="col-xs-6 col-md-6 box" style="height:150px;">.col-xs-6 .col-md-6</div>
</div>
<div class="row">
<div class="pull-right col-xs-6 col-md-4 box tall">
<a href="#">
<img src="http://www.websailer.com/wp-content/uploads/2013/07/www_image.jpg">
</a>
<div class="text tall">
<div class="tb_floater">
<p>Loren ipsum shit amet<br/>Loren ipsum</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-2 box" style="height:150px;">.col-xs-6 .col-md-6</div>
<div class="col-xs-6 col-md-6 box" style="height:150px;">.col-xs-6 .col-md-2</div>
<div class="col-xs-6 col-md-2 box" style="height:150px;">.col-xs-6 .col-md-6</div>
<div class="col-xs-6 col-md-6 box" style="height:150px;">.col-xs-6 .col-md-2</div>
</div>
That empty field is problem when i resize the browser, any solution ?
Related
I made this complicated layout in bootstrap but, the point is when I remove to image below on the right side, all other images changing smaller.
How can I have this always same size?
I tried to work with numbers for width and height but the result was bad!
The number of images will change based on the titles so I might have 3 images or 2 or 5.
Please help me!
Before removing
After removing
.container-fluid .expo {
margin-left: 20px;
margin-right: 20px;
text-align: center;
float: none;
margin-bottom: 20px;
}
.expoinfo {
display: inline-block;
padding: 0;
}
.expoinfo h3 {
font-size: 22px;
margin-top: 0px;
padding-right: 20px;
text-align: left;
}
.bigimg {
padding: 0;
border-radius: 0;
margin: 0;
overflow: hidden;
text-align: center;
}
.bigimg img {
border-radius: 0;
width: 100%;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
height: 100%;
}
.colthumb {
overflow: hidden;
margin: 0;
padding: 0;
float: left;
}
.thumbnail {
padding: 0;
margin: 0;
border-style: none;
}
.thumbnail img {
width: 100%;
padding-top: 2px;
padding-right: 2px;
padding-left: 2px;
padding-bottom: 2px;
border-radius: 0;
border-style: none;
height: 100%;
}
<div class="container-fluid expo">
<div class="row expoinfo">
<section class="col-lg-10 col-lg-offset-1">
<h3>title</h3>
<div class="bigimg col-sm-6 col-md-6 col-lg-6">
<a href="http://fakeimg.pl/700x400/" title="">
<img src="http://fakeimg.pl/600x600/" alt="">
</a>
</div>
<div class="colthumb col-sm-3 col-xs-6 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="http://fakeimg.pl/700x400/" title="">
<img src="http://fakeimg.pl/300x300/" alt="">
</a>
</div>
</div>
<div class="colthumb col-sm-3 col-xs-6 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="http://fakeimg.pl/700x400/" title="">
<img src="http://fakeimg.pl/300x300/" alt="">
</a>
</div>
</div>
<div class="colthumb col-sm-3 col-xs-6 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="http://fakeimg.pl/700x400/" title="">
<img src="http://fakeimg.pl/300x300/" alt="">
</a>
</div>
</div>
<div class="colthumb col-sm-3 col-xs-6 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="http://fakeimg.pl/700x400/" title="">
<img src="http://fakeimg.pl/300x300/" alt="">
</a>
</div>
</div>
</section>
</div>
</div>
The example you made didn't include bootstrap.css even though it was using bootstrap's classes.
See updated demo: https://jsfiddle.net/2aLdmvw4/
I just found my answer!
<div class="row">
<section class="col-lg-offset-2 col-lg-8">
<h3>title</h3>
<div class=" thumbcol col-md-4 col-lg-6">
<div class="thumbnail"><img src="http://fakeimg.pl/300x300/" alt="Thumbnail Image">
</div>
</div>
<div class=" thumbcol col-md-4 col-lg-3">
<div class="thumbnail"><img src="http://fakeimg.pl/300x300/" alt="Thumbnail Image"> </div>
</div>
<div class=" thumbcol col-md-4 col-lg-3">
<div class="thumbnail"><img src="http://fakeimg.pl/300x300/" alt="Thumbnail Image"></div>
</div>
<div class=" thumbcol col-md-4 col-lg-3">
<div class="thumbnail"><img src="http://fakeimg.pl/300x300/" alt="Thumbnail Image"></div>
</div>
</section>
</div>
I have the following 4 squares (two rows and two columns):
<section id="gallery">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
</div>
</div>
</section>
I would like them to be displayed in a 4 square fashion and that the grid takes the whole width and height of the page. I also want it to be responsive and I don't want any spaces between each square.
I tried setting the css on my section tag like this:
section
{
height: 100vh;
}
But that had no effect. Does anybody know how to achieve this please?
Thank you
Try this as the CSS
section#gallery
{
height:100%;
width:100%;
}
div.row
{
height:50%;
}
div.col-lg-6.col-md-6.col-sm-6.col-xs-12
{
width:50%;
}
I think you are looking for something like this? https://jsfiddle.net/01djtnyd/
note: I changed all classes to "-6" so you can see it work easily in the fiddle
add class no-padding to the divs that are wrapping the img div
in the css add this:
.no-padding {
padding: 0 !important;
margin: 0;
}
.no-padding > div {
background-repeat: no-repeat;
background-size: cover;
height: 50vh;
}
You can do this with css flexbox and jQuery. Here are two options to maintain the square shape of each div.
Option 1:
HTML:
<section id="gallery">
<div class="container-fluid">
<div class="row grid-wrapper">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
</div>
<div class="row grid-wrapper">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 grid-block">
<div style="background-image: url(http://placehold.it/675x400)">
</div>
</div>
</div>
</div>
</section>
CSS:
section
{
height: 100vh;
}
.grid-wrapper{
display: flex;
flex-direction: row;
}
.grid-block{
margin: 0;
padding: 0;
background-color: #e2e2e2;
border: 1px solid #000;
}
Jquery:
$(document).ready(function(){
var grid_w = $(".grid-block").width();
$(".grid-block").height(grid_w);
});
Fiddle: https://jsfiddle.net/puxLmy1y/2/
Option 2 (without jQuery):
HTML: Same as above
CSS:
section
{
height: 100vh;
}
.grid-wrapper{
display: flex;
flex-direction: row;
}
.grid-block{
width: 50vh;
height: 50vh;
margin: 0;
padding: 0;
background-color: #e2e2e2;
border: 1px solid #000;
}
Fiddle: https://jsfiddle.net/puxLmy1y/3/
I'm trying to make a grid layout with images inside, The images aren't always the same size, Some of them seem to make the layout of the grid slightly smaller and i can't figure out a way to get them all the same size.
Here's the HTML.
<div class="col-xs-12">
<div class="row">
<h2>Handheld Consoles</h2>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<div class="tile purple text-center">
<h3 class="title">Nintendo 3DS</h3>
<div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/3ds.png" /></div>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<div class="tile red text-center">
<h3 class="title">Nintendo GBA</h3>
<div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/gba.png" /></div>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<div class="tile orange text-center">
<h3 class="title">Nintendo 64</h3>
<div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/n64.png" /></div>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
<a href="#">
<div class="tile green text-center">
<h3 class="title">Sony PSP</h3>
<div class="col-xs-12"><img class="img-responsive" style="max-height:128px; max-width:128px" src="../images/psp.png" /></div>
</div>
</a>
</div>
</div>
</div>
And the CSS.
.tile {
width:100%;
display: inline-block;
box-sizing: border-box;
background: #fff;
padding: 15px;
margin-bottom: 20px;
color:#fff;
}
.title {
margin-top: 0px;
text-align:center;
}
.purple {
background: #5133AB;
}
.purple:hover {
background: #3e2784;
}
i believe if you just set the height of class .tile, it should work
.tile {
width:100%;
display: inline-block;
box-sizing: border-box;
background: #fff;
padding: 15px;
margin-bottom: 20px;
color:#fff;
height: 200px; // or whatever height you want all the tiles to be
}
How would I vertically align text to the middle of a caption that has a position of absolute. I want the text whether it be 1 line or 2 lines for it to be in the middle of the green block.
Here is a example:
https://jsfiddle.net/DTcHh/7467/
<div class="row">
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that needs</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that needs</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that needs</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that</h4>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4">
<div class="holder">
<div class="background">
</div>
<div class="text">
<h4>I am some text that needs</h4>
</div>
</div>
</div>
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.holder {
position:relative;
display: table;
width: 100%;
}
.background {
background: #000;
height: 150px;
width: 100%;
}
.text {
position: absolute;
left:0;
right: 0;
bottom: 0;
text-align: center;
}
h4 {
background: green;
font-size: 1em;
margin: 0;
padding: 5px 10px;
min-height: 50px;
}
UPDATED
Like this ....
FIDDLE v4
This version I believe may have it.
Changed the <h4> to a <p>
Removed from <p>
width: 100%;
display: table-cell;
Added to <p>
margin-left: auto;
margin-right: auto;
transform: translateY(25%);
Changes to <p>
padding: 5px 10px; -TO- padding: 0px 10px;
Use line-height on h4 style with value more than double of the font-size:
h4 {
background: green;
font-size: 1em;
margin: 0;
padding: 5px 10px;
min-height: 50px;
line-height: 2.2em;
}
Checkout this DEMO
I'm trying to make a layout like this using bootstrap.
However, I keep getting this
Does anyone know how to prevent the second row from being pushed down by the large column?
Here is a skeleton of my HTML:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 about">
<img >
</div>
<div class="col-xs-3 col-sm-3 col-md-3 resume">
<img >
</div>
<div class="col-xs-3 col-sm-3 col-md-3 websites">
<img >
</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 waterfall">
<img >
</div>
<div class="col-xs-6 col-sm-6 col-md-6 middlebox">
<p id="middletext"><strong></strong><br></p>
</div>
</div>
</div>
and here is the corresponding CSS:
.col-xs-3{
height: 33vh;
margin-bottom: 3vh;
padding: 0;
border: 2px solid black;
}
.col-xs-3.resume{
margin-top: 3vh;
}
.col-xs-3.websites{
height: 60vh;
margin-top: 3vh;
}
.col-xs-6{
height: 33vh;
margin-bottom: 3vh;
padding: 0px;
border: 2px solid black;
}
.col-xs-6.about{
margin-top: 3vh;
}
Another option for this sort of no-gaps layout is to use something like Masonry, although it's probably overkill if your actual layout is as simple as your example.
One way that I can think of is to use one div as parent for the first 2 columns:
html:
<div class="container">
<div class="row">
<div class="col-xs-9 col-sm-9 col-sm-9" >
<div class="col-xs-8 col-sm-8 col-md-8 about">
<img >
</div>
<div class="col-xs-4 col-sm-4 col-md-4 resume">
<img >
</div>
<div class="col-xs-4 col-sm-4 col-md-4 waterfall">
<img >
</div>
<div class="col-xs-8 col-sm-8 col-md-8 middlebox">
<p id="middletext"><strong></strong><br></p>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 websites">
<img >
</div>
</div>
</div>
css
.col-xs-4{
height: 33vh;
margin-bottom: 3vh;
padding: 0;
border: 2px solid black;
}
.resume{
margin-top: 3vh;
}
.websites{
height: 68vh;
margin-top: 3vh;
border: 2px solid black;
}
.col-xs-8{
height: 33vh;
margin-bottom: 3vh;
padding: 0px;
border: 2px solid black;
}
.col-xs-8.about{
margin-top: 3vh;
}