Media CSS queries werken niet+

jorenman · 30 jun 2014

HTML:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"
<html lang="nl">
<head>
<title>Silverworx | <?php the_title(); ?></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/javascript.js" type="text/javascript"></script>
<?php 
      include 'inc/tags.php'
?>
<link rel='stylesheet' type="text/css" media="(min-device-width : 320px) and (max-device-width : 480px)" href="<?php bloginfo('template_directory'); ?>/mobiledesktop.css" />
<link href="<?php bloginfo('template_directory'); ?>/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
     <div id="logo">
	 
	 </div>
     <div id="navselector">
            <img src="<?php bloginfo('template_directory'); ?>/images/menu.png" />
     </div>
	 <div id="headmenu">
	       <?php wp_nav_menu(array('theme_location' => 'primary'));?>
	 </div>
         
</div>

Dit is een Wordpress thema dat ik zelf heb gemaakt.
Alleen ik wil gebruik maken van meerdere css queries, maar op dit moment werken ze niet.
Want als je mobieltje een minimale breedte van 320 en een maximale breedte van 480px, wil ik dat de browser mobiledesktop.css als css file gebruikt, alleen doet hij dat niet.

Weet iemand hoe ik dit kan oplossen?

De site heet http://www.silverworx.nl

bron · 7 jul 2014

Hi Jorenman, weer druk bezig zie ik :d

Er mist een > op regel 2

Code:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd"

Voorbeeld media queries. Google even op cross-browser queries

Code:

<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" media="screen and (max-width: 980px)" href="s980.css" />
<link rel="stylesheet" media="screen and (max-width: 650px)" href="s650.css" />
<link rel="stylesheet" media="screen and (max-width: 480px)" href="s480.css" />

Tip: Bij iPhone ook de pixel-ratio in de query zetten.

Tip: bij XHTML validatie moeten elementen zonder eindtag (link, br, img, hr, enz.) zijn afgesloten met een /> ; Handiger is het gebruik van de html5 doctype. Bij de html5 doctype mag ook de /> gebruikt worden.

Code:

<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">

Tip: externe scripts invoegen vlak boven /body ivm performance

Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</body>

Tip: meta toevoegen. X-UA-Compatible IE=edge,chrome=1 (W3C gevalideerd)

Code:

<script type="text/javascript">
  var m = document.createElement("meta");
  m.setAttribute("http-equiv", "X-UA-Compatible");
  m.setAttribute("content", "IE=edge,chrome=1");
  document.getElementsByTagName("head")[0].appendChild(m);
</script>

Tip: voor alle non-IE browsers en IE vanaf ie9 (de huidige html5 browsers)

Code:

<![if gte IE 9]>
<link ....>
<![endif]>

Tip: voor IE browsers tot/met ie8 (html4 browsers). Download de scripts en zet deze in een lokale map. Doe dit alleen als je de ambtenaren onder ons de website wil tonen.

Code:

<!--[if lt IE 9]>
<script src="scripts/html5.js"></script>
<script src="scripts/respond.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="ie8.css" />
<![endif]-->

Have fun!!

***edit
de media query is klein, maar de css file is mobiledesktop.css. Wil je een mobile-first ontwerp maken?

jorenman · 7 jul 2014

Ik heb gekeken en wat rondgezocht en wat ontdekt.
Als ik de media querie in het CSS bestand zet, dan doet de media querie het wel.

Alleen dan nog 1 vraagje:
Weet iemand of alle browsers hiermee werken?

jorenman · 7 jul 2014

Het staat nu allemaal online op http://www.silverworx.nl

Alleen er is een probleempje, want een style werkt niet, je ziet dat zelf wel als je de grootte van de browser verandert.
Hier is het hele CSS bestand.

HTML:

/*
Theme Name: One Silverworx2
Author: Joren Wouters
Description: Made by Silverworx
License: GNU General Public License
License URI: license.txt
*/
@media only screen and (min-width: 1001px) and (min-device-width: 1001px) {
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 margin: 0
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 }
body, html {
margin: 0;
max-width: 100%;
width: 100%;
}
p {
margin: 0;
text-align: left;
}
div {
display: block;
}
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.alignright {float:right; }
.alignleft {float:left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto}
h1, h2, h3, h4, h5, h6 {
font-family: Verdana;
}
h1 {
font-size: 30px;
}
h2 {
font-size: 25px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 15px;
}
h5 {
font-size: 10px;
}
h6 {
font-size: 5px;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
abbr[title] {
color: red;
}
#header {
margin: 0;
width: 100%;
height: 180px;
border-bottom: 1px solid #c8c8c8;
float: left;
}
#logo {
margin-left: 5%;
margin-top: 40px;
height: 100px;
width: 20%;
float: left;
}
#navselector {
margin-left: 50%;
width: 40%;
height: 100px;
border: 1px solid #000;
float: none;
display: none;
}
#headmenu {
margin-left: 1%;
height: 100px;
width: 99%;
float: left;
}

#headmenu .menu, #headmenu .menu li, #headmenu .menu ul, #headmenu .menu a, #headmenu .menu span {
	margin:0;padding:0;border:0;outline:0;list-style:none;}
#headmenu .menu {
	position:relative;z-index:597;float:left;}
#headmenu .menu li {
	float:left;min-height:1px;line-height:1;vertical-align:middle;}
#headmenu .menu li:hover {
	position:relative;z-index:599;cursor:pointer;}
#headmenu .menu a, #headmenu .menu span {
	display:block;text-decoration:none;}
#headmenu .menu ul {
	visibility:hidden;position:absolute;top:100%;left:0;z-index:598;}
#headmenu .menu ul li {
	float:none;}
#headmenu .menu ul ul {
	top:0;left:100%;
	width: 150%; }
#headmenu .menu li:hover > ul {
	visibility:visible;}
#headmenu .menu {
list-style: none;
margin-top: -10px;
padding: 0;
}
#headmenu ul.menu li {
	width: auto;
	line-height: 50px;
	height: 50px;
	padding: 0 18px;
	font-family: verdana, geneva, sans-serif;
    text-transform: uppercase;
	color: #1a4265;
	white-space: nowrap;
        font-size: 15px;
}
#headmenu ul.menu a {
color: #000;
}
#headmenu ul.menu li:hover > a, #headmenu ul.menu li:hover > span {
color: #1a4265;
}
#headmenu ul.menu ul li  {
width: 100%;
background: #1a4265;
text-transform: capitalize;
border: 1px solid #1a4265;
opacity: 1;
}

#headmenu ul.menu ul li a  {
color: #fff;
}
#headmenu ul.menu ul li:hover {
background: #fff;
}
#headmenu ul.menu ul li:hover a {
color: #1a4265;
}
#body {
width: 100%;
margin-top: 50px;
float: left;
}
#home {
margin: 0 auto;
width: 82%;
}
#homedesign, #homehosting, #homeservice {
margin-top: 50px;
width: 100%;
height: auto;
font-family: Verdana;
font-size: 25px;
color: #777;
font-style: italic;
}
#homehosting {
margin-top: 150px;
}
#homeservice {
margin-top: 150px;
}
.hometitle {
font-size: 35px;
font-family: Verdana;
color: #1a4265;
margin-bottom: 20px;
text-align: left;
}
.homeimage {
float: left;
height: 256px;
margin-right: 5%;
}
.homeimage2 {
float: right;
height: 256px;
margin-left: 5%;
}
.homedescription {
margin-top: 50px;
}
#404 {
margin-left: 5%;
margin-bottom: 30px;
color: #1a4265;
}
.404 {
margin-left: 5%;
}
#content {
margin-left: 5%;
margin-right: 5%;
font-family: Verdana;
}
#content li {
font-family: Verdana;
}
#content a {
color: blue;
text-decoration: none;
}
#content a:hover {
color: #000;
}
.header1 {
font-size: 40px;
color: #1a4265;
margin-bottom: 20px;
}
.content {
font-size: 20px;
color: #000;
}
.content ul {
font-size: 20px;
font-family: Verdana;
margin-top: 10px;
margin-left: 5%;
}
article {
margin-left: 5%;
margin-top: 50px;
width: 50%;
}
#stats {
color: #777;
border-bottom: 1px solid #777;
margin-bottom: 30px;
}
#stats a, #stats a:visited {
color: blue;
text-decoration: none;
}
#stats a:hover {
color: #000;
}
.entry-title {
color: #1a4265;
text-decoration: none;
font-family: Verdana;
margin-bottom: 10px;
font-size: 25px;
}
.entry-title a, .entry-title a:visited {
color: blue;
text-decoration: none;
}
.entry-content {
font-family: Verdana;
color: #000;
font-size: 15px;
}
.entry-content a, .entry-content a:visited {
color: blue;
}
.entry-content a:hover {
text-decoration: none;
}
.entry-content li {
font-family: Verdana;
font-size: 15px;
}
#pricetables, #pricetables4 {
margin: 0 auto;
margin-top: 10px;
width: 100%;
height: auto;
float: left;
display: block;
}

#pricetable0 {
margin: 0;
width: 18%;
float: left;
}
#pricetable10 {
margin: 0;
width: 28%;
float: left;
}

