CSS voor mobiel werkt niet

Status
Niet open voor verdere reacties.

vacances2000

Gebruiker
Lid geworden
28 jan 2013
Berichten
113
Beste,
Enige tijd geleden werkte het onderstaande. Helaas nu niet meer om een onbekende reden.

In de HTML sheet heb ik:

<meta name="viewport" content="width=device-width, initial-scale=1">

- - - - - - - - -

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "https://www.website.com/m/";
}
//-->
</script>

- - - - - - - - - -

in de CSS sheet zet ik de standaard css boven die bedoelt voor de mobiele site en ziet de code er als volgt uit:

@media only screen and ( max-width: 40em ) /* 1000 */
{
#layername
{
position: relative;
visibility: hidden;

enzovoort
}

}

enig idee wat er verder mis zou kunnen zijn?

Dank voor jullie ideeen .

Vriendelijke groeten,

Jonathan
 
enzovoort is geen geldige CSS :cool:

(en ja, misschien zit de fout wel in die syntax die we niet zien, daarom altijd alle relevante code tonen zonder geknip)

Verder is ook onduidelijk wat er niet werkt, en wat er nou precies gebeurd. helaas heb ik net mijn glazen bol op de grond laten vallen, dus is het lastig... ;-)
 
Beste PHP4u,
Hierbij de html:
HTML:
<head>
<meta name="Keywords" content="website"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="websitel" />
<meta name="description" content="website"/>
<meta name="author" content="website.com"/>
<meta name="copyright" content="website.com Copyright (c) 2018"/>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="robots" content="index,follow"/>

<link rel="stylesheet" type="text/css" href="https://www.website.com/cssstandard.css">

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "https://www.website.com/m/";
}
//-->
</script>

<script>
	var $boxs = $("#parent > .box");
var $btns = $(".btn").on("click", function() {
  
  var active = 
    $btns.removeClass("active")
      .filter(this)
      .addClass("active")
      .data("filter");
  
  $boxs
    .hide()
    .filter( "." + active )
    .fadeIn(450);

});
	</script>

</head>

<body>
<div id="wrapper">

<header class="sticky">

</header>

<div id="layer2">
</div>

<div id="thematic-quality" class="layer3">
</div>

<div id="thematic" class="layer3">
</div>

<div id="collection" class="layer3">
</div>

<div id="footer">
</div>

- - - - - - - - - - - - - -

Hierbij de CSS:

HTML:
@charset "utf-8";
/* CSS Document */

/*format*/
body {
	font-family: "Lucida Sans Unicode", "Lucida Grande", arial, helvetica, sans-serif;
	color:#9F9F9F;
	padding-top: 84px;
	font-size: normal;
    list-style-type:none;
	background: #ffffff;
}



