So I'm trying to create a website and everything works! But when I resize my window to see if it is also Mobile compatible I came to the conclusion that everything is resizing besides my slideshow!!! Can somebody tell me what is wrong in my code??? The div id of my slideshow is "slideshow"
.header-basic {
background-color: #292c2f;
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.15);
padding: 20px 40px;
height: 80px;
box-sizing: border-box;
}
.header-basic .header-limiter {
max-width: 1200px;
text-align: center;
margin: 0 auto;
}
/* Logo */
.header-basic .header-limiter h1 {
float: left;
font: normal 50px Cookie, Arial, Helvetica, sans-serif;
line-height: 40px;
margin: 0;
}
.header-basic .header-limiter h1 span {
color: #5383d3;
}
/* The header links */
.header-basic .header-limiter a {
color: #ffffff;
text-decoration: none;
}
.header-basic .header-limiter nav{
font:16px Arial, Helvetica, sans-serif;
line-height: 40px;
float: right;
}
.header-basic .header-limiter nav a{
display: inline-block;
padding: 0 5px;
text-decoration:none;
color: #ffffff;
font-size: 16px;
opacity: 0.9;
}
.header-basic .header-limiter nav a:hover{
opacity: 1;
}
.header-basic .header-limiter nav a.selected {
color: #608bd2;
pointer-events: none;
opacity: 1;
}
/* Making the header responsive */
@media all and (max-width: 600px) {
.header-basic {
padding: 20px 0;
height: 75px;
}
.header-basic .header-limiter h1 {
float: none;
margin: -8px 0 10px;
text-align: center;
font-size: 24px;
line-height: 1;
}
.header-basic .header-limiter nav {
line-height: 1;
float:none;
}
}
/* For the headers to look good, be sure to reset the margin and padding of the body */
body {
margin:0%;
padding:0%;
background-color: #F2F2F2
}
#slideshow {
margin: 70px auto;
position: absolute;
float: left;
width: 46.3%;
left: 10%;
height: 56.8%;
padding: 0.5%;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
float: left;
}
#slideshow > div{
position: absolute;
top: 0%;
left: 0%;
right: 0%;
bottom: 0%;
width: 5%;
height: 5%;
}
#slideshow > img{
position: absolute;
top: 0%;
left: 0%;
right: 0%;
bottom: 0%;
width: 5%;
height: 5%;
}
#slideshowtext {
text-align: center;
float: right;
padding-right: 0%;
padding-top: 4%;
}
#slideshowtext > img{
box-shadow: 0 0 20px rgba(0,0,0,0.4);
font: Arial, Helvetica, sans-serif;
}
#slideshowtext > p{
padding-top: 75px;
font: 20px Arial, Helvetica, sans-serif;
}
#slideshowtext > h1{
font: normal 50px Cookie, Arial, Helvetica, sans-serif;
line-height: 40px;
margin: px;
color: #ffffff;
text-shadow: 0 0 10px rgba(0,0,0,0.4);
}
#slideshowtext > h1 span{
color: #5383d3;
}
hr {
display: block;
height: 1%;
position: absolute;
border: 0;
border-top: 1px solid #787A7C;
margin: 1em 0;
padding: 0;
top: 85.6%;
width: 100%;
}
#portfolio {
left: 5%;
margin-left: auto;
margin-right: auto;
float: left;
margin: 3%;
padding: 3%;
margin-top: 2%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Rick de Jong - Portfolio" content='width:1080'>
<title>Rick de Jong - Portfolio</title>
<link rel="stylesheet" href="assets/demo.css">
<link rel="stylesheet" href="assets/header-basic.css">
<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 4000);
</script>
</head>
<body>
<header class="header-basic">
<div class="header-limiter">
<h1>
<a href="#">
<span>Rick</span> de
<span> Jong</span>
</a>
</h1>
<nav>
<a href="index2.html" class="selected">Home</a>
</nav>
</div>
</header>
<div id="wrapper">
<div id="Wrappertop">
<div id="slideshow">
<div>
<a href="https://www.youtube.com/channel/UCcAZmwd5nzvh37wPdvpNCMQ" target="_blank">
<img src="fotos\Partnership.png">
</a>
</div>
<div>
<a href="http://www.mi-winkel.nl" target="_blank">
<img src="fotos\Twitterbanner.png">
</a>
</div>
</div>
<div class="vertical-line">
<ul></ul>
</div>
</div>
<div id="slideshowtext">
<img src="fotos\rickpf.jpg" width="47%" height="47%">
<h1>Hallo, ik ben
<span>Rick</span>
</h1>
<p>Welkom op mijn portfolio!
<br>Hiernaast ziet u een slideshow met verschillende
<br> Projecten waar ik aan meewerk.
</p>
</div>
<div class="block_1"></div>
<hr />
</div>
</div>
<div class="maincontent">
<div id="portfolio">
<a href="fotos\portfolio.jpg" targer="_blank">
<img src="fotos\portfolio.jpg" width="30%;">
</a>
</div>
</div>
</body>