.top0 {
margin: 0;
height: 75px;
width: 100%;
}
#names {
margin: 0px auto;
margin-bottom: 0;
width: 100%;
height: 200px;
}
.name, .last, .name2{
margin: 0px auto;
border-top: 1px solid #e0e0e0;
height: 50px;
width: 100%;
font-family: Verdana;
font-size: 15px;
color: #777;
}
.name2 {
border-bottom: 1px solid #e0e0e0;
}
.last {
border-bottom: 1px solid #e0e0e0;
}
#pricetable1 {
margin: 0;
width: 15%;
float: left;
}
#pricetable2 {
margin-left: 10%;
width: 20%;
float: left;
}
#pricetable3 {
margin: 0;
width: 25%;
float: left;
}
#pricetable3:nth-child(1) {
margin-left: 12%;
}
#pricetable3:nth-child(2) {
margin-left: 25%;
}
.top, .top2, .top3, .top4, .top5 {
margin: 0;
height: 75px;
width: 100%;
background: #6a78a7;
}
.top2 {
}
.top3, .top4 {
background: #515f8f;
}
.top5 {
background: #313e6b;
}
.title2, .description2 {
margin: 0px auto;
padding-top: 5px;
font-family: Helvetica;
font-size: 30px;
text-align: center;
color: #fff
}

.description2 {
font-size: 15px;
}
#settings {
margin: 0px auto;
margin-bottom: 0;
width: 100%;
}
.setting, .setting-last, .setting2 {
margin: 0px auto;
border-top: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
height: 50px;
width: 99%;
font-family: Verdana;
font-size: 15px;
color: #777;
}
.setting2, .price2 {
border-right: 1px solid #e0e0e0;
}
#second {
background: #F7F7F7;
}
.setting-last {
border-bottom: 1px solid #e0e0e0;
}
.price2 {
margin: 0px auto;
height: 140px;
width: 99%;
font-family: Verdana;
font-size: 15px;
color: #777;
text-align: center;
}
#price2 {
padding-top: 10px;
font-family: Verdana;
font-size: 30px;
color: #777;
text-align: center;
}
#bestel {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
height: 30px;
line-height: 30px;
width: 50%;
background: linear-gradient(#E89535, #FFA830);
display: block;
list-style: none;
border-radius: 3px;
text-align: center;
}
#bestel:hover {
background: linear-gradient(#FFA830, #E89535);
}
#bestel a, #bestel a:hover {
color: #fff;
}
#korting {
box-shadow: 0px -2px 20px 5px #999;
font-weight: bold;
}
#korting2, #korting1, #korting5 {
margin-left: 1px;
border-top: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
width: 99%;
}
#korting5 {
border-right: 0px;
}
.tekst-box {
margin-top: 15px; 
margin-left: 5%;
}
.tekst-box img {
margin-top: -5px;
margin-left: 37%;
}
#version1 {
margin-left: 2.5%;
display: block;
margin-top: 20px;
}
strong {
font-weight: bold;
}
#packages {
margin: 0 auto;
margin-top: 50px;
width: 99%;
}
#package, #package1 {
margin-left: 4%; 
margin-top: 20px;
height: 200px;
width: 21%;
float: left;
border: 1px solid #0f3647;
}
#package1 {
margin-left: 2.5%;
}
#packagetitle {
margin-top: 10px;
color: #0f3647;
text-align: center;
} 
#description {
margin: 0 auto;
margin-top: 20px;
height: 100px;
width: 95%;
font-family: Verdana;
font-size: 15px;
}
#description li {
text-decoration: none;
margin-left: 10%;
font-family: Verdana;
}
#package .package li, #package1 .package li {
margin-left: auto;
margin-right: auto;
margin-top: 25px;
height: 30px;
line-height: 30px;
width: 50%;
background: #0f3647;
list-style: none;
text-align: center;
border: 1px solid #fff;
}
#package .package li a, #package1 .package li a {
color: #fff;
text-decoration: none;
}
#package .package li a:hover, #package1 .package li a:hover {
color: #fff;
}
#contact {
margin-top: 30px;
}
#text {
font-family: Verdana;
font-size: 15px;
margin-bottom: 20px;
}
#contact input[type=text], #contact input[type=email]{
padding: 5px;
font-family: Verdana;
font-size: 15px;
}
#contact textarea {
width: 40%;
max-width: 40%;
font-family: Verdana;
}
#contact input[type=submit]{
color: #fff;
font-family: Verdana;
background: #1a4265;
padding: 25px;
padding-bottom: 10px;
padding-top: 10px;
outline: 0;
border: 1px solid #fff;
}

#package2 {
margin-top: 20px;
height: 200px;
width: 30%;
float: left;
border: 1px solid #0f3647;
}
#package2 .packagetitle {
color: #0f3647;
font-size: 25px;
text-align: center;
}
#package2 li {
margin-left: 2%;
color: #0f3647; 
list-style: yes;
font-size: 20px;
}
#footer {
margin-top: 50px;
height: 140px;
width: 100%;
float: left;
border-top: 1px solid #c8c8c8;
}
#footermenu {
margin-top: 20px;
margin-left: 5%;
width: 70%;
height: 90px;
float: left;
}
#footermenu ul {
list-style: none;
margin: 0;
padding: 0;
}
#footermenu ul li {
font-family: Verdana;
font-weight: bold;
text-transform: uppercase;
font-size: 15px;
float: left;
margin-right: 20px;
}
#footermenu ul li:nth-child(1) {
margin-right: 0px;
}
#footermenu ul li:nth-child(2) {
margin-right: 20px;
}
#footermenu ul li:nth-child(3) {
margin-right: 10px;
}
#footermenu ul li:nth-child(4) {
margin-right: 45px;
}
#footermenu ul li a {
color: #000;
text-decoration: none;
}
#footermenu ul ul {
margin-top: 20px;
}
#footermenu ul ul li {
font-family: Verdana;
font-weight:normal;
text-transform: capitalize;
float: none;
width: 120%;
}
#footermenu ul ul  a:hover {
color: #1a4256;
text-decoration: underline;
transition: .7s;
}
#social {
margin-top: 20px;
margin-left: 70%;
height: 90px;
width: 25%;
}
#social a {
margin-left: 10%;
}
#social a:first-child {
margin-left: -2%;
}
#holland {
margin-top: 5px;
margin-left: -15%;
float: left;
}
.copyright {
margin-top: 13px;
font-family: Verdana;
color: #777;
}