a:link, a:visited, a:active {color: #9F9F9F;}
a:hover {color: #00bfff}
a:link, a:visited, a:active, a:hover{text-decoration: none;}

H1 {
	color:#3B3B3B;
    font-size:24px;
	text-align: left;
    line-height:10px;
}

h1 span{
	color: #00bfff; 
	text-transform: uppercase; 
	font-weight: 800;
	line-height: 30px;
	}

h2 {
   color:#666666;
   font-size: large;
   text-align:left;
   line-height:15px;
}

h3 {
    color:#929292;
    font-size:small;
    line-height:15px;
}

h4 {
   color:#929292;
   text-decoration:underline;
   font-size: larger; 
}

h5 {
	color:#929292;
   font-size: large;
   text-align:left;
   line-height:15px;
	text-transform: uppercase;
}

p{
    font-size:small;
    line-height:20px;
	}
    
img{
border-radius:10px;
border: 1px #000000;
width:100%;
}

ul.leaf{
list-style-image:url('images/v-list.png');
 }

ul.leaf img{width: 50%; height: 50%;}
 
#title{
	position: relative;
    float:left;
    padding: 0 1%;
    text-align:center;
    font-size: 150%;
    font-weight:700;
    font-family: Bradley Hand ITC, verdana, sans-serif;
    top:0%;
    margin: 0 auto;
}

header{
        position:fixed;
        width:85%;
        height:100px;
        align:center;
        z-index:999;
        top:0;
        border-radius:0 0 10px 10px;
        border-bottom: 1px #000000;
        transition:all 1s ease;
		background-color: #ffffff;
        color:#848484;
        margin: 0 auto;
		display: block;
 }


@media only screen and (max-device-width: 480px) {
        header {
            height: 400px;
        }
}
/* Sticky*/

/*Sticky header*/
.sticky{
        background-color:#848484;
        color:#ffffff;
        transition:all 1s ease;
        height: 84px;
		opacity: 0.95;
}

/*Sticky titles*/
.sticky-container{
  min-height: 1000px;
  position: relative;
}

/*Collection pages*/
.sticky-box{
  position: -webkit-sticky;
  position: sticky;
	height: 35px;
  	top: 105px;
	width: 100%;
	background-color:#D8D8D8;
	color: #ffffff;
	font-size: large;
	font-family: helvetica, arial, sans-serif;
	margin-bottom: 10px;
	line-height: 35px;
	text-indent: 15px;
	z-index:3;
		}


.sticky-container-left{
  min-height: 300px;
  position: relative;
}

.sticky-container-right{
  min-height: 300px;
  position: relative;
	background-color: #ffffff;
	box-shadow: 1px 10px 10px #848484;
}

	.sticky-box23{
  position: -webkit-sticky;
  position: sticky;
	height: 35px;
  	top: 105px;
	width: 100%;
	background-color:#00bfff;
	color: #ffffff;
	font-size: large;
	font-family: helvetica, arial, sans-serif;
	margin-bottom: 10px;
	line-height: 35px;
	text-indent: 15px;
	z-index:3;
	display: flex;
		border-radius: 10px 10px 0 0;
}	
	
/*END OF STICKY*/

#wrapper{
position:absolute;
margin: 0 auto;
width:85%;
left:10%;
background-color:#ffffff;
}

.after-box{clear: both; height: 20px;}



.parallax, .parallax2, .parallax3{
	position: relative;
	float: left;
	width: 100%;
	
	/* The image used */
    

    /* Set a specific height */
    height: 400px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.parallax{background-image: url(images/santorini.jpg);}
#cta{margin: 2% 0 1% 0;}

.parallax2{background-image: url(images/hotel-infinity-pool-bali.jpg);}
#cta2{margin: 2% 0 1% 0;}

.parallax3{background-image: url(images/landscape-bali.jpg);}
#cta3{margin: 2% 0 1% 0;}


#scroll-down{
           left:-9999px;
           height:0px;
           }

/*end of format*/

/* Homepage*/

/* MAIN*/
#layer1{
    position:relative;
    height:auto;
    float:left;
    width:100%;
    text-align:center;
    margin:0 auto;
    margin-top:1%;
    vertical-align:middle;
}
 
.layer3{
    position:relative;
    float:left;
    width:99%;
    border:solid 1px #ffffff;
    border-radius:10px;
}

/*Destination menu*/

#destinationmenu{
	line-height: 25px;
	position: relative;
	width: 70%;
}

#destionationmenu ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
	background-color: #676767;
}

#destionationmenu li{
	font-size: normal;
	padding: 0;
}

#destinationmenu ul li{
	display: inline;
}

#destinationmenu ul ul{
	background-color: #d8d8d8;
	list-style-type: none;
}

#destionationmenu li li{
	
}


/*Layer 2*/

#layer2{
    position:relative;
	float: left;
	width: 100%;
	height: auto;
	border-radius: 10px;
 }

#topdestinations{
	 position:relative;
 	float:left;
	padding: 1%;
 	width:1%;
	list-style-type: none;
	display: inline-block;
}

#searchbox{
	 position: relative;
 	float:left;
	 width: 30%;
	vertical-align: middle;
	 padding: 2%;
	 border-radius: 10px;
 }

