I'm a first time coder, 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 and the divs appear to change all right but I don't 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. But 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'd be -extremely- grateful.
Pictures, because I don't have a live site yet: http://ift.tt/1cK2RYy
and Code from the desktop to mobile site, if it will help at all.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
Is it this part mucking me up?
<meta name="viewport" content="width=device-width">
Or is it how I've handled my divs below?
<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;
}
And so on and so forth until
#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>
And then the end.
<!-- 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>
Aucun commentaire:
Enregistrer un commentaire