#shop {
margin: 0;
margin-bottom: 20px;
width: 100%;
height: auto;
float: left;
display: block;
}
.woocommerce-message {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 5%;
width: 70%;
height: 50px;
line-height: 50px;
padding-left: 50px;
color: #1a4265;
font-family: Verdana;
border: 1px solid #1a4265;
}
.woocommerce-message a, a:visited {
color: blue;
}
.woocommerce-message a:hover {
color: #000;
}
.page-title {
color: #1A4265;
margin-left: 5%;
}
.woocommerce-result-count {
margin-top: 20px;
margin-left: 5%;
font-family: Verdana;
}
.woocommerce-ordering {
margin-top: 10px;
margin-left: 5%;
font-family: Verdana;
}
#shop ul.products li.product {
padding-top: 50px;
float: left; 
display: block;
width: 20%;
margin-top: 70px;
height: 300px;
}
#shop ul.products li.product:nth-child(1), #shop ul.products li.product:nth-child(2), #shop ul.products li.product:nth-child(3), #shop ul.products li.product:nth-child(4) {
padding-top: 0;
}
.child {
margin-left: 5%;
}
.first-child {
margin-left: 2%;
}
#shop ul.products .onsale {
margin-top: -30px;
display: block;
background: #1a4265;
height: 30px;
line-height: 30px;
text-align: center;
width: 25%;
color: #fff;
font-family: Verdana;
}
#shop ul.products li.product a img {
width: 100%;
height: 200px;
}
#shop .products li.product a {
text-decoration: none;
}
#shop .products li.product a h3 {
margin-top: 10px;
text-align: center;
color: #000;
text-decoration: none;
}
#shop .products .star-rating {
display: none;
}
#shop .products .price {
margin-top: 20px;
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
color: #000;
font-family: Verdana;
}
#shop ul.products li.product .button {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
display: block;
background: #1a4265;
color: #fff;
width: 50%;
height: 40px;
line-height: 40px;
font-family: Verdana;
text-align: center;
border: 1px solid #fff;
}
#shop ul.products .last {
border: none;
}
/* 1 product */
.images {
margin-left: 5%;
width: 40%;
float: left;
}
.summary {
height: 460px;
}
div.product .onsale {
margin-left: 5%;
display: block;
color: #fff;
font-family: Verdana;
background: #1A4265;
width: 10%;
text-align: center;
height: 40px;
line-height: 40px;
}
div.product .product_title {
font-family: Verdana;
margin-bottom: 20px;
}
div.product .woocommerce-product-rating {
display: none;
}
div.product .price {
font-family: Verdana;
margin-bottom: 20px;
font-size: 23px;
}
div .product div[itemprop="description"] {
margin-top: 20px;
margin-bottom: 20px;
font-family: Verdana;
}
div.product .quantity {
float: left;
}
div.product .single_add_to_cart_button {
margin-left: 5%;
} 
div.product .woocommerce-tabs .tabs {
margin-left: 5.5%;
list-style: none;
padding: 0;
}
div.product .woocommerce-tabs .tabs li {
float: left;
padding-right: 20px;
}
div.product .woocommerce-tabs .tabs li a {
color: blue;
}
div.product .woocommerce-tabs .tabs li:last-child {
float: none;
}
div.product .woocommerce-tabs #tab-description {
margin-top: 40px;
margin-left: 5%;
width: 90%;
}
div.product .woocommerce-tabs #tab-description h2 {
font-family: Verdana;
}
div.product .woocommerce-tabs #tab-description p {
margin-top: 20px;
}
div.product .woocommerce-tabs #tab-reviews {
margin-top: 40px;
margin-left: 5%;
width: 90%;
}
div.product .woocommerce-tabs #tab-reviews .commentlist {
margin-left: 2%;
}
div.product .woocommerce-tabs #tab-reviews .commentlist li {
margin-top: 50px;
}
div.product .woocommerce-tabs #tab-reviews .star-rating {
display: none;
}
div.product .woocommerce-tabs #tab-reviews .description {
margin-top: 30px;
font-family: Verdana;
text-align: left;
}
div.product .woocommerce-tabs #tab-reviews .comment-respond {
margin-top: 80px;
margin-left: 60%;
font-family: Verdana;
}
div.product .woocommerce-tabs #tab-reviews .comment-respond #review_form #reply_title {
font-family: Verdana;
}
div.product .upsells {
margin-top: 70px;
}
div.product .upsells h2 {
margin-left: 5%;
}
div.product .upsells ul.products li.product .onsale {
margin-left: 0;
} 
.woocommerce /* Dit is de Cart */ {
width: 100%;
display: block;
}
.actions .button, .shipping_calculator .button {
background: #1a4265;
outline: none;
border: 1px solid #fff;
color: #fff;
padding: 5px;
}
.shipping-calculator-form .form-row:nth-child(3) {
margin-top: -40px;
}
.woocommerce-info {
margin-left: 4.5%;
border: 1px solid #fff;
padding: 10px;
margin-bottom: 30px;
width: 70%;
font-family: Verdana;
}
.woocommerce .product-name {
width: 800px;
text-align: center;
}
.woocommerce .product-quantity {
padding-left: 20px;
padding-right: 20px;
text-align: center;
}
.woocommerce .product-price, .woocommerce .product-subtotal {
text-align: center;
}
.woocommerce .input-text {
width: 100px;
}
.woocommerce thead tr td {
width: 200px;
text-align: center;
}
.woocommerce .remove {
color: red;
text-decoration: none;
font-family: Verdana;
font-size: 30px;
}
.coupon {
padding-top: 30px;
padding-bottom: 30px;
}
#coupon_code {
margin-top: -3px;
}
.cart-collaterals {
padding-top: 30px;
}
.cart-collaterals tbody tr th {
width: 300px;
text-align: left;
}
.order-total th {
padding-top: 20px;
padding-bottom: 20px;
}
.shipping_calculator .shipping-calculator-button {
font-size: 20px;
}
.shipping_calculator .shipping-calculator-form select, .shipping_calculator .shipping-calculator-form input[type=text]{
margin-left: -35%;;
}
.woocommerce .woocommerce-billing-fields { /* Dit is de Checkout */
margin-top: 30px;
}
.woocommerce .woocommerce-billing-fields input[type=text], .woocommerce .woocommerce-billing-fields select, .woocommerce .woocommerce-billing-fields textarea, .woocommerce .woocommerce-billing-fields input[type=password]{ 
position: absolute; left: 40%;
padding: 5px;
width: 200px;
font-family: Verdana;
}
.woocommerce .woocommerce-shipping-fields input[type=text], .woocommerce .woocommerce-shipping-fields select, .woocommerce .woocommerce-shipping-fields textarea, .woocommerce .woocommerce-shipping-fields input[type=password]{ 
position: absolute; left: 40%;
padding: 5px;
width: 200px;
font-family: Verdana;
}
.woocommerce .shipping_calculator input[type=text], .woocommerce .shipping_calculator select, .woocommerce .shipping_calculator textarea, .woocommerce .shipping_calculator input[type=password]{ 
position: absolute; left: 40%;
padding: 5px;
width: 200px;
font-family: Verdana;
}
.woocommerce .form-row {
margin-top: 20px;
display: block;
}
#shipping_address_2_field, #billing_address_2_field {
height: 20px;
}
#ship-to-different-address {
margin-top: 30px;
}
#order_comments_field {
padding-top: 20px;
margin-bottom: 230px;
}
#order_comments_field label {
margin-right: 20px;
margin-left: 0;
}
#order_comments {
height: 200px;
width: 30%;
max-width: 50%;
}
#order_review_heading {
font-size: 25px;
margin-top: 50px;
}
.woocommerce .shipping-calculator-form {
margin-bottom: 30px;
}
.woocommerce .shipping-calculator-form .form-row {
height: 20px;
}
.shop_table {
margin-top: 10px;
margin-left: 7.5%;
}
.shop_table thead tr th, .shop_table tbody tr td {
width: 200px;
}
.shop_table tfoot tr {
text-align: left;
}
.shop_table tbody tr {
text-align: left;
}
.shop_table .cart_item .product-name, .shop_table .cart_item .product-total {
text-align: left;
}
.shop_table thead tr .product-name, .shop_table thead tr .product-total {
text-align: left;
font-weight: bold;
padding-bottom: 5px;
}
tr.cart-subtotal th{
padding-top: 30px;
}
.payment_methods li {
margin-top: 20px;
margin-bottom: 20px;
}
.order_details {
margin-bottom: 20px;
display: block;
}
.woocommerce p {
margin-bottom: 20px;
}
.customer_details {
margin-bottom: 20px;
}
.myaccount_user /* Dit is het My Account */ {
margin-bottom: 20px;
}
.order-number, .order-date, .order-status, .order-total {
text-align: left;
}
.order-number span, .order-date span, .order-status span, .order-total span {
margin-top: 10px;
display: block;
}
.order .order-status, .order-status span {
margin-left: 20%;
display: block;
}
.my_account_orders {
margin-bottom: 20px;
}
.title {
text-align: left;
}
.title h3 {
font-size: 25px;
}
.edit {
text-align: left;
font-size: 20px;
}
.address  {
margin-top: 40px;
float: left;
}
.address:nth-child(2) {
margin-left: 20%;
}
.col-1 .title h3, .col-2 .title h3 {
margin-bottom: 10px;
}
}
@media only screen and (max-width: 730px), only screen and (max-device-width: 730px) {
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 }
p {
margin: 0;
}
div {
display: block;
}
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.alignright {float:right; }
.alignleft {float:left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto}
h1, h2, h3, h4, h5, h6 {
font-family: Verdana;
}
h1 {
font-size: 30px;
}
h2 {
font-size: 25px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 15px;
}
h5 {
font-size: 10px;
}
h6 {
font-size: 5px;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
#header {
margin: 0;
width: 100%;
border-bottom: 1px solid #c8c8c8;
float: left;
}
#logo {
margin-left: 5%;
margin-top: 40px;
margin-bottom: 20px;
height: 100px;
width: 20%;
float: left;
}
#navselector {
display: block;
margin-top: 50px;
margin-left: 70%;
width: 10%;
height: 25px;
border: none;
}
#headmenu {
margin: 0;
width: 100%;
display: none;
}

#headmenu .menu, #headmenu .menu li, #headmenu .menu ul, #headmenu .menu a, #headmenu .menu span {
	margin:0;padding:0;border:0;outline:0;list-style:none;}
#headmenu .menu {
	position:relative;z-index:597;float:left;}
#headmenu .menu li {
	float:none;min-height:1px;line-height:1;vertical-align:middle;}
#headmenu .menu li:hover {
	position:relative;z-index:599;cursor:pointer;}
#headmenu .menu a, #headmenu .menu span {
	display:block;text-decoration:none;}
#headmenu .menu ul {
	visibility:hidden;position:absolute;top:100%;left:0;z-index:598;}
#headmenu .menu ul li {
	float:none;}
#headmenu .menu ul ul {
	top:0;left:100%;
	width: 150%; }
#headmenu .menu li:hover > ul {
	visibility:visible;}

#headmenu ul.menu {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
background: #1a4265;
}