#searchbox img{width: 25%; height: 15%; z-index: 3; border-radius: 0px !important; }

#layer2destinationright{
	 position:relative;
 	float:left;
 	width:57%;
	vertical-align: middle;
	margin-left: 2%;
}

@media only screen and ( max-width: 40em ) /* 1000 */
		{
			#layer2destinationright
			{
				visibility: hidden;
			}
            
		}

/*End of layer 2*/

/*qualityboxs*/

.quality{
    position:relative;
    float:left;
	width: 27%;
	min-height: 250px;
    display:inline-block;
    margin: 2% 0 0 3%;
    border-radius: 5px;
	padding: 0% 1% 0% 1%;
}

.quality #qualityimg{
	position: relative; 
	float: left;
}

.quality #qualityimg img{
	margin-bottom: 2%; 
	height: 150px;
	display: block;
    margin-left: auto;
    margin-right: auto;}

#qualitycriteria{
	position: relative;
	float: left;	
	display: block;
    margin-left: auto;
    margin-right: auto;
}

/*Other destinations*/

#otherdestinationsbox{
    position:relative;
    float:left;
	left: 0.5%;
    margin: 0 auto;
    margin-top:1%;
    width:99%;
	top: 0;
    border-radius:10px 10px 0 0;
    padding: 0.5% 0 3% 0;
}

.destinationbox1, .destinationbox2, .destinationbox3{
    position:relative;
    font-size:smaller;
    float:left;
    min-width:25%;
	height: 300px;
    margin:1%;
 }
	 
/*end of Homepage*/ 

/*product*/
.btn {
  background: #00FF00;
  background-image: linear-gradient(to bottom, #00bfff, #2980b9);
  -webkit-border-radius: 14;
  -moz-border-radius: 14;
  border-radius: 14px;
	border: none;
  color: #ffffff;
  font-size: x-large;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #3cb0fd;
  background-image: linear-gradient(to bottom, #3cb0fd, #00bfff);
  text-decoration: none;
}

.btn a:visited{color: #ffffff;}
.btn a:active{color: #ffffff;}

#book{
     position:absolute;
	float: left;
	left: 0;
    width:98%;
    font-size:large;
    text-align:right;
	height: auto;
	padding: 2% 2% 2% 0%;
	background-color: #40ff00;
	bottom: 0;
	border-radius: 0 0 5px 5px;
}

#book a{
color:#ffffff;
font-weight:700;
margin: 0 0 0 2%;
 }
 
#book img{width:7%; vertical-align:text-bottom; padding-left:5px;}
     
 /*End of product*/

/*Category*/

.category{
    position:relative;
    float:left;
	width: 27%;
	min-height: 330px;
    display: inline-block;
    margin: 2% 0 0 3%;
    border: 1px solid #d8d8d8;
    border-radius:5px;
	padding: 0% 1% 0% 1%;
}

.category #catimg img{width: 99.5%; height: 99.5%;}
a .category #book{color: #ffffff; font-weight: 900;}
.category #book{background-color: #00bfff;}
     
 /*End of category*/

/*Features*/

.features{
    position:relative;
    float:left;
	width: 45%;
	min-height: 200px;
    display: inline-block;
    margin: 1% 0 0 2%;
    border-radius:5px;
	padding: 0% 1% 0% 1%;
	font-size: 14px;
}


/*Hotel Collection pages*/
.collection{
    position:relative;
    float:left;
	width: 45%;
	height: 430px;
    display: inline-block;
    margin: 2% 0 0 3%;
    border: 1px solid #d8d8d8;
    border-radius:5px;
	padding: 0%;
}

.collection #text-collection{
     position:absolute;
	float: left;
	left: 0;
	text-indent: 10px;
    width:98%;
    text-align:left;
	height: auto;
	padding: 2% 2% 2% 0%;
	background-color: #ffffff;
	top: 0;
	border-radius: 5px 5px 0 0;
}

.collection img{border-radius: 5px;}
.collection #book{background-color: #ffffff;}
.collection #book a{color: #848484;}


/* End of Hotel Collection pages*/


/*Footer*/
#footer{
    position:relative;
    float:left;
	left: 0.5%;
    margin: 0 auto;
    margin-top:1%;
    width:99%;
	top: 0;
    border-radius:10px 10px 0 0;
    padding: 0.5% 0 3% 0;
    background-color:#d8d8d8;
	height: auto;
	text-align: center;
}

.footer-content1{
    position:relative;
    font-size:smaller;
    float:left;
    min-width:30.33%;
	height: 260px;
    margin:1%;
 }

 .footer-content2{
    position:relative;
    font-size:smaller;
    float:left;
    min-width:30.33%;
	 height: 260px;
    margin:1%;
	 border-left: #000000 solid 1px;
 }
 
#footer .footer-content2 li img{width: 50px; height: 50px; position: relative; float: left; margin: 3px; left:10%;}

 .footer-content3{
    position:relative;
    font-size:smaller;
    float:left;
    min-width:30.33%;
	 height: 260px;
    margin:1%;	 
	 border-left: #000000 solid 1px;
 }

/*end of Footer*/

/*Newsletter*/
#mc_embed_signup{
border:dashed 1px #000000;
margin:0% 0 3% 3%;
border-radius:10px;
clear:left; 
font:14px Helvetica,Arial,sans-serif;  
width:250px;
padding:5px;
}
	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
       
       
#chatbox{

 }
 
 #mail-contact{
position:relative;
  }
 
 #img.mail-contact{

  }
 
  .mail-contact{
 float:right;
 max-width:25px;
 max-height:25px;
   }
  
  #scrollToTop{
  position:fixed;
  float:left;
	left: 0.5%;
  width:50px;
  height:50px;
  top:560px;
   }


/*Media*/
.media{
	position: relative;
	float: left;
	width: 100%;
}

/*video*/
.video, .gallery{
	position:relative;
    float:left;
	width: 45%;
	height: auto;
    display: inline-block;
    margin: 2% 0 0 3%;
	padding: 0%;
	z-index: 998;
	
}

/*photo gallery*/

row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to eachother */
.column {
  float: left;
  width: 30%;
	margin: 0% 0% 0% 0.5%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1001;
  padding-top: 50px;
  left: 10%;
  top: 12%;
  width: 85%;
  height: 80%;
  overflow: hidden;
  background-color: #d8d8d8;
}

/* Modal Content */
.modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 40%;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
	background-color: #848484;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: #848484;
  padding: 2px 16px;
  color: white;
	margin-bottom: 1%;
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

/*navigation*/

.logo{
	position: relative;
	float: left;
	left: 0;
	width: 23%;
	display: block;
	white-space: nowrap;
}

.navigationbox{
	position: relative;
	float: left;
	width: 75%;
}

