I'm trying to make a mansonry-like layout but with elements that have responsive sizes. The sizes are limited though, they can only be multiples of the smalles rectangle. The idea is that I can have 1x1, 1x2, 2x2, 2x1 elements that fit the best place possible in the page.
I saw some questions like this before but the answer was always something unuseful like 'use bootstrap'. I tried bootstrap grid, skeleton grid and many other already. None of them can handle elements that overlap columns.
I'm using Mansonry js library now, and I'm almost there. There is only one glitch that I'm not beeing able to solve. Mansonry for some reason doesn't like when I make a 2x2 element. It breaks the gutter (even when I include the exact gutter size in the elements width).
Things to note, I'm using a variable (percetage) element width and a height based on that width.
My test html part:
<div class="container">
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<!-- Exemplo divisão -->
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item grid-item--width2"> </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>
</div>
My css:
.container {
margin-left: auto;
margin-right: auto;
width: 90%;
}
.grid-sizer,
.grid-item {
width: 33%;
background-color: #666;
margin-bottom: 0.20%;
margin-top: 0%;
}
.gutter-sizer { width: 0.5%; }
.grid-item:before{
content:"";display:block;padding-top:50%;
}
.grid-item--width2{
width: 66.5%;
background-color: #555;
}
This is getting me: http://s23.postimg.org/knxbt44xn/gutter.png
Hello, myself.
I solved it. I tested: Masonry, Nested, Skeleton, Boostrap, (Doing manually), (some cms plugins)...
Finally, the answer was: Freewall.
https://github.com/kombai/freewall
This plugin solves nesting and gutter both vertically and horizontally. If you set widths and heights in proportion, it just works. Actually according to my tests, it works with anything you set. Has tons of options too. I love it!
<div class="container">
<div id="freewall">
<!-- Exemplo divisão -->
<div class="brick"> </div>
<div class="brick two"> </div>
<div class="brick"> </div>
<div class="brick"> </div>
<div class="brick tall"> </div>
<div class="brick"> </div>
<div class="brick"> </div>
<div class="brick"> </div>
</div>
</div>
My final js:
// jQuery
$(document).ready(function() {
var wall = new freewall("#freewall");
wall.reset({
selector: '.brick',
cellW: 320,
cellH: 160,
fixSize: 0,
gutterX: 5,
gutterY: 5,
onResize: function() {
wall.fitZone();
}
});
$(window).trigger("resize");
});
The css just sets the width to 33% (66% on wide), and height to 50% on normal and 100% on tall (heighs based on width using padding top).
Related
I have element sidebar and div with class sticky-top:
<div class="row">
<div class="col-lg-4">
<div class="sticky-top">
....
</div>
</div>
</div>
I need pass a margin, when sidebar is sticky, because class sticky-top doesn't have a margin-top.
How I can write margin when sidebar is sticky?
Try:
.sticky-top { top: 0.5em; }
You need to use top instead of margin-top
<div class="row">
<div class="col-lg-4">
<div class="sticky-top" style="top: 30px">
....
</div>
</div>
</div>
Try to use:
.sticky-top{
margin-top:10px;
}
if it gives you trouble, you can force it with !important, like this:
.sticky-top{
margin-top:10px !important;
}
Please note that !important should be used only when other solutions are not working.
Hope it help!
In the employee section of a Wordpress site, I'm trying to have the bio slide open in the correct position when you click on each employee photo.
It's working well when the row is full width (4 columns) and in mobile (1 column) but in the 2 column layout (480px to 882px), position().left is returning 0, so the negative margin isn't being properly applied and the bio goes offscreen.
I can't for the life of me figure out why this is... Any help is greatly appreciated!
The site in question: http://contractor-marketing.website/
The HTML (simplified):
<div class="row">
<div class="column column_1">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_2">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_3">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_4">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
</div>
The JS:
jQuery('.column').each(function(s, el) {
jQuery(this).find('.bio-full').eq(0).css('margin-left',-(jQuery(el).position().left));
});
Check my example below. Although I took a different approach, it essentially does what you want, and it even animates the element transition.
NOTE: This animation will happen EACH time you press the animate button. You must prevent such animation from happening more than once (if that is the behavior you are looking for). Also, change the $('#animate') selector and click event to the event of your choice.
$('#animate').click(function() {
$(".bio-full").animate({
left: "+=300",
}, 1000, function() {
// Animation complete.
});
});
body{
padding:0;
margin:0;
}
.bio-full{
background-color: red;
display:hidden;
position:relative;
width:300px;
left:-300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="animate">Animate</button>
<div class="row">
<div class="column column_1">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_2">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_3">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_4">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
</div>
I hope this helps!
Cheers!
So I have this weird problem with bootstrap and rows. It only seems to happen in the LG view which is greater than 1200px. For some reason random rows are not conforming to the full amount they should(in this case 1140px) and instead are smaller.
I am including a few pictures to show exactly the issue I am talking about to see if I can figure out what is going on. Any help would be appreciated.
If i make the width smaller to simulate a smaller screen everything works without issue.
https://s21.postimg.org/8i0w6wtpz/Screen_Shot_2016_09_18_at_7_22_08_PM.png
https://s22.postimg.org/xr3ekeyf5/Screen_Shot_2016_09_18_at_7_23_09_PM.png
https://s22.postimg.org/dkzwlj2rl/Screen_Shot_2016_09_18_at_7_23_28_PM.png
<section class="inner">
<div class="container portfolio-container">
<h2>PORTFOLIO</h2>
<div class="prcnr" ng-repeat="port in portfolio">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
<a rel="{{port._id}}" class="fancybox" href="images/uploads/{{ port.main_image }}">
<img src="images/uploads/{{ port.main_image }}" alt="" class="main_portfolio_image img-responsive">
</a>
<div class="hidden">
<a rel="{{port._id}}" ng-repeat="image in port.images" class="fancybox" href="images/uploads/{{image}}">
<img src="images/uploads/{{image}}" alt="">
</a>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 port-txt">
<h4><b>{{ port.title }}</b></h4>
<p ng-bind-html="port.description"></p>
</div>
</div>
</div>
</div>
</section>
Custom CSS Pertaining to this code :
.portfolio-container h4 {
font-size: 22.5px;
}
.portfolio-container .port-txt p {
font-size: 15px;
}
#media (min-width: 1200px) {
.main_portfolio_image {
width: 570px;
height: 385px;
}
}
those picture are not slimier to your code.
there is 2 col-lg-6 column I found where one column contain a hidden filed. that's not a problem. And you are using bootstrap so you don't need to set media query for image . Just simply use img-responsive and set the image with a min-width of 100% like and add container-fluid in html part
img.img-responsive{
min-width:100% !important;
}
I am working on a responsive web design that positions divs floated right, but in two rows.
Once the container div becomes two narrow, the tile divs will move down to form a new row.
For example
<div id="container">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
.tile {
height:96px;
width:96px;
}
Would display three divs in the first row, and two more in a row under the first row.
If the page is re-sized and the container becomes two narrow for the first row, div tiles should move to form a new row.
Thanks!
you have to nest the first 3 divs and the second 2 divs. You also need to 'divide' these 2 divs, so they build 2 rows (done with css:clear) in order to achieve what you pretend:
html:
<div id="container">
<div class="firstrow">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
<div class="clear"></div>
<div class="secondrow">
<div class="tile"></div>
<div class="tile"></div>
</div>
</div>
css:
.tile {
height:96px;
width:96px;
float:right;
border: 1px solid red;
}
.clear{clear:both;}
see the example here: http://jsfiddle.net/hbrunar/R59Qe/1/
I assume you're looking for this?
.tile {
height:96px;
width:96px;
float: left;
}
You should add "float:left" property to your class="tile", otherwise it will just render all div one below other.
Thanks.
My question is short and precise. I have googled but haven't found anything about that.
Currently I have 3 column layout
----------------------------
|left|the-main-column|right|
----------------------------
Actual code:
<div class="main">
<div class="col-left sidebar">
<div class="left-sidebar-nav"></div>
</div>
<div class="col-main"></div>
<div class="col-right sidebar">
<div class="right-sidebar-cart"></div>
</div>
</div>
1.What I want is to move the right column on top of left column
-----------------------
|right|the-main-column|
------- |
|left | |
-----------------------
<div class="main">
div class="col-right sidebar">
<div class="right-sidebar-cart"></div>
</div>
<div class="col-left sidebar">
<div class="left-sidebar-nav"></div>
</div>
<div class="col-main"></div>
</div>
2.Or the right column contents without the wrapper to the inside of left column
_______________________
|right|the-main-column|
|left | |
-----------------------
<div class="main">
<div class="col-left sidebar">
<div class="right-sidebar-cart"></div>
<div class="left-sidebar-nav"></div>
</div>
<div class="col-main"></div>
</div>
Could this be done only with CSS ? What is the javascript/jquery solution for that? I am additionally interested in my 2nd question solution cause by analogously I'll move slider from main column to the top of left sidebar.
Part 1 can be done. Something like:
<div class="right">right</div>
<div class="left">left</div>
<div class="main">main</div>
(the order matters), plus:
.right {
float: left;
}
.left {
float: left;
clear: left;
}
#media only screen and (min-width: 780px) {
.right {
float: right;
}
}
Example: http://codepen.io/paulroub/pen/baivl
Not 100% sure what you're asking in #2.
It does depend on your markup. If you'd provide some Actual Code helping would be a lot easiery. Can't you move your content just from one container into the other?
Basically it should definitely be doable in CSS only, but with that few information about your actual code I can't really see what you want.