#headmenu ul.menu li {
        margin: 0;
	width: 100%;
	line-height: 75px;
	height: 75px;
	font-family: verdana, geneva, sans-serif;
        text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
        float: none;
        text-align: center;
        border-bottom: 1px solid #1a4265;
}
#headmenu ul.menu li a {
color: #fff;
}
#headmenu ul.menu li:hover > a, #headmenu ul.menu li:hover > span {
color: #fff;
transition: .5s;
}
#headmenu ul.menu ul {
margin: 0;
width: 100%;
}
#headmenu ul.menu ul li  {
padding: 0;
margin: 0;
width: 100%;
background: #fff;
text-transform: capitalize;
border-top: 1px solid #1a4265;
text-align: center;
color: #1a4265;
}
#headmenu ul.menu ul li a {
color: #1a4265;
}
#body {
width: 100%;
margin-top: 50px;
float: left;
}
#home {
margin: 0 auto;
width: 100%;
float: left;
}
#homedesign, #homehosting, #homeservice {
margin: 0 auto;
margin-top: 50px;
width: 100%;
height: auto;
font-family: Verdana;
font-size: 25px;
color: #777;
font-style: italic;
text-align: center;
}
#homedesign {
margin-top: 0;
}
.hometitle {
margin: 0 auto;
font-size: 25px;
font-family: Verdana;
color: #1a4265;
margin-bottom: 20px;
text-align: center;
}
.homeimage {
margin: 0;
float: none;
height: 256px;

}
.homeimage2 {
margin: 0;
float: none;
height: 256px;
}
.homedescription, .homedescription2 {
margin: 0 auto;
margin-top: 25px;
font-size: 15px;
text-align: center;
}
#404 {
margin-left: 5%;
margin-bottom: 30px;
color: #1a4265;
}
.404 {
margin-left: 5%;
}
#content {
margin-left: 5%;
margin-right: 5%;
font-family: Verdana;
}
#content li {
font-family: Verdana;
}
#content a {
color: blue;
text-decoration: none;
}
#content a:hover {
color: #000;
}
.header1 {
font-size: 40px;
color: #1a4265;
margin-bottom: 20px;
}
.content {
font-size: 15px;
color: #000;
}
.content ul {
font-size: 15px;
font-family: Verdana;
margin-top: 10px;
margin-left: 10%;
}
.content img {
margin-top: 5px;
}
article {
margin-left: 5%;
margin-top: 50px;
width: 80%;
}
#stats {
color: #777;
border-bottom: 1px solid #777;
margin-bottom: 30px;
}
#stats a, #stats a:visited {
color: blue;
text-decoration: none;
}
#stats a:hover {
color: #000;
}
.entry-title {
color: #1a4265;
text-decoration: none;
font-family: Verdana;
margin-bottom: 10px;
font-size: 25px;
}
.entry-title a, .entry-title a:visited {
color: blue;
text-decoration: none;
}
.entry-content {
font-family: Verdana;
color: #000;
font-size: 15px;
}
.entry-content a, .entry-content a:visited {
color: blue;
}
.entry-content a:hover {
text-decoration: none;
}
.entry-content li {
font-family: Verdana;
font-size: 15px;
}
#pricetables, #pricetables4 {
margin: 0;
margin-top: 10px;
width: 100%;
height: auto;
float: left;
display: none;
}
#pricetables img {
margin-top: 10px;
}
#pricetables #pricetable0 .top0, #pricetables #pricetable1 .top, #pricetables #pricetable1 .top2, #pricetables #pricetable1 .top3, #pricetables #pricetable1 .top4, #pricetables #pricetable1 .top5, #pricetables #pricetable10 .top0 {
height: 125px;
}

#pricetable0 {
margin: 0;
width: 18%;
float: left;
}
#pricetable10 {
margin: 0;
width: 30%;
float: left;
}
#pricetables #pricetable10 #names .name, #pricetables #pricetable10 #names .last {
font-size: 13px;
}
.top0 {
margin: 0;
height: 100px;
width: 100%;
}
#names {
margin: 0px auto;
margin-bottom: 0;
width: 100%;
height: auto;
}
.name, .last, .name2{
margin: 0px auto;
border-top: 1px solid #e0e0e0;
height: 100px;
width: 100%;
font-family: Verdana;
font-size: 20px;
color: #777;
}
.name2 {
border-bottom: 1px solid #e0e0e0;
}
.last {
border-bottom: 1px solid #e0e0e0;
}
#pricetable1 {
margin: 0;
width: 16%;
float: left;
}
#pricetable2 {
margin-left: 10%;
width: 20%;
float: left;
}
#pricetable3 {
margin-left: 5%;
width: 90%;
float: left;
margin-top: 50px;
}
#pricetable3:nth-child(1) {
margin-left: 0%;
}
#pricetable3:nth-child(2) {
margin-left: 1%;
}
.top, .top2, .top3, .top4, .top5 {
margin: 0;
height: 100px;
width: 100%;
background: #6a78a7;
}
.top2 {
}
.top3, .top4 {
background: #515f8f;
}
.top5 {
background: #313e6b;
}
.title2, .description2 {
margin: 0px auto;
padding-top: 5px;
font-family: Helvetica;
text-align: center;
color: #fff
}
.title2 {
font-size: 30px;
}
.description2 {
margin-top: 10px;
font-size: 20px;
}
#settings {
margin: 0px auto;
margin-bottom: 0;
width: 100%;
}
.setting, .setting-last, .setting2 {
margin: 0px auto;
border-top: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
height: 100px;
width: 100%;
font-family: Verdana;
font-size: 20px;
color: #777;
}
.setting2, .price2 {
border-right: 1px solid #e0e0e0;
}
#second {
background: #F7F7F7;
}
.setting-last {
border-bottom: 1px solid #e0e0e0;
}
.price2 {
margin: 0px auto;
height: 140px;
width: 99%;
font-family: Verdana;
font-size: 15px;
color: #777;
text-align: center;
}
#price2 {
padding-top: 10px;
font-family: Verdana;
font-size: 30px;
color: #777;
text-align: center;
}
#bestel {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
height: 30px;
line-height: 30px;
width: 50%;
background: linear-gradient(#E89535, #FFA830);
display: block;
list-style: none;
border-radius: 3px;
text-align: center;
}
#bestel:hover {
background: linear-gradient(#FFA830, #E89535);
}
#bestel a, #bestel a:hover {
color: #fff;
}
#korting {
box-shadow: 0px -2px 20px 5px #999;
font-weight: bold;
}
#korting2, #korting1, #korting5 {
margin-left: 1px;
border-top: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
width: 99%;
}
#korting5 {
border-right: 0px;
}
.tekst-box {
margin-top: 15px; 
margin-left: 5%;
}
.tekst-box img {
margin-top: -5px;
margin-left: 37%;
}
#version1 {
margin-left: 2.5%;
display: none;
margin-top: 20px;
font-size: 20px;
}
strong {
font-weight: bold;
}
#packages {
margin: 0 auto;
margin-top: 50px;
width: 99%;
}
#package, #package1 {
margin-left: 4%; 
margin-top: 20px;
height: 200px;
width: 21%;
float: left;
border: 1px solid #0f3647;
}
#package1 {
margin-left: 2.5%;
}
#packagetitle {
margin-top: 10px;
color: #0f3647;
text-align: center;
} 
#description {
margin: 0 auto;
margin-top: 20px;
height: 100px;
width: 95%;
font-family: Verdana;
font-size: 15px;
}
#description li {
text-decoration: none;
margin-left: 10%;
font-family: Verdana;
}
#package .package li, #package1 .package li {
margin-left: auto;
margin-right: auto;
margin-top: 25px;
height: 30px;
line-height: 30px;
width: 50%;
background: #0f3647;
list-style: none;
text-align: center;
border: 1px solid #fff;
}
#package .package li a, #package1 .package li a {
color: #fff;
text-decoration: none;
}
#package .package li a:hover, #package1 .package li a:hover {
color: #fff;
}
#contact {
margin-top: 30px;
}
#text {
font-family: Verdana;
font-size: 15px;
margin-bottom: 20px;
}
#contact input[type=text], #contact input[type=email]{
padding: 5px;
font-family: Verdana;
font-size: 15px;
}
#contact textarea {
width: 40%;
max-width: 40%;
font-family: Verdana;
}
#contact input[type=submit]{
color: #fff;
font-family: Verdana;
background: #1a4265;
padding: 25px;
padding-bottom: 10px;
padding-top: 10px;
outline: 0;
border: 1px solid #fff;
}

#package2 {
margin-top: 20px;
height: 200px;
width: 30%;
float: left;
border: 1px solid #0f3647;
}
#package2 .packagetitle {
color: #0f3647;
font-size: 25px;
text-align: center;
}
#package2 li {
margin-left: 2%;
color: #0f3647; 
list-style: yes;
font-size: 20px;
}
#footer {
margin-top: 50px;
height: 90px;
width: 100%;
float: left;
border-top: 1px solid #c8c8c8;
}
#footermenu {
display: none;
}
#social {
margin-top: 20px;
margin-left: 10%;
height: 90px;
width: 90%;
}
#social a {
margin-left: 10%;
float: left;
}
#social a:first-child {
margin-left: -2%;
}
#holland {
margin-top: -15px;
margin-left: 30%;
margin-right: 5%;
float: left;
}
.copyright {
margin-top: 10px;
font-family: Verdana;
color: #777;
}





