• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

CSS media queries

Status
Niet open voor verdere reacties.

jorenman

Gevestigd lid
Lid geworden
7 jan 2014
Berichten
397
Waarderingsscore
0
Ik ben bezig om een responsive design te maken voor de website http://www.silverworx.nl
Het enige probleem is dat de website device2.css niet te pakken krijgt.
Dit hoort eigenlijk te horen als de grootte van het beeldscherm of de grootte van het apparaatscherm niet groter is dan 730 pixels, helaas gebeurt dit niet.

Weet iemand hoe ik dit moet oplossen?
 
Olaa,

Heb je misschien iets meer informatie? Voorbeelden van script bijvoorbeeld, dit is wel erg weinig.
 
Bekijk bijlage 214343Bekijk bijlage 214343Ik zie op dit moment het probleem al met de browsers.
Ik heb deze code in mijn <head> staan:
HTML:
<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 href="<?php bloginfo('template_directory'); ?>/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 730px), only screen and (max-device-width: 730px)" href="<?php bloginfo('template_directory'); ?>/device2.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 1000px), only screen and (max-device-width: 1000px)" href="<?php bloginfo('template_directory'); ?>/device3.css" />
</head>

Het probleem is, dat de browser alleen device2.css of device3.css moet pakken, maar op dit moment pakt ie ze allebei en overlappen ze elkaar een beetje (dit zie je goed op de foto).
Dus hoe zorg ik ervoor dat ze maar 1 CSS bestand pakken?Knipsel.PNG
 
Moet je daar ook geen minimale waarde bij invullen.
Bij een schermbreedte van 600px voldoet je querie aan beide stylen; 600px is immers kleiner dan 730px en ook kleiner dan 1000p.
 
Dus dan wordt dit de code?

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


---------- Bericht toegevoegd op 19:21 ---------- Vorige bericht was op 12:23 ----------

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;
}
}
 
Ik zie toch verschillen wanneer ik het scherm verklein. Heb je meerdere browsers getest?
 
Als het goed is, zal nu alles moeten werken.

---------- Bericht toegevoegd op 21:44 ---------- Vorige bericht was op 12:59 ----------

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 benvloeden, 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 benvloeden?
 
Bij een schermbreedte van 600px voldoet je querie aan beide stylen; 600px is immers kleiner dan 730px en ook kleiner dan 1000p.

Maak je media queries preciezer door er behalve een max-width, ook een min-width aan te koppelen. Er wordt dan gekeken naar de breedte en in welke querie die past, bijvoorbeeld:

/* DESKTOPS */ @media (min-width: 980px)
/* TABLETS */ @media (min-width: 481px) and (max-width: 979px)
/* MOBILE */ @media (max-width: 480px)
 
Ik heb op dit moment dit in mijn head staan qua styles:
HTML:
<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">
<link href="<?php bloginfo('template_directory'); ?>/mobile2.css" media="only screen and (min-width: 481px), only screen and (min-device-width: 481px), only screen and (max-width: 649px), only screen and (max-device-width: 649px)" rel="stylesheet" type="text/css">
<link href="<?php bloginfo('template_directory'); ?>/mobile3.css" media="only screen and (min-width: 650px), only screen and (min-device-width: 650px), only screen and (max-width: 785px), only screen and (max-device-width: 785px)" rel="stylesheet" type="text/css">

Het probleem is nu, is dat altijd 1 van 3 styles niet werkt, weet iemand waardoor dit komt?

---------- Bericht toegevoegd op 18:57 ---------- Vorige bericht was op 14:33 ----------

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.
 
Telkens werkt een van je css-bestanden dus niet. Heeft dat te maken met de volgorde waarin ze in je broncode staan? M.a.w., als je de tablet onderaan hebt staan, wordt dan de tablet-css niet gepakt? En wat is dan het effect wanneer je de volgorde verandert? Daar ben ik wel benieuwd naar.
 
misschien kun je het eenvoudiger maken en alle stijlen in 1 stylesheet doen?

css:
Code:
/*device 1*/
@media only screen and (min-width:xxx) and (max-width:xxx){
     .style{
            /*blablabla*/
      }
}
/*device 2*/
@media only screen and (min-width:xxx) and (max-width:xxx){
     .style{
            /*blablabla*/
      }
}
/*device 3*/
@media only screen and (min-width:xxx) and (max-width:xxx){
     .style{
            /*blablabla*/
      }
}
/*device 4*/
@media only screen and (min-width:xxx) and (max-width:xxx){
     .style{
            /*blablabla*/
      }
}

EDIT: oh je had het al gefixt zie ik...
 
Laatst bewerkt door een moderator:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan