Being a mug with masonry.js - javascript

I think I'm probably doing something wrong that's incredibly obvious...
This is my HTML
<div id="container">
<div class="item"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item w2 h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
</div>
I'm calling jQuery 1.7.1 and modernizr in the head, and calling masonry.js and the below script before the /body
$(document).ready(function() {
$('#container').masonry({
columnWidth: 440,
itemSelector: '.item',
isFitWidth: false,
transitionDuration: 0,
});
});
Incidentally my CSS is below if that makes any difference
#container {padding: 5px;}
.item {
width: 220px;
height: 160px;
float: left;
margin: 5px;
background: #CCC;
}
.item.w2 {width: 440px;}
.item.h2 { height: 280px;}
No console errors but doesn't seem to be stacking how I would imagine
** see here - http://www.rsg-media.com/masonry/test.html
I would think it would appear a bit more like this
http://www.code-pal.com/wp-content/uploads/2013/01/masonry-css3-jquery-fallback.jpg
...or am I being an idiot?


done a snippet here, changed the width of w2 to a percentage and it moved them around a bit better... I've reset it to original now but I think there's your problem
$(document).ready(function() {
$('#container').masonry({
columnWidth: 440,
itemSelector: '.item',
isFitWidth: false,
transitionDuration: 0,
});
});
#container {padding: 5px;}
.item {
width: 220px;
height: 160px;
float: left;
margin: 5px;
background: #CCC;
}
.item.w2 {width: 440px;}
.item.h2 { height: 280px;}
<script src="http://desandro.github.io/masonry/jquery.masonry.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="item"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item w2 h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
</div>

Related

New button after all elements have been loaded