#shop {
margin: 0;
margin-bottom: 20px;
width: 100%;
height: auto;
float: left;
display: block;
}
.woocommerce-message {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 5%;
width: 70%;
height: 50px;
line-height: 50px;
padding-left: 50px;
color: #1a4265;
font-family: Verdana;
border: 1px solid #1a4265;
}
.woocommerce-message a, a:visited {
color: blue;
}
.woocommerce-message a:hover {
color: #000;
}
.page-title {
color: #1A4265;
margin-left: 5%;
}
.woocommerce-result-count {
margin-top: 20px;
margin-left: 5%;
font-family: Verdana;
}
.woocommerce-ordering {
margin-top: 10px;
margin-left: 5%;
font-family: Verdana;
}
#shop ul.products li.product {
padding-top: 50px;
float: left; 
display: block;
width: 20%;
margin-top: 70px;
height: 300px;
}
#shop ul.products li.product:nth-child(1), #shop ul.products li.product:nth-child(2), #shop ul.products li.product:nth-child(3), #shop ul.products li.product:nth-child(4) {
padding-top: 0;
}
.child {
margin-left: 5%;
}
.first-child {
margin-left: 2%;
}
#shop ul.products .onsale {
margin-top: -30px;
display: block;
background: #1a4265;
height: 30px;
line-height: 30px;
text-align: center;
width: 25%;
color: #fff;
font-family: Verdana;
}
#shop ul.products li.product a img {
width: 100%;
height: 200px;
}
#shop .products li.product a {
text-decoration: none;
}
#shop .products li.product a h3 {
margin-top: 10px;
text-align: center;
color: #000;
text-decoration: none;
}
#shop .products .star-rating {
display: none;
}
#shop .products .price {
margin-top: 20px;
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
color: #000;
font-family: Verdana;
}
#shop .products .button {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
display: block;
background: #1a4265;
color: #fff;
width: 50%;
height: 40px;
line-height: 40px;
border: 1px solid #1a4265;
font-family: Verdana;
text-align: center;
}
#shop ul.products .last {
border: none;
}
/* 1 product */
.images {
margin-left: 5%;
width: 40%;
float: left;
}
.summary {
height: 460px;
}
div.product .onsale {
margin-left: 5%;
display: block;
color: #fff;
font-family: Verdana;
background: #1A4265;
width: 10%;
text-align: center;
height: 40px;
line-height: 40px;
}
div.product .product_title {
font-family: Verdana;
margin-bottom: 20px;
}
div.product .woocommerce-product-rating {
display: none;
}
div.product .price {
font-family: Verdana;
margin-bottom: 20px;
font-size: 23px;
}
div .product div[itemprop="description"] {
margin-top: 20px;
margin-bottom: 20px;
font-family: Verdana;
}
div.product .quantity {
float: left;
}
div.product .single_add_to_cart_button {
margin-left: 5%;
} 
div.product .woocommerce-tabs .tabs {
margin-left: 5.5%;
list-style: none;
padding: 0;
}
div.product .woocommerce-tabs .tabs li {
float: left;
padding-right: 20px;
}
div.product .woocommerce-tabs .tabs li a {
color: blue;
}
div.product .woocommerce-tabs .tabs li:last-child {
float: none;
}
div.product .woocommerce-tabs #tab-description {
margin-top: 40px;
margin-left: 5%;
width: 90%;
}
div.product .woocommerce-tabs #tab-description h2 {
font-family: Verdana;
}
div.product .woocommerce-tabs #tab-description p {
margin-top: 20px;
}
div.product .woocommerce-tabs #tab-reviews {
margin-top: 40px;
margin-left: 5%;
width: 90%;
}
div.product .woocommerce-tabs #tab-reviews .commentlist {
margin-left: 2%;
}
div.product .woocommerce-tabs #tab-reviews .commentlist li {
margin-top: 50px;
}
div.product .woocommerce-tabs #tab-reviews .star-rating {
display: none;
}
div.product .woocommerce-tabs #tab-reviews .description {
margin-top: 30px;
font-family: Verdana;
text-align: left;
}
div.product .woocommerce-tabs #tab-reviews .comment-respond {
margin-top: 80px;
margin-left: 60%;
font-family: Verdana;
}
div.product .woocommerce-tabs #tab-reviews .comment-respond #review_form #reply_title {
font-family: Verdana;
}
div.product .upsells {
margin-top: 70px;
}
div.product .upsells h2 {
margin-left: 5%;
}
div.product .upsells ul.products li.product .onsale {
margin-left: 0;
} 
.woocommerce /* Dit is de Cart */ {
width: 100%;
display: block;
}
.actions .button, .shipping_calculator .button {
background: #1a4265;
outline: none;
border: 1px solid #fff;
color: #fff;
padding: 5px;
}
.shipping-calculator-form .form-row:nth-child(3) {
margin-top: -40px;
}
.woocommerce .woocommerce-info {
margin-left: 0%;
border: 1px solid #fff;
padding: 10px;
margin-bottom: 30px;
width: 70%;
font-family: Verdana;
}
.woocommerce .product-name {
width: 800px;
text-align: center;
}
.woocommerce .product-quantity {
padding-left: 20px;
padding-right: 20px;
text-align: center;
}
.woocommerce .product-price, .woocommerce .product-subtotal {
text-align: center;
}
.woocommerce .input-text {
width: 100px;
}
.woocommerce thead tr td {
width: 200px;
text-align: center;
}
.woocommerce .remove {
color: red;
text-decoration: none;
font-family: Verdana;
font-size: 30px;
}
.coupon {
padding-top: 30px;
padding-bottom: 30px;
}
#coupon_code {
margin-top: -3px;
}
.cart-collaterals {
padding-top: 30px;
}
.cart-collaterals tbody tr th {
width: 300px;
text-align: left;
}
.order-total th {
padding-top: 20px;
padding-bottom: 20px;
}
.shipping_calculator .shipping-calculator-button {
font-size: 20px;
}
.shipping_calculator .shipping-calculator-form select, .shipping_calculator .shipping-calculator-form input[type=text]{
margin-left: -35%;;
}
.woocommerce .woocommerce-billing-fields { /* Dit is de Checkout */
margin-top: 30px;
}
.woocommerce .woocommerce-billing-fields input[type=text], .woocommerce .woocommerce-billing-fields select, .woocommerce .woocommerce-billing-fields textarea, .woocommerce .woocommerce-billing-fields input[type=password]{ 
position: absolute; left: 40%;
padding: 5px;
width: 200px;
font-family: Verdana;
}
.woocommerce .woocommerce-shipping-fields input[type=text], .woocommerce .woocommerce-shipping-fields select, .woocommerce .woocommerce-shipping-fields textarea, .woocommerce .woocommerce-shipping-fields input[type=password]{ 
position: absolute; left: 40%;
padding: 5px;
width: 200px;
font-family: Verdana;
}
.woocommerce .shipping_calculator input[type=text], .woocommerce .shipping_calculator select, .woocommerce .shipping_calculator textarea, .woocommerce .shipping_calculator input[type=password]{ 
position: absolute; left: 40%;
padding: 5px;
width: 200px;
font-family: Verdana;
}
.woocommerce .form-row {
margin-top: 20px;
display: block;
}
#shipping_address_2_field, #billing_address_2_field {
height: 20px;
}
#ship-to-different-address {
margin-top: 30px;
}
#order_comments_field {
padding-top: 20px;
margin-bottom: 230px;
}
#order_comments_field label {
margin-right: 20px;
margin-left: 0;
}
#order_comments {
height: 200px;
width: 30%;
max-width: 50%;
}
#order_review_heading {
font-size: 25px;
margin-top: 50px;
}
.woocommerce .shipping-calculator-form {
margin-bottom: 30px;
}
.woocommerce .shipping-calculator-form .form-row {
height: 20px;
}
.shop_table {
margin-top: 10px;
margin-left: 7.5%;
}
.shop_table thead tr th, .shop_table tbody tr td {
width: 200px;
}
.shop_table tfoot tr {
text-align: left;
}
.shop_table tbody tr {
text-align: left;
}
.shop_table .cart_item .product-name, .shop_table .cart_item .product-total {
text-align: left;
}
.shop_table thead tr .product-name, .shop_table thead tr .product-total {
text-align: left;
font-weight: bold;
padding-bottom: 5px;
}
tr.cart-subtotal th{
padding-top: 30px;
}
.payment_methods li {
margin-top: 20px;
margin-bottom: 20px;
}
.order_details {
margin-bottom: 20px;
display: block;
}
.woocommerce p {
margin-bottom: 20px;
}
.customer_details {
margin-bottom: 20px;
}
.myaccount_user /* Dit is het My Account */ {
margin-bottom: 20px;
}
.order-number, .order-date, .order-status, .order-total {
text-align: left;
}
.order-number span, .order-date span, .order-status span, .order-total span {
margin-top: 10px;
display: block;
}
.order .order-status, .order-status span {
margin-left: 20%;
display: block;
}
.my_account_orders {
margin-bottom: 20px;
}
.title {
text-align: left;
}
.title h3 {
font-size: 25px;
}
.edit {
text-align: left;
font-size: 20px;
}
.address  {
margin-top: 40px;
float: left;
}
.address:nth-child(2) {
margin-left: 20%;
}
.col-1 .title h3, .col-2 .title h3 {
margin-bottom: 10px;
}
@media only screen and (min-width: 731px) and (min-device-width: 731px) {
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 }
body, html {
margin: 0;
max-width: 100%;
}
p {
margin: 0;
text-align: left;
}
div {
display: block;
}
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.alignright {float:right; }
.alignleft {float:left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto}
h1, h2, h3, h4, h5, h6 {
font-family: Verdana;
}
h1 {
font-size: 30px;
}
h2 {
font-size: 25px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 15px;
}
h5 {
font-size: 10px;
}
h6 {
font-size: 5px;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
abbr[title] {
color: red;
}
#header {
margin: 0;
width: 100%;
height: 180px;
border-bottom: 1px solid #c8c8c8;
float: left;
}
#logo {
margin-left: 5%;
margin-top: 40px;
height: 100px;
width: 20%;
float: left;
}
#navselector {
margin-left: 50%;
width: 40%;
height: 100px;
border: 1px solid #000;
float: none;
display: none;
}
#headmenu {
margin-left: 1%;
height: 100px;
width: 100%;
float: left;
}