.brand{
	position: relative;
	float: left;
	font-family: Freestyle Script, sans-serif;
	font-size: xx-large;
	font-weight: 700;
}

		#nav
		{
            width: 60%; /* 1000 */
			min-width:50%;
            font-weight: bolder;
            font-size:x-small;
			position: relative;
            float:left;
            left:5.5%;
            margin-left: -30em; /* 30 480 */
            z-index:999;
            margin: auto;
		}

			#nav > a
			{
				display: none;
			}

			#nav li
			{
				position: relative;
                list-style-type:none;
			}
				#nav li a
				{
					color: #fff;
                    font-size:larger;
					display: block;
				}
				#nav li a:active
				{
					background-color: #d8d8d8 !important;
				}

			#nav span:after
			{
				width: 0;
				height: 0;
				border: 0.313em solid transparent; /* 5 */
				border-bottom: none;
				border-top-color: #ffffff;
				content: '';
				vertical-align: middle;
				display: inline-block;
				position: relative;
				right: -0.313em; /* 5 */
			}

			/* first level */

			#nav > ul
			{
				height: 3.75em; /* 60 */
				background-color: #848484;
			}
				#nav > ul > li
				{
					width: 20%;
					height: 100%;
					float: left;
				}
					#nav > ul > li > a
					{
						height: 100%;
						font-size: 1.5em; /* 24 */
						line-height: 2.5em; /* 60 (24) */
						text-align: center;
					}
						#nav > ul > li:not( :last-child ) > a
						{
							border-right: 1px solid #848484;
						}
						#nav > ul > li:hover > a,
						#nav > ul:not( :hover ) > li.active > a
						{
							background-color: #848484;
						}


				/* second level */

				#nav li ul
				{
					background-color: #d8d8d8;
					display: none;
					position: absolute;
					top: 100%;
				}
					#nav li:hover ul
					{
						display: block;
						left: 0;
						right: 0;
					}
						#nav li:not( :first-child ):hover ul
						{
							left: -1px;
						}
						#nav li ul a
						{
							font-size: 1.25em; /* 20 */
							border-top: 1px solid #d8d8d8;
							padding: 0.75em; /* 15 (20) */
						}
							#nav li ul li a:hover,
							#nav li ul:not( :hover ) li.active a
							{
								background-color: #d8d8d8;
							}


		@media only screen and ( max-width: 40em ) /* 1000 */
		{
			#nav
			{
				width: 100%;
				position: static;
				margin: 0;
			}
            
		}

		@media only screen and ( max-width: 40em ) /* 640 */
		{
			html
			{
				font-size: 75%; /* 12 */
			}

			#nav
			{
				position: relative;
				top: auto;
				left: auto;
                bottom:auto;
			}
            
				#nav > a
				{
					width: 3.125em; /* 50 */
					height: 3.125em; /* 50 */
					text-align: left;
					text-indent: -9999px;
					background-color: #000000;
					position: fixed;
                    top:0%;
                    left:0%;
				}
					#nav > a:before,
					#nav > a:after
					{
						position: absolute;
						border: 2px solid #fff;
						top: 35%;
						left: 25%;
						right: 25%;
						content: '';
					}
					#nav > a:after
					{
						top: 60%;
					}

				#nav:not( :target ) > a:first-of-type,
				#nav:target > a:last-of-type
				{
					display: block;
				}


			/* first level */

			#nav > ul
			{
				height: auto;
				display: none;
				position: absolute;
				left: 0;
				right: 0;
			}
				#nav:target > ul
				{
					display: block;
				}
				#nav > ul > li
				{
					width: 100%;
					float: none;
				}
					#nav > ul > li > a
					{
						height: auto;
						text-align: left;
						padding: 0 0.833em; /* 20 (24) */
					}
						#nav > ul > li:not( :last-child ) > a
						{
							border-right: none;
							border-bottom: 1px solid #ffffff;
						}

				/* second level */

				#nav li ul
				{
					position: relative;
					padding: 1.25em; /* 20 */
					padding-top: 0;
				}
		}
 
 
 
 
 /*Hotel search*/

#cta2{
	position: relative;
	float: left;
	width: 47%;
	height: 320px;
	padding: 1%;
	border: 1px solid #d8d8d8;
	border-radius: 10px;
	margin: 1% 1% 0 0;
}

#video{
	position: relative;
	float: left;
	width: 47%;
	height: 320px;
	padding: 1%;
	border-radius: 10px;
	margin: 1% 0 0 0;
}

#countrybox{
	position: relative;
	float: left;
	width: 46.5%;
	height: 150px;
	padding: 1%;
	border: 1px solid #d8d8d8;
	border-radius: 10px;
	margin: 1% 1% 0 0; 
}

#countryboximg{position: relative; float: left;}
#countryboximg img{width: 150px; height: 150px;}
#countrydescription{position: relative; float: left; width: 69%; height: 150px; margin-left: 2%;}
#countryboxtitle{position: relative; float: left; height: 10%; margin: 0 1%;}
#countryboxtitle h2{line-height: 0px;}
#countryboxlist{position: relative; float: left; width: 98%; height: 90%; margin: 0 1%; line-height: 25px;}

ul.arrow-right{list-style-type: none;}


#destinationboxes{
	position: relative;
	float: left;
	width: 60%;
}

#stickyboxes-right{
	position: relative;
	float: left;
	width: 60%;
}

#countrybox2{
	position: relative;
	float: left;
	width: 46.5%;
	height: 150px;
	padding: 1%;
	border: 1px solid #d8d8d8;
	border-radius: 10px;
	margin: 1% 1% 0 0;
	font-size: 8px;
}

#countryboximg2{position: relative; float: left;}
#countryboximg2 img{width: 100px; height: 100px;}
#countrydescription2{position: relative; float: left; width: 34%; height: 100px; margin-left: 2%;}
#countryboxtitle2{position: relative; float: left; height: 10%; margin: 0 1%;}
#countryboxtitle2 h2{line-height: 0px;}
#countryboxlist2{position: relative; float: left; width: 98%; height: 90%; margin: 0 1%; line-height: 25px;}
 
 
 /*Landingpages*/

/*Titel*/
.hotelname{
	font-size: x-large;
	color: #00bfff;
}

/*Main Slider*/
#product-images{
	position: relative;
	float: left;
	left: 7%;
	width: 98%;
}

#map-landing{
	position: relative;
	float: left;
	width: 10%;
	margin-left: 2%;
}
	
/*End of Main Slider*/


/*layer3-left*/
.layer3-left{
	position: relative;
	float: left;
	width: 75%;
	height: auto;
    border: none;
}

.layer3-left3{
	position: relative;
	float: left;
	width: 55%;
	height: auto;
    border: none;
}



/*End of layer3-left*/

/*layer3-right*/
.layer3-right{
	position: relative;
	float: left;
	width: 23%;	
	height: auto;
	margin-left: 1%;
    border: 1px solid #d8d8d8;
	background-color: #d8d8d8;
}

.layer3-right3{
	position: relative;
	float: left;
	width: 43%;	
	height: auto;
	margin-left: 1%;
    border: 1px solid #d8d8d8;
	background-color: #d8d8d8;
}

.roomtype{position: relative; left: 2%;}

.roomtype ul{font-size: 12px;}

.roomtype h2{color:#00bfff;}

.roomdetails{display: inline-block;}

#room1 #book{left: -2%; margin-bottom: 2%; position: relative;}
#room2 #book{left: -2%; margin-bottom: 2%; position: relative;}
#room3 #book{left: -2%; margin-bottom: 2%; position: relative;}
#room4 #book{left: -2%; margin-bottom: 2%; position: relative;}
#room5 #book{left: -2%; margin-bottom: 2%; position: relative;}

/*End of layer3-right*/

/*Tab organisation*/
#landing-images-left{
	position: relative;
	float: left;
	width: 35%;
}

#landing-text-right{
	position: relative;
	float: right;
	width: 62%;
	margin-left: 1%;
}

 /*End of landingpages*/
 
 /*About-us*/
 #testimonials{
    position:relative;
    float:left;
    width:99%;
 }
 
 /*End of About us*/

Dank en vriendelijke groeten,

Jon
 
jQuery library mist, gok ik.

Zie ook mijn vorige post!
 
Goede gok zo! :)
 
Voor de redirect is geen jquery nodig. window.location is gebruikelijk.
Code:
<script type="text/javascript"><!--
if (screen.width <= 699) {
  window.location = "....";
}
//--></script>
Daarna mist idd de jquery lib en het script kan beter in een $( document ).ready() worden gezet.
 