4 rows are stored here. Each new row is displayed when the LOAD MORE button is pressed. Each row is displayed as it should and the code works without problems. When the end is reached, a Go button should appear pointing to another page.
What's the best way to do this? I have included the code as an example.
function loadNextSeven() {
let moveItems = $('#off-items-bucket .item').slice(0,7);
moveItems.hide().appendTo('#on-items-bucket').fadeIn('medium');
}
function isThisTheEnd() {
let numberLeft = $('#off-items-bucket .item').length;
if(numberLeft == 0) {
$('#load-more').hide();
}
}
$(document).ready(function() {
loadNextSeven();
isThisTheEnd();
});
$('#load-more').click(function() {
loadNextSeven();
isThisTheEnd();
});
.items-wrapper {
width: 800px;
margin: 0 auto;
}
#off-items-bucket {
display: none; /* REALLY THE ONLY LINE YOU NEED*/
background-color: palegreen;
box-shadow: 0 0 0 5px #000;
float:left;
box-sizing: border-box;
margin: 20px 0;
width:100%;
}
.item {
width: 100px;
height: 100px;
float:left;
margin: 5px;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
button {
width:200px;
margin: 0 auto;
padding:10px;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="items-wrapper">
<div id="on-items-bucket"></div>
<div id="off-items-bucket">
<!-- put the items in the bucket -->
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
</div>
<button id="load-more">LOAD MORE</button>
</div>

One way is to just rename the button when you get to the end. Then you can just test it in the $('#load-more').click(function() function.
First, move the numberLeft variable out of it's function so that other functions can access it. When numberLeft === 0 just rename the button with $('#load-more').text("GO ->")
let numberLeft
function isThisTheEnd() {
numberLeft = $('#off-items-bucket .item').length;
if (numberLeft === 0) {
$('#load-more').text("GO ->");
}
}
In this function, just test for numberLeft and react accordingly.
$('#load-more').click(function() {
if (numberLeft === 0) {
alert("Go to next page")
} else {
loadNextSeven();
isThisTheEnd();
}
});
function loadNextSeven() {
let moveItems = $('#off-items-bucket .item').slice(0, 7);
moveItems.hide().appendTo('#on-items-bucket').fadeIn('medium');
}
let numberLeft
function isThisTheEnd() {
numberLeft = $('#off-items-bucket .item').length;
if (numberLeft == 0) {
$('#load-more').text("GO ->");
}
}
$(document).ready(function() {
loadNextSeven();
isThisTheEnd();
});
$('#load-more').click(function() {
if (numberLeft === 0) {
alert("Go to next page")
} else {
loadNextSeven();
isThisTheEnd();
}
});
.items-wrapper {
width: 800px;
margin: 0 auto;
}
#off-items-bucket {
display: none;
/* REALLY THE ONLY LINE YOU NEED*/
background-color: palegreen;
box-shadow: 0 0 0 5px #000;
float: left;
box-sizing: border-box;
margin: 20px 0;
width: 100%;
}
.item {
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
button {
width: 200px;
margin: 0 auto;
padding: 10px;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="items-wrapper">
<div id="on-items-bucket"></div>
<div id="off-items-bucket">
<!-- put the items in the bucket -->
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
</div>
<button id="load-more">LOAD MORE</button>
</div>

Change scroll axis on mobile devices (touch)

I have a container that can be scrolled through horizontally. This was done by rotating the container by 90 degrees.
This is however only a visual workaround: the visual horizontal scrolling is done by physical vertical scrolling. On mobile devices this is very counter-intuitive.
Is there any way to manipulate the scrolling behaviour so that the container can be scrolled through with horizontal touch gestures?
Here is a simplified demonstration of the container:
.item {
background: black;
height: 50px;
width: 50px;
margin: 5px;
}
.container {
background: yellow;
width: fit-content;
height: 300px;
overflow-y: scroll;
transform: rotate(-90deg);
transform-origin: top right;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

Instead of using transform, actualy place the elements side by side in a flex container.
Because you don't want the elements to shrink with the container size you a can set a min-width on the items:
.item {
background: black;
height: 50px;
width: 50px;
margin: 5px;
min-width:50px;
}
.container {
display:flex;
background: yellow;
width: 300px;
overflow-x: scroll;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

Toggle an animation over an element of a grid and fadein/out the other elements

I am experimenting with a tile-like layout for my site with which the user can interact. Each box is a button used to select a product, and upon selection of a product, the other boxes fade out and are hidden. This effect is toggle-able.
I have slightly modified the following fiddle that I found online, and it comes very close the desired result.
$('.box').click(function() {
$('.box').not(this).fadeToggle(250);
});
div.box {
width: 100px;
height: 63px;
background-color: #52c6ec;
margin: 5px;
padding-top: 37px;
float: left;
text-align: center;
color: #fff;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
<div class="box" id="box3">Box 3</div>
<div class="box" id="box4">Box 4</div>
<div class="box" id="box5">Box 5</div>
<div class="box" id="box6">Box 6</div>
<div class="box" id="box7">Box 7</div>
<div class="box" id="box8">Box 8</div>
<div class="box" id="box9">Box 9</div>
<div class="box" id="box10">Box 10</div>
<div class="box" id="box11">Box 11</div>
<div class="box" id="box12">Box 12</div>
<div class="box" id="box13">Box 13</div>
<div class="box" id="box14">Box 14</div>
<div class="box" id="box15">Box 15</div>
<div class="box" id="box16">Box 16</div>
<div class="box" id="box17">Box 17</div>
<div class="box" id="box18">Box 18</div>
<div class="box" id="box19">Box 19</div>
<div class="box" id="box20">Box 20</div>
The only thing I want to do is to have the selected item transition (via animation) to the top-left, rather than just appearing there. Preferably also during the fading of the other boxes.
Because I'm using floats here, I cannot figure out how to animate these, since they don't have any numeric properties.
Ideas for a jQuery solution? Thanks.

Is this what you want?
var t, l, loctop, locleft;
$('.box').click(function() {
var e = $(this);
if( $('.box').not(this).is(':visible') )
{
t = e.position().top + 'px';
l = e.position().left + 'px';
loctop = locleft = 0;
$(this).css( {position: 'fixed', top:t, left:l} );
$('.box').not(this).fadeToggle(550, function(){
$(e).animate({
top: loctop,
left: locleft
}, 800, function(){
$(this).stop(true, true);
});
});
}
else
{
loctop = parseInt(t);
locleft = parseInt(l);
$(e).animate({
top: loctop,
left: locleft
}, 800, function(){
$('.box').not(this).fadeIn(550, function(){
$(e).css( {position: 'relative', top:'', left:''} );
});
});
}
});
div.box {
width: 100px;
height: 63px;
background-color: #52c6ec;
margin: 5px;
padding-top: 37px;
float: left;
text-align: center;
color: #fff;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
<div class="box" id="box3">Box 3</div>
<div class="box" id="box4">Box 4</div>
<div class="box" id="box5">Box 5</div>
<div class="box" id="box6">Box 6</div>
<div class="box" id="box7">Box 7</div>
<div class="box" id="box8">Box 8</div>
<div class="box" id="box9">Box 9</div>
<div class="box" id="box10">Box 10</div>
<div class="box" id="box11">Box 11</div>
<div class="box" id="box12">Box 12</div>
<div class="box" id="box13">Box 13</div>
<div class="box" id="box14">Box 14</div>
<div class="box" id="box15">Box 15</div>
<div class="box" id="box16">Box 16</div>
<div class="box" id="box17">Box 17</div>
<div class="box" id="box18">Box 18</div>
<div class="box" id="box19">Box 19</div>
<div class="box" id="box20">Box 20</div>

Here's my attempt in vanilla JS (tested on Chrome and Firefox)
Basically it works only with CSS transitions over the transform property for the selected element and over the opacity for all the other elements. The fadeOut/In runs while the selected element is moving as you specified.
CodePen Demo
CSS
main {
display: flex;
flex-wrap: wrap;
border: 1px solid #ccc;
}
div {
background: #a0c6df;
width: 100px;
height: 100px;
border: 2px #8fa0c6 dashed;
margin: 10px;
opacity: 1;
cursor: pointer;
transition: all 1s;
}
main.fadeout div:not(.current) {
opacity: 0;
cursor: default;
}
JS
var main = document.querySelector('main');
var boxes = document.querySelectorAll('main div');
var animationIsRunning = false;
var getBoxPosition = function() {
[].forEach.call(boxes, function(b) {
var gBCR = b.getBoundingClientRect();
b.dataset.top = gBCR.top;
b.dataset.left = gBCR.left;
});
}
window.addEventListener('resize', function() {
var dc;
getBoxPosition();
if (dc = main.querySelector('div.current')) {
main.classList.remove('fadeout');
dc.classList.remove('current');
dc.style.transform = 'translate(0,0)';
}
});
main.addEventListener('click', function(evt) {
var b = evt.target,
left = 0,
top = 0;
/* listen to the div click event only */
if (b.nodeName.toLowerCase() !== 'div') { return false; }
/* don't listen if there's a current element and user clicked
over a hidden div */
if (
main.querySelector('.current') &&
!b.classList.contains('current')
) { return false; }
/* only if another animation is not running... */
if (!animationIsRunning) {
animationIsRunning = true;
b.classList.toggle('current');
main.classList.toggle('fadeout');
if (b.classList.contains('current')) {
left = b.dataset.left;
top = b.dataset.top;
}
b.style.transform = 'translate(-'+ left +'px, -'+ top +'px)';
}
});
main.addEventListener('transitionend', function() {
animationIsRunning = false;
});
getBoxPosition();

Take a look at this awesome plugin (http://isotope.metafizzy.co/) from David Desandro
You can find an exemple on codepen here :
http://codepen.io/desandro/pen/nFrte
An exemple from isotope blog :
// external js: isotope.pkgd.js
var $notifElem;
$( document ).ready( function() {
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: 100
}
});
$grid.on( 'layoutComplete', function( event, laidOutItems ) {
console.log( 'layoutComplete with ' + laidOutItems.length + ' items' );
});
$grid.on( 'click', '.grid-item', function() {
// change size of item by toggling gigante class
$( this ).toggleClass('grid-item--gigante');
$grid.isotope('layout');
});
});
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
/* ---- grid ---- */
.grid {
background: #DDD;
max-width: 1200px;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-item {
float: left;
width: 100px;
height: 100px;
background: #0D8;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.7);
}
.grid-item--width2 { width: 200px; }
.grid-item--height2 { height: 200px; }
.grid-item:hover {
background: #8CF;
cursor: pointer;
}
.grid-item--gigante {
width: 200px;
height: 300px;
background: #F80;
}
.notification {
position: fixed;
background: black;
opacity: 0;
color: white;
font-size: 16px;
padding: 0.5em;
right: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.js"></script>
<h1>Isotope - layoutComplete</h1>
<p>Open Developer Console to view event logs.</p>
<p>Click item to toggle size</p>
<div class="grid">
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<div class="notification"></div>

Hope this will be very useful for you. I have created full working
code You can use this.
var a=0;
$('.box').click(function() {
if(a==0){
var position = $(this).position();
$( "this" ).text( "left: " + position.left + ", top: " + position.top );
$(this).css({
"position":"absolute",
"left":position.left,
"top":position.top
})
$('.box').not(this).fadeOut(250);
$(this).animate({
"left":"0px",
"top":"0px"
}, 1000);
a=1;
}
else{
$('.box').not(this).fadeIn(250);
$(this).css({"position":"static"});
a=0;
}
});
div.box {
width: 100px;
height: 63px;
background-color: #52c6ec;
margin: 5px;
padding-top: 37px;
float: left;
text-align: center;
color: #fff;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
<div class="box" id="box3">Box 3</div>
<div class="box" id="box4">Box 4</div>
<div class="box" id="box5">Box 5</div>
<div class="box" id="box6">Box 6</div>
<div class="box" id="box7">Box 7</div>
<div class="box" id="box8">Box 8</div>
<div class="box" id="box9">Box 9</div>
<div class="box" id="box10">Box 10</div>
<div class="box" id="box11">Box 11</div>
<div class="box" id="box12">Box 12</div>
<div class="box" id="box13">Box 13</div>
<div class="box" id="box14">Box 14</div>
<div class="box" id="box15">Box 15</div>
<div class="box" id="box16">Box 16</div>
<div class="box" id="box17">Box 17</div>
<div class="box" id="box18">Box 18</div>
<div class="box" id="box19">Box 19</div>
<div class="box" id="box20">Box 20</div>

Flickr Grid System

How can I create a grid system like Flickr's explore page? https://www.flickr.com/explore
I've looked into Isotope (isotope.pkgd.js) but I can't seem to be able to arrange the grid based on the size of the images.
So far this is what I came up with:
HTML:
<h1>Isotope - masonry layout mode</h1>
<div class="isotope">
<div class="item width2 "></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item width2 "></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item width2 "></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item width2 "></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item width2 "></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item width2 "></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item width2 "></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item width2 "></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
/* ---- isotope ---- */
.isotope {
background: #DDD;
max-width: 1200px;
}
/* clear fix */
.isotope:after {
content: '';
display: block;
clear: both;
}
/* ---- .item ---- */
.item {
float: left;
width: 100px;
height: 100px;
background: #0D8;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.7);
}
.item.width2 { width: 200px; }
.item.height2 { height: 200px; }
JavaScript:
// external js:
// http://isotope.metafizzy.co/isotope.pkgd.js
$( function() {
$('.isotope').isotope({
itemSelector: '.item',
masonry: {
columnWidth: 100
}
});
});

Im not 100% sure on what you mean with order by image size. But to get the effect of flickr i would try something like this:
layoutMode: 'packery'
$('.isotope').isotope({
itemSelector: '.item',
layoutMode: 'packery',
masonry: {
columnWidth: 100
}
});

Flush CSS box alignment

I am practicing CSS with Masonry. I'm doing a bit of basic testing and seeing how everything gets displayed. However I am not sure how to fix this problem. I want to fit all of my pictures inside the .masonry class in my CSS but there is this little bit of space that occurs and I'm not sure how to fix it. I want all the boxes to be flush and no white space to be displayed between each box.
Here is the codepen:
http://codepen.io/anon/pen/Cpedg
my CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body { font-family: sans-serif; }
.masonry{
margin: 0 auto;
background: #EEE;
max-width: 80%;
}
.masonry .item,
.masonry .grid-sizer {
width: 20%; /*item default width of 20%*/
margin: 0px;
}
.masonry .item,
.masonry .grid-sizer {
height: 60px; /* default hieght of image*/
float: left;
background: #D26;
border: 1px solid #343;
border-color: hsla(0, 0%, 0%, 0.5);
border-radius: 5px;
}
.item.w2 { width: 40%; } /* changes each item to these chracteristics*/
.item.h2 { height: 100px; }
.item.h3 { height: 130px; }
.item.h4 { height: 180px; }
my HTML:
<h1>Masonry - columnWidth</h1>
<div class="masonry js-masonry" data-masonry-options='{ "columnWidth": ".grid-sizer", "itemSelector": ".item" }'>
<div class="grid-sizer"></div>
<div class="item"></div>
<div class="item w2 h2"></div>
<div class="item h3"></div>
<div class="item h2"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item w2 h3"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h3"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
</div>

You can remove those spaces between the cells by adding (or rather removing) margin and padding to (from) your body, like so:
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
That's a possible solution for the upper left arrow, but I'm not quite sure what the problem with the second arrow is?

So it turns out google chrome's zoom acts a bit funky sometimes. quick fix to realign everything is to press ctrl + 0 to realign everything!

Categories

Resources