#headmenu .menu, #headmenu .menu li, #headmenu .menu ul, #headmenu .menu a, #headmenu .menu span {
	margin:0;padding:0;border:0;outline:0;list-style:none;}
#headmenu .menu {
	position:relative;z-index:597;float:left;}
#headmenu .menu li {
	float:left;min-height:1px;line-height:1;vertical-align:middle;}
#headmenu .menu li:hover {
	position:relative;z-index:599;cursor:pointer;}
#headmenu .menu a, #headmenu .menu span {
	display:block;text-decoration:none;}
#headmenu .menu ul {
	visibility:hidden;position:absolute;top:100%;left:0;z-index:598;}
#headmenu .menu ul li {
	float:none;}
#headmenu .menu ul ul {
	top:0;left:100%;
	width: 150%; }
#headmenu .menu li:hover > ul {
	visibility:visible;}
#headmenu .menu {
list-style: none;
margin-top: -10px;
padding: 0;
}
#headmenu ul.menu li {
	width: auto;
	line-height: 50px;
	height: 50px;
	padding: 0 15px;
	font-family: verdana, geneva, sans-serif;
    text-transform: uppercase;
	color: #1a4265;
	white-space: nowrap;
        font-size: 12px;
}
#headmenu ul.menu a {
color: #000;
}
#headmenu ul.menu li:hover > a, #headmenu ul.menu li:hover > span {
color: #1a4265;
}
#headmenu ul.menu ul li  {
width: 100%;
background: #1a4265;
text-transform: capitalize;
border: 1px solid #1a4265;
opacity: 1;
}

#headmenu ul.menu ul li a  {
color: #fff;
}
#headmenu ul.menu ul li:hover {
background: #fff;
}
#headmenu ul.menu ul li:hover a {
color: #1a4265;
}
#body {
width: 100%;
margin-top: 50px;
float: left;
}
#home {
margin: 0 auto;
width: 82%;
}
#homedesign, #homehosting, #homeservice {
margin-top: 50px;
width: 100%;
height: auto;
font-family: Verdana;
font-size: 25px;
color: #777;
font-style: italic;
}
#homehosting {
margin-top: 150px;
}
#homeservice {
margin-top: 150px;
}
.hometitle {
font-size: 35px;
font-family: Verdana;
color: #1a4265;
margin-bottom: 20px;
text-align: left;
}
.homeimage {
float: left;
height: 256px;
margin-right: 5%;
}
.homeimage2 {
float: right;
height: 256px;
margin-left: 5%;
}
.homedescription {
margin-top: 50px;
}
#404 {
margin-left: 5%;
margin-bottom: 30px;
color: #1a4265;
}
.404 {
margin-left: 5%;
}
#content {
margin-left: 5%;
margin-right: 5%;
font-family: Verdana;
}
#content li {
font-family: Verdana;
}
#content a {
color: blue;
text-decoration: none;
}
#content a:hover {
color: #000;
}
.header1 {
font-size: 40px;
color: #1a4265;
margin-bottom: 20px;
}
.content {
font-size: 20px;
color: #000;
}
.content ul {
font-size: 20px;
font-family: Verdana;
margin-top: 10px;
margin-left: 5%;
}
article {
margin-left: 5%;
margin-top: 50px;
width: 50%;
}
#stats {
color: #777;
border-bottom: 1px solid #777;
margin-bottom: 30px;
}
#stats a, #stats a:visited {
color: blue;
text-decoration: none;
}
#stats a:hover {
color: #000;
}
.entry-title {
color: #1a4265;
text-decoration: none;
font-family: Verdana;
margin-bottom: 10px;
font-size: 25px;
}
.entry-title a, .entry-title a:visited {
color: blue;
text-decoration: none;
}
.entry-content {
font-family: Verdana;
color: #000;
font-size: 15px;
}
.entry-content a, .entry-content a:visited {
color: blue;
}
.entry-content a:hover {
text-decoration: none;
}
.entry-content li {
font-family: Verdana;
font-size: 15px;
}
#pricetables, #pricetables4 {
margin: 0 auto;
margin-top: 10px;
width: 100%;
height: auto;
float: left;
display: block;
}
#pricetables {
margin-left: -5%;
width: 110%;
}
#pricetable0 {
margin: 0;
width: 18%;
float: left;
font-size: 12px;
}
#pricetable10 {
margin: 0;
width: 38%;
float: left;
}
#pricetable1 {
width: 16%;
}
.top0 {
margin: 0;
height: 75px;
width: 100%;
}
#names {
margin: 0px auto;
margin-bottom: 0;
width: 100%;
height: 200px;
}
.name, .last, .name2{
margin: 0px auto;
border-top: 1px solid #e0e0e0;
height: 75px;
line-height: 50px;
width: 100%;
font-family: Verdana;
font-size: 12px;
color: #777;
}
.name2 {
border-bottom: 1px solid #e0e0e0;
}
.last {
border-bottom: 1px solid #e0e0e0;
}
#pricetable1 {
margin: 0;
width: 15%;
float: left;
}
#pricetable2 {
margin-left: 10%;
width: 20%;
float: left;
}
#pricetable3 {
margin: 0;
width: 25%;
float: left;
}
#pricetable3:nth-child(1) {
margin-left: 12%;
margin-right: 50%;
}
#pricetable3:nth-child(2) {
margin-left: 25%;
}
.top, .top2, .top3, .top4, .top5 {
margin: 0;
height: 75px;
width: 100%;
background: #6a78a7;
}
.top2 {
}
.top3, .top4 {
background: #515f8f;
}
.top5 {
background: #313e6b;
}
.title2, .description2 {
margin: 0px auto;
padding-top: 5px;
font-family: Helvetica;
font-size: 25px;
text-align: center;
color: #fff
}

.description2 {
font-size: 15px;
}
#settings {
margin: 0px auto;
margin-bottom: 0;
width: 100%;
}
.setting, .setting-last, .setting2 {
margin: 0px auto;
border-top: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
height: 75px;
line-height: 50px;
width: 99%;
font-family: Verdana;
font-size: 12px;
color: #777;
}
.setting2, .price2 {
border-right: 1px solid #e0e0e0;
}
#second {
background: #F7F7F7;
}
.setting-last {
border-bottom: 1px solid #e0e0e0;
}
.price2 {
margin: 0px auto;
height: 140px;
width: 99%;
font-family: Verdana;
font-size: 15px;
color: #777;
text-align: center;
}
#price2 {
padding-top: 10px;
font-family: Verdana;
font-size: 30px;
color: #777;
text-align: center;
}
#bestel {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
height: 30px;
line-height: 30px;
width: 50%;
background: linear-gradient(#E89535, #FFA830);
display: block;
list-style: none;
border-radius: 3px;
text-align: center;
}
#bestel:hover {
background: linear-gradient(#FFA830, #E89535);
}
#bestel a, #bestel a:hover {
color: #fff;
}
#korting {
box-shadow: 0px -2px 20px 5px #999;
font-weight: bold;
}
#korting2, #korting1, #korting5 {
margin-left: 1px;
border-top: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
width: 99%;
}
#korting5 {
border-right: 0px;
}
.tekst-box {
margin-top: 15px; 
margin-left: 5%;
}
.tekst-box img {
margin-top: -5px;
margin-left: 37%;
}
#version1 {
margin-left: 2.5%;
display: block;
margin-top: 20px;
font-size: 12px;
}
strong {
font-weight: bold;
}
#packages {
margin: 0 auto;
margin-top: 50px;
width: 99%;
}
#package, #package1 {
margin-left: 4%; 
margin-top: 20px;
height: 200px;
width: 21%;
float: left;
border: 1px solid #0f3647;
}
#package1 {
margin-left: 2.5%;
}
#packagetitle {
margin-top: 10px;
color: #0f3647;
text-align: center;
} 
#description {
margin: 0 auto;
margin-top: 20px;
height: 100px;
width: 95%;
font-family: Verdana;
font-size: 15px;
}
#description li {
text-decoration: none;
margin-left: 10%;
font-family: Verdana;
}
#package .package li, #package1 .package li {
margin-left: auto;
margin-right: auto;
margin-top: 25px;
height: 30px;
line-height: 30px;
width: 50%;
background: #0f3647;
list-style: none;
text-align: center;
border: 1px solid #fff;
}
#package .package li a, #package1 .package li a {
color: #fff;
text-decoration: none;
}
#package .package li a:hover, #package1 .package li a:hover {
color: #fff;
}
#contact {
margin-top: 30px;
}
#text {
font-family: Verdana;
font-size: 15px;
margin-bottom: 20px;
}
#contact input[type=text], #contact input[type=email]{
padding: 5px;
font-family: Verdana;
font-size: 15px;
}
#contact textarea {
width: 40%;
max-width: 40%;
font-family: Verdana;
}
#contact input[type=submit]{
color: #fff;
font-family: Verdana;
background: #1a4265;
padding: 25px;
padding-bottom: 10px;
padding-top: 10px;
outline: 0;
border: 1px solid #fff;
}

