Having some difficulties creating a wrapper for a responsive image slider. I want it to resize as the window is resized, but it's not working properly. Can anyone help me figure out what I'm doing wrong?
Note* I only need it to be responsive on desktop and tablet down to 500px, mobile has a different layout).
(Apologies if it's messy, I'm new to this)
Edit: Here's a live link to it (placeholder images) : and the slider is overlapping the "Logo" when the browser window is resized, how can I prevent this?
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.cycle.all.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
$('#slider').cycle({
fx: 'scrollHorz',
prev: '#prev',
next: '#next',
timeout: 0,
rev: false
});
</script>
...
CSS:
@charset "utf-8";
/* CSS Document */
@font-face {
font-family: 'my font' ;
src: url(fonts/CuttyFruty.ttf)
}
#wrapper {
display: block;
max-width: 660px;
max-height: 500px;
margin: auto;
position: fixed;
top: 0%;
bottom: 0%;
right: 5%;
}
#container {
display: block;
float: left;
height: auto;
width: 660px;
overflow: aut;
}
...
@media screen and (max-width: 1000px) {
#wrapper, #container, #slider {
width: 100%;
height: auto;
}
}
@media screen and (max-width: 500px) {
...