Skip to content

Instantly share code, notes, and snippets.

@danielbouman
danielbouman / mediaqueries.css
Created July 30, 2014 15:07
Media query foutjes
// Styles voor schermen smaller dan 768px:
@media screen and (max-width: 768px) {...} // Dit gaat fout, veel tablets hebben een CSS-breedte van 768px en krijgen hiermee de style die bedoeld is voor smartphones.
@media screen and (max-width: 767px) {...} // Dit gaat goed.
// Styles voor schermen smaller dan 768px:
@media screen and (min-width: 768px) {...} // Dit gaat goed.
@danielbouman
danielbouman / filters.html
Created July 28, 2014 13:05
Fitsociety filters (regel 8 t/m 11 moet worden zoals regel 23 t/m 30)
<!-- Huidige HTML: -->
<div class="filter">
<form id="filters">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li class="filter_title">...</li>
<li class="left_column">...</li>
<li class="right_column">...</li>
@danielbouman
danielbouman / index.html
Created July 28, 2014 12:06
Fitsociety aanbieding menu item
<!-- Huidige situatie -->
<div class="sub-menu-container">
<ul id="menu-submenu" class="sub-menu">
(...)
</ul>
</div>
<!-- Nieuwe situatie -->
<div class="sub-menu-container">
<ul id="menu-submenu" class="sub-menu">
<!-- Huidige code -->
<div class="language">
<ul>
<li class="nl active">
<span>nl</span>
</li>
(...)
</ul>
</div>
@danielbouman
danielbouman / style.less
Created July 1, 2014 09:43
Aanpassing WDHMN logo resize
// Oude situatie (regel 147 - 168 van style.less):
.header {
padding: 14px 10px 0;
overflow: hidden;
@media screen and (min-width: 768px){
height: 157px;
padding: 0;
}
@media screen and (max-width: 991px){z-index: 15; /* Do not change this value */}
@danielbouman
danielbouman / style.less
Last active August 29, 2015 14:03
Aanpassing WDHMN background issue
/* Oude situatie: */
@media screen and (min-width: 768px){
.page-bg:before {
content: " ";
position: absolute;
width: 100%;
height: 678px;
background: url("/templates/images/page-bg.jpg") no-repeat 100% 50%;
top: 0;
left: 0;
@danielbouman
danielbouman / page.html
Created July 1, 2014 08:22
Aanpassing WDHMN background issue
<!-- Oude situatie: -->
<html>
<head>(...)</head>
<body>
<div class="container">(...)</div>
<div class="container page-bg">
(...)
</div>
</body>
</html>
@danielbouman
danielbouman / main.js
Last active August 29, 2015 14:02
Aanpassing WDHMN
// Huidig (regel 36 - 44):
$(document).on('click', function(e){
if( $(e.target).closest(menu).length > 0 || $(e.target).closest(menuToggle).length > 0 ) {
return false;
}
else {
rowOffcanvas.removeClass("active");
menuToggle.removeClass("active");
}
});
<!-- Oude situatie -->
<ul class="pager">
<li class="previous"><a href="#">Vorig project</a></li>
<li class="next"><a href="#">Volgend project</a></li>
</ul>
<!-- Nieuwe situatie -->
<ul class="pager">
<li class="previous"><a href="#"><span>Vorig project</span></a></li>
<li class="next"><a href="#"><span>Volgend project</span></a></li>
<!-- Oude situatie -->
<a href="#" class="btn eventuele-extra-classes">button tekst</a>
<!-- Nieuwe situatie -->
<a href="#" class="btn eventuele-extra-classes"><span>button tekst</span></a>