#package2 {
margin-top: 20px;
height: 200px;
width: 30%;
float: left;
border: 1px solid #0f3647;
}
#package2 .packagetitle {
color: #0f3647;
font-size: 25px;
text-align: center;
}
#package2 li {
margin-left: 2%;
color: #0f3647; 
list-style: yes;
font-size: 20px;
}
#footer {
margin-top: 50px;
height: 140px;
width: 100%;
float: left;
border-top: 1px solid #c8c8c8;
}
#footermenu {
display: none;
}
#social {
margin-top: 20px;
margin-left: 10%;
height: 90px;
width: 90%;
}
#social a {
margin-left: 10%;
float: left;
}
#social a:first-child {
margin-left: -2%;
}
#holland {
margin-top: -15px;
margin-left: 30%;
margin-right: 5%;
float: left;
}
.copyright {
margin-top: 10px;
font-family: Verdana;
color: #777;
}





#shop {
margin: 0;
margin-bottom: 20px;
width: 100%;
height: auto;
float: left;
display: block;
}
.woocommerce-message {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 4%;
width: 90%;
height: 50px;
line-height: 50px;
padding-left: 25px;
color: #1a4265;
font-family: Verdana;
border: 1px solid #1a4265;
}
.woocommerce-message a, a:visited {
color: blue;
}
.woocommerce-message a:hover {
color: #000;
}
.page-title {
color: #1A4265;
margin-left: 5%;
}
.woocommerce-result-count {
margin-top: 20px;
margin-left: 5%;
font-family: Verdana;
}
.woocommerce-ordering {
margin-top: 10px;
margin-left: 5%;
font-family: Verdana;
}
#shop ul.products li.product {
padding-top: 50px;
float: left; 
display: block;
width: 20%;
margin-top: 70px;
height: 300px;
}
#shop ul.products li.product:nth-child(1), #shop ul.products li.product:nth-child(2), #shop ul.products li.product:nth-child(3), #shop ul.products li.product:nth-child(4) {
padding-top: 0;
}
.child {
margin-left: 5%;
}
.first-child {
margin-left: 2%;
}
#shop ul.products .onsale {
margin-top: -30px;
display: block;
background: #1a4265;
height: 30px;
line-height: 30px;
text-align: center;
width: 25%;
color: #fff;
font-family: Verdana;
}
#shop ul.products li.product a img {
width: 100%;
height: 200px;
}
#shop .products li.product a {
text-decoration: none;
}
#shop .products li.product a h3 {
margin-top: 10px;
text-align: center;
color: #000;
text-decoration: none;
}
#shop .products li.product:nth-child(4) a h3, #shop .products li.product:nth-child(8) a h3, #shop .products li.product:nth-child(12) a h3, #shop .products li.product:nth-child(16) a h3, #shop .products li.product:nth-child(20) a h3, #shop .products li.product:nth-child(24) a h3, #shop .products li.product:nth-child(28) a h3  {
margin-top: -17px;
}
#shop .products li.product:nth-child(4) .price, #shop .products li.product:nth-child(8) .price, #shop .products li.product:nth-child(12) .price, #shop .products li.product:nth-child(16) .price, #shop .products li.product:nth-child(20) .price, #shop .products li.product:nth-child(24) .price, #shop .products li.product:nth-child(28) .price {
margin-top: -10px;
font-size: 16px;
}
#shop .products li.product:nth-child(4) .button, #shop .products li.product:nth-child(8) .button, #shop .products li.product:nth-child(12) .button, #shop .products li.product:nth-child(16) .button, #shop .products li.product:nth-child(20) .button, #shop .products li.product:nth-child(24) .button, #shop .products li.product:nth-child(28) .button {
margin-top: 5px;
}
#shop .products .star-rating {
display: none;
}
#shop .products .price {
margin-top: 20px;
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
color: #000;
font-family: Verdana;
}
#shop ul.products li.product .button {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
display: block;
background: #1a4265;
color: #fff;
width: 50%;
height: 40px;
line-height: 40px;
font-family: Verdana;
text-align: center;
}
#shop ul.products .last {
border: none;
}
/* 1 product */
.images {
margin-left: 5%;
width: 40%;
float: left;
}
.summary {
height: 460px;
}
div.product .onsale {
margin-left: 5%;
display: block;
color: #fff;
font-family: Verdana;
background: #1A4265;
width: 10%;
text-align: center;
height: 40px;
line-height: 40px;
}
div.product .product_title {
font-family: Verdana;
margin-bottom: 20px;
}
div.product .woocommerce-product-rating {
display: none;
}
div.product .price {
font-family: Verdana;
margin-bottom: 20px;
font-size: 23px;
}
div .product div[itemprop="description"] {
margin-top: 20px;
margin-bottom: 20px;
font-family: Verdana;
}
div.product .quantity {
float: left;
}
div.product .single_add_to_cart_button {
margin-left: 5%;
} 
div.product .woocommerce-tabs .tabs {
margin-left: 5.5%;
list-style: none;
padding: 0;
}
div.product .woocommerce-tabs .tabs li {
float: left;
padding-right: 20px;
}
div.product .woocommerce-tabs .tabs li a {
color: blue;
}
div.product .woocommerce-tabs .tabs li:last-child {
float: none;
}
div.product .woocommerce-tabs #tab-description {
margin-top: 40px;
margin-left: 5%;
width: 90%;
}
div.product .woocommerce-tabs #tab-description h2 {
font-family: Verdana;
}
div.product .woocommerce-tabs #tab-description p {
margin-top: 20px;
}
div.product .woocommerce-tabs #tab-reviews {
margin-top: 40px;
margin-left: 5%;
width: 90%;
}
div.product .woocommerce-tabs #tab-reviews .commentlist {
margin-left: 2%;
}
div.product .woocommerce-tabs #tab-reviews .commentlist li {
margin-top: 50px;
}
div.product .woocommerce-tabs #tab-reviews .star-rating {
display: none;
}
div.product .woocommerce-tabs #tab-reviews .description {
margin-top: 30px;
font-family: Verdana;
text-align: left;
}
div.product .woocommerce-tabs #tab-reviews .comment-respond {
margin-top: 80px;
margin-left: 60%;
font-family: Verdana;
}
div.product .woocommerce-tabs #tab-reviews .comment-respond #review_form #reply_title {
font-family: Verdana;
}
div.product .upsells {
margin-top: 70px;
}
div.product .upsells h2 {
margin-left: 5%;
}
div.product .upsells ul.products li.product .onsale {
margin-left: 0;
} 
.woocommerce /* Dit is de Cart */ {
width: 100%;
display: block;
}
.actions .button, .shipping_calculator .button {
background: #1a4265;
outline: none;
border: 1px solid #fff;
color: #fff;
padding: 5px;
}
.shipping-calculator-form .form-row:nth-child(3) {
margin-top: -40px;
}
.woocommerce-info {
margin-left: 4.5%;
border: 1px solid #fff;
padding: 10px;
margin-bottom: 30px;
width: 70%;
font-family: Verdana;
}
.woocommerce .product-name {
width: 800px;
text-align: center;
}
.woocommerce .product-quantity {
padding-left: 20px;
padding-right: 20px;
text-align: center;
}
.woocommerce .product-price, .woocommerce .product-subtotal {
text-align: center;
}
.woocommerce .input-text {
width: 100px;
}
.woocommerce thead tr td {
width: 200px;
text-align: center;
}
.woocommerce .remove {
color: red;
text-decoration: none;
font-family: Verdana;
font-size: 30px;
}
.coupon {
padding-top: 30px;
padding-bottom: 30px;
}
#coupon_code {
margin-top: -3px;
}
.cart-collaterals {
padding-top: 30px;
}
.cart-collaterals tbody tr th {
width: 300px;
text-align: left;
}
.order-total th {
padding-top: 20px;
padding-bottom: 20px;
}
.shipping_calculator .shipping-calculator-button {
font-size: 20px;
}
.shipping_calculator .shipping-calculator-form select, .shipping_calculator .shipping-calculator-form input[type=text]{
margin-left: -35%;;
}
.woocommerce .woocommerce-billing-fields { /* Dit is de Checkout */
margin-top: 30px;
}
.woocommerce .woocommerce-billing-fields input[type=text], .woocommerce .woocommerce-billing-fields select, .woocommerce .woocommerce-billing-fields textarea, .woocommerce .woocommerce-billing-fields input[type=password]{ 
position: absolute; left: 40%;
padding: 5px;
width: 200px;
font-family: Verdana;
}

