I am a first-time coder. I am trying to design a prototype gallery and comics nav page that will switch divs from columns to rows depending on the screen size. I attempted to do this with a media query. The divs appear to change all right, but I do not know why they lose their background images in the process.
Everything CSS-related works just like I want it to before the media query kicks in, whether I design it columns-first or rows-first. Once I resize the browser to get the alternate view the images disappear. If anyone can explain why this is happening, and/or suggest a better route, I would be -extremely- grateful.
Pictures, because I don't have a live site yet: http://ift.tt/1cK2RYy
Code from the desktop to mobile site, if it will help at all.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Desktop to Mobile</title>
<style type="text/css">
body {
background-color: rgba(0,153,153,1);
}
body,td,th {
color: rgba(255,255,255,1);
}
#apDiv1 {
position: absolute;
left: 0%;
top: 0px;
width: 25%;
height: 100%;
z-index: 1;
background-image: url(_ImagesMain/1.jpg);
background-size: cover;
background-position: center;
}
#apDiv2 {
position: absolute;
left: 25%;
top: 0px;
width: 25%;
height: 100%;
z-index: 2;
background-image: url(_ImagesMain/2.jpg);
background-size: cover;
background-position: center;
}
#apDiv3 {
position: absolute;
left: 50%;
top: 0px;
width: 25%;
height: 100%;
z-index: 3;
background-image: url(_ImagesMain/3.jpg);
background-size: cover;
background-position: center;
}
#apDiv4 {
position: absolute;
left: 75%;
top: 0px;
width: 25%;
height: 100%;
z-index: 4;
background-image: url(_ImagesMain/4.jpg);
background-size: cover;
background-position: center;
}
#apDiv5 {
position: absolute;
left: 175%;
top: 0px;
width: 25%;
height: 100%;
z-index: 9;
background-image: url(_ImagesMain/4.jpg);
background-size: cover;
background-position: center;
}
#apDiv6 {
position: absolute;
left: 100%;
top: 0px;
width: 25%;
height: 100%;
z-index: 6;
background-image: url(_ImagesMain/1.jpg);
background-size: cover;
background-position: center;
}
#apDiv7 {
position: absolute;
left: 125%;
top: 0px;
width: 25%;
height: 100%;
z-index: 7;
background-image: url(_ImagesMain/2.jpg);
background-size: cover;
background-position: center;
}
#apDiv8 {
position: absolute;
left: 150%;
top: 0px;
width: 25%;
height: 100%;
z-index: 8;
background-image: url(_ImagesMain/3.jpg);
background-size: cover;
background-position: center;
}
</style>
<!-- Mobile -->
<link href="_CSS/Mobile_CSS.css" rel="stylesheet" type="text/css" media="only screen and (max-width:800px)">
</head>
<body>
<div id="apDiv1">Comics</div>
<div id="apDiv2">Gallery</div>
<div id="apDiv3">Forum</div>
<div id="apDiv4">Store</div>
<div id="apDiv5">Blog</div>
<div id="apDiv6">Patreon</div>
<div id="apDiv7">Commission</div>
<div id="apDiv8">Links</div>
</body>
</html>
The Mobile_CSS.css Referred to:
@charset "utf-8";
#apDiv1 {
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 25%;
z-index: 1;
background-image: url(_ImagesMain/1.jpg);
background-size: cover;
}
#apDiv2 {
position: absolute;
left: 0%;
top: 25%;
width: 100%;
height: 25%;
z-index: 2;
background-image: url(_ImagesMain/2.jpg);
background-size: cover;
}
#apDiv3 {
position: absolute;
left: 0%;
top: 50%;
width: 100%;
height: 25%;
z-index: 3;
background-image: url(_ImagesMain/3.jpg);
background-size: cover;
}
#apDiv4 {
position: absolute;
left: 0%;
top: 75%;
width: 100%;
height: 25%;
z-index: 4;
background-image: url(_ImagesMain/4.jpg);
background-size: cover;
}
#apDiv5 {
position: absolute;
left: 0%;
top: 175%;
width: 100%;
height: 25%;
z-index: 9;
background-image: url(_ImagesMain/4.jpg);
background-size: cover;
}
#apDiv6 {
position: absolute;
left: 0%;
top: 100%;
width: 100%;
height: 25%;
z-index: 6;
background-image: url(_ImagesMain/1.jpg);
background-size: cover;
}
#apDiv7 {
position: absolute;
left: 0%;
top: 125%;
width: 100%;
height: 25%;
z-index: 7;
background-image: url(_ImagesMain/2.jpg);
background-size: cover;
}
#apDiv8 {
position: absolute;
left: 0%;
top: 150%;
width: 100%;
height: 25%;
z-index: 8;
background-image: url(_ImagesMain/3.jpg);
background-size: cover;
}
Aucun commentaire:
Enregistrer un commentaire