I need some help with a complex CSS layout problem. If it can be done with just CSS and not javascript that would be ideal.
I need a grid of products with varying heights
There is also a "featured product" that is 2x the height of one of the regular products
The layout on different viewports needs to match the images below
What I have tried so far:
Here is an example of the code I have now:
<div class="container">
<div class="row">
<div class="l-product large col-xs-6 col-sm-6 col5-md-2 ">
1
<br>This div should be double the height of one tile without fixing the height with CSS
</div>
<div class="l-product taller col-xs-6 col-sm-3 col5-md-1">
2
<br><span>If one div is taller the whole grid breaks</span>
</div>
<div class="l-product col-xs-6 col-sm-3 col5-md-1">
3
</div>
<div class="l-product col-xs-6 col-sm-3 col5-md-1">
4
</div>
<div class="l-product col-xs-6 col-sm-3 col5-md-1">
5
</div>
<div class="l-product col-xs-6 col-sm-3 col5-md-1">
6
</div>
<div class="l-product col-xs-6 col-sm-3 col5-md-1">
7
</div>
<div class="l-product col-xs-6 col-sm-3 col5-md-1">
8
</div>
<div class="l-product col-xs-6 col-sm-3 col5-md-1">
9
</div>
<div class="l-product col-xs-6 col-sm-3 col5-md-1">
10
</div>
<div class="l-product col-xs-6 col-sm-3 col5-md-1">
11
</div>
</div>
http://codepen.io/anon/pen/pJBbPN
I am using bootstrap so I tried nesting the rows like this Nested rows with bootstrap grid system? My problem is I could not figure out how to make items move from one row to another in different viewports and it caused the grid to break
Desktop:
Tablet:
Small Tablet:
Mobile:
I'm not sure you can do that with basic bootstrap. I'd recommend using a more advanced technique like Masonry. When you go to the example link, change the browser width. It also adds some nice animation effects.
// external js: masonry.pkgd.js
$(document).ready(function() {
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: 130
});
});
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body { font-family: sans-serif; }
/* ---- grid ---- */
.grid {
background: #EEE;
}
/* clearfix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- grid-item ---- */
.grid-item {
width: 120px;
height: 120px;
float: left;
background: #D26;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.5);
border-radius: 5px;
margin: 5px;
}
.grid-item--width2 { width: 250px; }
.grid-item--height2 { height: 250px; }
<h1>Masonry - columnWidth</h1>
<div class="grid">
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
if you are using columns u need to divide the columns by 12. so we want to have an even amount, 5 does not break down to 12 columns.
Try below to see results. i have added 6 boxes to smaller boxes.
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="big-box">image</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-4"><div class="mini-box">1</div></div>
<div class="col-xs-4"><div class="mini-box">2</div></div>
<div class="col-xs-4"><div class="mini-box">3</div></div>
</div>
<div class="row">
<div class="col-xs-4"><div class="mini-box">1</div></div>
<div class="col-xs-4"><div class="mini-box">2</div></div>
<div class="col-xs-4"><div class="mini-box">3</div></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2"><div class="mini-box">1</div></div>
<div class="col-xs-2"><div class="mini-box">2</div></div>
<div class="col-xs-2"><div class="mini-box">3</div></div>
<div class="col-xs-2"><div class="mini-box">4</div></div>
<div class="col-xs-2"><div class="mini-box">5</div></div>
<div class="col-xs-2"><div class="mini-box">6</div></div>
</div>
<div class="row">
<div class="col-xs-2"><div class="mini-box">1</div></div>
<div class="col-xs-2"><div class="mini-box">2</div></div>
<div class="col-xs-2"><div class="mini-box">3</div></div>
<div class="col-xs-2"><div class="mini-box">4</div></div>
<div class="col-xs-2"><div class="mini-box">5</div></div>
<div class="col-xs-2"><div class="mini-box">6</div></div>
</div>
</div>
Here is a jsfiddle
Or you can use the grid system with jQuery
Related
Actually, my web page has 2 div tags which are vertically separated using col-md values. Its like <div class="col-md-6"> and <div class="col-md-6">. Right now both the divs are aligned side-by-side. .
But when I minimize the browser window, then both the divs are aligned one by one.
Code Snippet here:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="panel-title"><strong>Virtual Document 1</strong></div>
</div>
</div>
<div class="panel-body" style="max-height: 10; ">
<ay-treeTable [value]="node1" selectionMode="multiple" (onNodeSelect) = "selectedLeftNode($event)">
<ay-column field="name" header="Name" ></ay-column>
<ay-column field="id" header="Id" [style]="{'width': '130px'}" ></ay-column>
<ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
</ay-treeTable>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="panel-title " ><strong>Virtual Document 2</strong></div>
</div>
</div>
<div class="panel-body" style="max-height: 10; ">
<ay-treeTable [value]="node2" selectionMode="multiple" (onNodeSelect) = "selectedRightNode($event)" >
<ay-column field="name" header="Name"></ay-column>
<ay-column field="id" header="Id" [style]="{'width': '130px'}"></ay-column>
<ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
</ay-treeTable>
</div>
</div>
</div>
</div>
My question, could anyone suggest me how to retain the position of the divs?
This is your code with the change 'col-md-6' to 'col-6'. I just linked the latest bootstrap css and its working perfect(side by side). Hope this can help you.
.col-6{
border: solid 1px red;
}
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-6">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="panel-title"><strong>Virtual Document 1</strong></div>
</div>
</div>
<div class="panel-body" style="max-height: 10; ">
<ay-treeTable [value]="node1" selectionMode="multiple" (onNodeSelect) = "selectedLeftNode($event)">
<ay-column field="name" header="Name" ></ay-column>
<ay-column field="id" header="Id" [style]="{'width': '130px'}" ></ay-column>
<ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
</ay-treeTable>
</div>
</div>
<div class="col-6">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="panel-title " ><strong>Virtual Document 2</strong></div>
</div>
</div>
<div class="panel-body" style="max-height: 10; ">
<ay-treeTable [value]="node2" selectionMode="multiple" (onNodeSelect) = "selectedRightNode($event)" >
<ay-column field="name" header="Name"></ay-column>
<ay-column field="id" header="Id" [style]="{'width': '130px'}"></ay-column>
<ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
</ay-treeTable>
</div>
</div>
</div>
</div>
try this, this will work
<div class="row">
<div class="col col-6">
//first content
</div>
<div class="col col-6">
//second content
</div>
</div>
for more details about this document as #tico suggested.
Edit
Even though this is not a good idea but you said the top one is not working in your case.I know this not suggestible but try this once
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
//first content
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
//second content
</div>
</div>
I would like to target only the classes "Front" and "Back" of the "Flip-tile" that I am currently hovering over. How do you solve this with javascript, currently it is toggling them all at the same time.
The HTML:
<div class="flip-tile">
<div class="front">
<div class="project-tile primary-color col-md-4 col-xs-12">
<img class="tile-img" src="../static/img/first.png">
<div class="tile-text">
<h4><span class="light">Front side</span></h4>
</div>
</div>
</div>
<div class="back" style="display:none;">
<div class="project-tile secondary-color col-md-4 col-xs-12">
<div class="tile-text">
<h4><span class="light">Back side</span></h4>
</div>
</div>
</div>
</div>
<div class="flip-tile">
<div class="front">
<div class="project-tile primary-color col-md-4 col-xs-12">
<img class="tile-img" src="../static/img/first.png">
<div class="tile-text">
<h4><span class="light">Front side</span></h4>
</div>
</div>
</div>
<div class="back" style="display:none;">
<div class="project-tile secondary-color col-md-4 col-xs-12">
<div class="tile-text">
<h4><span class="light">Backside</span></h4>
</div>
</div>
</div>
</div>
The Javascript:
$(".flip-tile").hover(function() {
$(".front").hide()
$(".back").show()},
function() {
$(".back").hide()
$(".front").show()
});
It's so easy using find() on jQuery, but you can make it on easiest way with CSS.
Javascript:
$(".flip-tile").hover(function() {
$(this).find(".front").hide();
$(this).find(".back").show();
},
function() {
$(this).find(".back").hide();
$(this).find(".front").show();
}
);
CSS solution
.flip-title .front {
display: block;
}
.flip-title .back {
display: none;
}
.flip-title:hover .front {
display: none;
}
.flip-title:hover .back {
display: block;
}
Use $(this).find(...).
$(".flip-tile").hover(function() {
$(this).find(".front").hide()
$(this).find(".back").show()},
function() {
$(this).find(".back").hide()
$(this).find(".front").show()
});
Please take a look on https://api.jquery.com/class-selector/
I.e.
<script>
$( ".myclass.otherclass" ).css( "border", "13px solid red" );
</script>
The example will apply the border style to any .myclass.otherclass items along the HTML
good luck!
Try this:-
$(".flip-tile").hover(function() {
$(this).find(".front").hide()
$(this).find(".back").show()},
function() {
$(this).find(".back").hide()
$(this).find(".front").show()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip-tile">
<div class="front">
<div class="project-tile primary-color col-md-4 col-xs-12">
<img class="tile-img" src="../static/img/first.png">
<div class="tile-text">
<h4><span class="light">Front side</span></h4>
</div>
</div>
</div>
<div class="back" style="display:none;">
<div class="project-tile secondary-color col-md-4 col-xs-12">
<div class="tile-text">
<h4><span class="light">Back side</span></h4>
</div>
</div>
</div>
</div>
<div class="flip-tile">
<div class="front">
<div class="project-tile primary-color col-md-4 col-xs-12">
<img class="tile-img" src="../static/img/first.png">
<div class="tile-text">
<h4><span class="light">Front side</span></h4>
</div>
</div>
</div>
<div class="back" style="display:none;">
<div class="project-tile secondary-color col-md-4 col-xs-12">
<div class="tile-text">
<h4><span class="light">Backside</span></h4>
</div>
</div>
</div>
</div>
I know this has been asked many times but I've tried pretty much anything I've read so far.
I want to align both horizontally and vertically an img inside a div.
The container div is inside a modal showing the picture, once clicked its preview. Then it will contain pictures with any size.
I can align horizontally OR vertically but not both.
HTML code: https://pastebin.com/7dCQ1aJg
<div id="mypicmodal" class="col-lg-12 col-md-12 col-sm-12 content">
<div class="row content">
<div class="col-lg-1 col-md-1"></div>
<div class="col-lg-10 col-md-10 col-sm-12 content">
<div class="row content">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="col-lg-12 col-md-12 col-sm-12 modal-content">
<div class="row content">
<div id="modalpiccontainer" class="col-lg-8 col-md-8 col-sm-12 content" style="background-color:black">
<div class="row content">
<!-- pic here -->
<img id="pic" src="">
</div>
</div>
<div id="modalpicdata" class="col-lg-4 col-md-4 col-sm-12 content">
<div class="row content">
<div id="modaluserdata" class="col-lg-12">
<div class="row content">
<div id="modaluserpic" class="col-lg-3 col-md-3 col-sm-3 content" style="background-color:yellow">
</div>
<div id="modaluserpicinfo" class="col-lg-9 col-md-3 col-sm-3 content" style="backround-color:green">
</div>
</div>
</div>
<div id="modalsocial" class="col-lg-12">
<div class="row content">
</div>
</div>
<div id="modalcomments" class="col-lg-12">
<div class="row content">
</div>
</div>
<div id="modaltypecomment" class="col-lg-12">
<div class="row content">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Modal example (with img not aligned vertically): https://ibb.co/j4nJ1Q
(.content only contains "height: inherit" and the modal is 550px)
Thank you!
Easy with Flexbox :
div.container{
width: 500px;
height: 400px;
border: red dashed 2px;
display: flex;
justify-content: center;
align-items : center;
}
<div class="container">
<img src="http://lorempixel.com/300/200/"/>
</div>
I am making a custom template in which i have two divs and both have title .
I wanted to detect if there is less then 15px left between two divs then break the content into another line for both divs . Is this possible ? I have made a fiddle with css and html
#content .title
{
display:inline-block;
float:left;
text-align:left;
}
#content .sub-title {
display:inline-block;
float:right;
text-align:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content" class="full">
<div class="full">
<div class="title">
<h2>Roberts Roberts & Patrirty Smith</h2>
</div>
<div class="sub-title"><h2>THE EXAMPLE ON THE FLY</h2></div>
</div>
</div>
If you know the size of the elements you can do this with CSS media queries:
*
{
padding: 0;
margin: 0;
}
#content .title
{
display:inline-block;
float:left;
text-align:left;
border: solid 1px;
margin-right: 15px;
width: 400px;
}
#content .sub-title
{
display:inline-block;
float:right;
text-align:right;
border: solid 1px;
width: 400px;
}
#media (max-width: 815px)
{
#content .sub-title
{
float: left;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content" class="full">
<div class="full">
<div class="title">
<h2>Roberts Roberts & Patrirty Smith</h2>
</div>
<div class="sub-title"><h2>THE EXAMPLE ON THE FLY</h2></div>
</div>
</div>
Try using a little Bootstrap with your custom CSS.
Have a look at this Fiddle, I have two options for you to test.
In the Result Fiddle window, try resizing the frame on the left side to see how it works.
When using the Bootstrap cdn link please make sure you place the link above your custom CSS, so that your css has priority.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" > <div class="container col-xs-12 block">
<div class="block-first bg-info col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-9 col-xs-offset-1">
Roberts Roberts & Patrirty Smith
</div>
<div class="block-second bg-success col-lg-4 col-lg-push-1 col-md-4 col-md-offset-1 col-md-push-1 col-sm-4 col-sm-offset-1 col-sm-push-1 col-xs-9 col-xs-offset-1 col-xs-push-0">
THE EXAMPLE ON THE FLY
</div>
</div>
<div class="container col-xs-12 bg-primary space-around"><br></div>
<div class="container col-xs-12 block">
<div class="block-first2 bg-primary col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-9 col-xs-offset-1">
Roberts Roberts & Patrirty Smith
</div>
<div class="block-second bg-danger col-lg-4 col-md-4 col-sm-4 col-xs-9 col-xs-offset-1">
THE EXAMPLE ON THE FLY
</div>
</div>
i have a problem to center the content in a "row", the buttons in the example are always on the left side and i have too much space on the right side.
Is there a way to center this buttons?
thx
tomas
<div class="abc">
<div class="row red show-grid">
<div class="span2 btn">a</div>
<div class="span2 btn">b</div>
<div class="span2 btn">c</div>
<div class="span2 btn">d</div>
<div class="span2 btn">e</div>
</div>
The class span2 has property float:left:
<div class="block">
<div class="row show-grid">
<div class="span2 btn">a</div>
<div class="span2 btn">b</div>
<div class="span2 btn">c</div>
<div class="span2 btn">d</div>
<div class="span2 btn">e</div>
</div>
</div>
CSS:
.block {
max-width: 500px;
}
.block > div {
text-align:center;
}
.block > div > div {
float:none;
}
I would consider not using span2 (layout and grid class) with btn (button style class) together.
http://jsfiddle.net/sTwj7/10/
HTML
<div class="abc">
<div class="row red show-grid">
<div class="btn">a</div>
<div class="btn">b</div>
<div class="btn">c</div>
<div class="btn">d</div>
<div class="btn">e</div>
</div>
</div>
CSS
.red {
background-color: red;
}
.abc {
max-width: 500px;
}
.red .btn {
width: 160px;
margin: 0 auto;
display: block;
}
Updated 2018
Bootstrap 4
Use the auto-layout columns and text-center
<div class="row text-center">
<div class="col-sm border">a</div>
<div class="col-sm border">b</div>
<div class="col-sm border">c</div>
<div class="col-sm border">d</div>
<div class="col-sm border">e</div>
</div>
https://www.codeply.com/go/2fDFPSB5A4
Bootstrap 3
Use column offset and text-center
<div class="row red show-grid text-center">
<div class="col-md-2 col-md-offset-1 btn btn-default">a</div>
<div class="col-md-2 btn btn-default">b</div>
<div class="col-md-2 btn btn-default">c</div>
<div class="col-md-2 btn btn-default">d</div>
<div class="col-md-2 btn btn-default">e</div>
</div>
https://www.bootply.com/zEYom4EJUF
Bootstrap 2 (original answer)
You could add CSS to center your spans like this:
http://jsfiddle.net/sTwj7/9/
<div class="span2 pull-center">
<h1>a</h1>
</div>
CSS class:
.pull-center {text-align:center;margin:0 auto !important;float:none !important;}