.woocommerce .woocommerce-shipping-fields input[type=text], .woocommerce .woocommerce-shipping-fields select, .woocommerce .woocommerce-shipping-fields textarea, .woocommerce .woocommerce-shipping-fields input[type=password]{ 
position: absolute; left: 40%;
padding: 5px;
width: 200px;
font-family: Verdana;
}
.woocommerce .shipping_calculator input[type=text], .woocommerce .shipping_calculator select, .woocommerce .shipping_calculator textarea, .woocommerce .shipping_calculator input[type=password]{ 
position: absolute; left: 40%;
padding: 5px;
width: 200px;
font-family: Verdana;
}
.woocommerce .form-row {
margin-top: 20px;
display: block;
}
#shipping_address_2_field, #billing_address_2_field {
height: 20px;
}
#ship-to-different-address {
margin-top: 30px;
}
#order_comments_field {
padding-top: 20px;
margin-bottom: 230px;
}
#order_comments_field label {
margin-right: 20px;
margin-left: 0;
}
#order_comments {
position: absolute; left: 50%;
height: 200px;
width: 40%;
max-width: 50%;
}
#order_review_heading {
font-size: 25px;
margin-top: 50px;
}
.woocommerce .shipping-calculator-form {
margin-bottom: 30px;
}
.woocommerce .shipping-calculator-form .form-row {
height: 20px;
}
.shop_table {
margin-top: 10px;
margin-left: 7.5%;
}
.shop_table thead tr th, .shop_table tbody tr td {
width: 200px;
}
.shop_table tfoot tr {
text-align: left;
}
.shop_table tbody tr {
text-align: left;
}
.shop_table .cart_item .product-name, .shop_table .cart_item .product-total {
text-align: left;
}
.shop_table thead tr .product-name, .shop_table thead tr .product-total {
text-align: left;
font-weight: bold;
padding-bottom: 5px;
}
tr.cart-subtotal th{
padding-top: 30px;
}
.payment_methods li {
margin-top: 20px;
margin-bottom: 20px;
}
.order_details {
margin-bottom: 20px;
display: block;
}
.woocommerce p {
margin-bottom: 20px;
}
.customer_details {
margin-bottom: 20px;
}
.myaccount_user /* Dit is het My Account */ {
margin-bottom: 20px;
}
.order-number, .order-date, .order-status, .order-total {
text-align: left;
}
.order-number span, .order-date span, .order-status span, .order-total span {
margin-top: 10px;
display: block;
}
.order .order-status, .order-status span {
margin-left: 20%;
display: block;
}
.my_account_orders {
margin-bottom: 20px;
}
.title {
text-align: left;
}
.title h3 {
font-size: 25px;
}
.edit {
text-align: left;
font-size: 20px;
}
.address  {
margin-top: 40px;
float: left;
}
.address:nth-child(2) {
margin-left: 20%;
}
.col-1 .title h3, .col-2 .title h3 {
margin-bottom: 10px;
}
}

bron · 7 jul 2014

Je hebt nu achtereenvolgens:

Code:

width >= 1001 [COLOR="#0000FF"]and[/COLOR] device-width >= 1001
width <= 730  [COLOR="#0000FF"]or[/COLOR]  device-width <= 730
width  > 731  [COLOR="#0000FF"]and[/COLOR] device-width >= 731

Klopt dit met je ontwerp?

Media queries werken in alle goede browsers. Bij IE (pffff) werkt het niet in ie6/7/8 (maar die zijn niet 'modern'). Wil je het ook laten werken in ie7/8...

Code:

<!--[if lt IE 9]>
<script src="scripts/html5.js"></script>
<script src="scripts/respond.min.js"></script>
<![endif]-->

Download deze scripts en zet ze in een lokale map op de webserver.

Suc6.

*** edit / Browser Media Query support
http://caniuse.com/css-mediaqueries

jorenman · 8 jul 2014

Als ik alle CSS scripts erop zet hoort er normaal geen probleem te zijn, want ze werken alle drie goed.
Alleen het probleem is dat ze elkaar beïnvloeden, want als ik bij de een 'margin-top: 10px' heb staan en bij de ander niks over margin dan neemt ie automatisch 'margin-top: 10px' aan, terwijl dat bijvoorbeeld alleen bij de tablet versie hoort en niet bij de desktop versie.

Weet iemand hoe ik ervoor zorg dat de verschillende stylesheets elkaar niet beïnvloeden?

bron · 9 jul 2014

Je kunt dit eventueel op een andere manier aanpakken, zie de volgorde hieronder. Hierdoor wordt de css ook minder groot. De getallen heb ik als voorbeeld gegeven, die kun je zelf kiezen, zie deze lijst

@media
screen : alle gemeenschappelijke css voor alle resoluties
screen and min-width=600 : css aanpassingen voor res > 600
screen and min-width=1200 : css aanpassingen voor res > 1200
screen and min-width=1900 : css aanpassingen voor res > 1900

*** aanvulling: marktaandeel resoluties (voor wat het waard is)
Worldwide http://www.w3counter.com/globalstats.php
Europa http://stats.areppim.com/stats/stats_screenresxtime_eu.htm
Nederland http://gs.statcounter.com/#resolution-NL-monthly-201306-201406

jorenman · 10 jul 2014

Oke jongens,
Ik ben erachter gekomen hoe het werkt en ik wil het graag aan jullie vertellen, zodat jullie later geen problemen hierbij hebben.

Het maakt schijnbaar heel veel uit wat de volgorde is van je CSS Media Queries, hoe deze volgorde is, hangt af van je site.
Ik heb meerdere dingen geprobeerd, maar ik heb geen duidelijk verband gevonden, je moet het gewoon een beetje proberen.

Wat ook heel erg belangrijk is, is hoe jij je media queries opschrijft in je HTML/CSS code (ik gebruik liever meerdere CSS bestanden, want dat vind ik overzichtelijker).

Om even aan te geven:
'and' betekent 'en'
een komma (',') betekent of.

Hier even een voorbeeldje:

HTML:

<link href="tablet.css" media="only screen and (min-width: 785px) and (max-width: 1000px), only screen and (min-device-width: 785px) and (max-device-width: 1000px)" rel="stylesheet" type="text/css" />

Hierbij zeg je:
Ik gebruik tablet.css als de minimale breedte 785 pixels is en de maximale breedte 1000 pixels is OF ik gebruik tablet.css als de minimale breedte van het apparaat 785 pixels is en de maximale breedte van het apparaat 1000 pixels is.

Hierbij is mijn eindresultaat van mijn HTML code die linkt naar mijn CSS bestanden:

HTML:

<link href="<?php bloginfo('template_directory'); ?>/style.css" media="only screen and (min-width: 1001px), only screen and (min-device-width: 1001px)" rel="stylesheet" type="text/css" />

<link href="<?php bloginfo('template_directory'); ?>/tablet.css" media="only screen and (min-width: 785px) and (max-width: 1000px), only screen and (min-device-width: 785px) and (max-device-width: 1000px)" rel="stylesheet" type="text/css" />

<link href="<?php bloginfo('template_directory'); ?>/bigmobile.css" media="only screen and (min-width: 481px) and (max-width: 785px), only screen and (min-device-width: 481px) and (max-device-width: 785px)" rel="stylesheet" type="text/css">

<link href="<?php bloginfo('template_directory'); ?>/mobile.css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css">

Zoals je hier ook ziet, ik begin met het grootste en eindig met het kleinste, maar als ik begon met het kleinste en eindigde met het grootste, kreeg ik een heel ander effect.

bron · 10 jul 2014

Ziet er okee uit. Een klein dingetje bij "tablet.css", daar zou 786px moeten staan om een overlap met "bigmobile.css" te voorkomen.

De phone vervanger wordt Full HD 1080x1920 px, zoals Samsung S4 (krijgt alleen style.css). Of 1704x960 px, zoals iPhone 6 (krijgt style.css + tablet.css). En wat te denken van de volgende generatie 3840x2160 px tablets.

Dit is de reden waarom ik @media niet gebruik om uit te zoeken of het een phone, tablet of desktop is. Je kunt @media alleen gebruiken om te bepalen of het low, mid, of high resolution is. Er is geen betrouwbare manier om te achterhalen of het een phone of tablet is omdat je niet kunt uitlezen hoe groot het scherm is in inches.

De vele mobile-detect scripts (php, js, enz.) lopen altijd achter bij de werkelijkheid omdat er in hoog tempo nieuwe mobiles op de markt komen.

*** edit: je hebt gelijk dat je van groot naar klein of juist omgekeerd kunt ontwerpen. Als je van klein naar groot ontwerpt dan heet dat een mobile-first ontwerp.

Media CSS queries werken niet+

jorenman

Gebruiker

bron

Moderator

jorenman

Gebruiker

jorenman

Gebruiker

bron

Moderator

jorenman

Gebruiker

bron

Moderator

jorenman

Gebruiker

bron

Moderator

Nieuwste berichten

Wij waarderen jouw privacy