Laatst bewerkt:
offtopic: een iets verbeterde head. De eindslash /> heb ik laten staan omdat ik niet kan zien wat de !doctype is.
Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>websitel</title>
<meta name="description" content="website" />
<meta name="author" content="example.nl" />
<meta name="copyright" content="example.nl Copyright (c) 2018" />
<link rel="stylesheet" type="text/css" href="https://www.example.nl/cssstandard.css" />
meta name="keywords" wordt al jarenlang niet meer gebruikt, die kan er uit.
meta name="robots" alleen gebruiken bij noindex of nofollow, in andere gevallen is hij niet nodig.
 
Laatst bewerkt:
Beste,
Doorgaand op dit thema, blijkbaar is er een verschil tussen versmalde browser en werkelijk mobiel. Afbeeldingen worden in de footer niet aangepast en div's worden niet correct weergegeven op mobiel om maar twee voorbeelden te geven.

Alles in de head is op orde.

Enig idee?

HTML:
<footer>
<div id="footer-content3" class="footer-content3">
	<div id="social-media">
	<h3><span>Follow us on Social Media :</span></h3>
	<li><span><a href="https://www.facebook.com/examplewebsite" target="_blank"><img src="../images/FB-logo.png" alt="Facebook"/></a></span></li>
	<li><span><a href="https://www.instagram.com/examplewebsite" target="_blank"><img src="../images/glyph-icons2.png" alt="Instagram"/></a></span></li>
	<li><span><a href="https://www.twitter.com/examplewebsite" target="_blank"><img src="../images/twitter.png" alt="Twitter"/></a></span></li>
	<li><span><a href="https://www.youtube.com/user/examplewebsite" target="_blank"><img src="../images/YouTube-social-squircle_red_128px.png" alt="Youtube"/></a></span></li>
	<li><span><a href="https://www.flipboard.com/@examplewebsite" target="_blank"><img src="../images/flipboard-icon.jpg" alt="Flipboard"/></a></span></li>
	<li><span><a href="mailto:examplewebsite@gmail.com" target="_blank"><img src="../images/envelope2.jpg" alt="mail"/></a></span></li>
	</div>

	<div class="after-box"></div>
	<div id="footer-content3-other" class="footer-content3-other">
	<h3>Others :</h3>	
	<li><span>Disclaimer</span></li>
	<li><span>Sitemap</span></li>
	<br>
			<h3><li><span>Contact Us</span></li></h3>
		</div>
		</div>	
</footer>

HTML:
.footer-content3{
    position:relative;
    font-size:smaller;
    float:left;
    min-width:30.33%;
	 height: 260px;
    margin:1%;	 
	 border-left: #000000 solid 1px;
 }

footer .footer-content3 img{width: 50px; height: 50px; position: relative; float: left; margin: 3px; left: 10%;}

@media only screen and ( max-width: 40em ) /* 1000 */
		{
			.footer-content3{
				position: fixed;
				bottom: -0.5%;
				left: 0%;
				border: none;
				height: 75px;
				background-color: #d8d8d8;
				padding: 0 2% 2% 2%;
				border-radius: 5px;
				display: block;
				width: 100%;
			}
            
		}

@media only screen and ( max-width: 40em ) /* 1000 */
		{
			.footer-content3 #social-media li img{
				width: 10%;
				height: 10%;
			}
            
		}

@media only screen and ( max-width: 40em ) /* 1000 */
		{
			.footer-content3-other{
				display: none;
			}
            
		}


Bedankt,

Jonathan
 
Beste,
Ter aanvulling en voor de duidelijkheid, m'n footer is opgedeelt in 3 blokken. Echter in kleiner scherm wordt blok 3 weergegeven, terwijl op mobiel wordt blok 2 weergegeven.

Wat gaat er mis?

VG

Jon
 
Dit is nodig om de social buttons netjes te zetten. Ik zal ook nog even naar de blokken kijken.
Code:
#social-media {
	max-width: 21em;
	margin-right: auto;
	margin-left: auto;
}
#social-media img {
	width: 14%;
	height: auto;
}

in kleiner scherm wordt blok 3 weergegeven, terwijl op mobiel wordt blok 2 weergegeven.
Welke blokken wil je zien op groot scherm en welke op smartphone?
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan