problem med "boxar" i en responsive hemsida
Hej
Jag försöker få till en hemsida HTML5 med responsive design. Jag har ett antal article boxar som ska ligga i mitten på sidan med tanken att dessa ska minska när sidan minskar. Men jag får inte till detta. Vad gör jag för fel?
Dessutom vill jag ha två articles jämte varandra tills det är dags att ha dom ensamma efter varandra. Men sidan verkar flytta ner articles nästan direkt att ligga efter varandra.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>Vara Utomhusbad</title>
<link href="bad2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="hela">
<header>
Header
</header>
<aside class="meny">
Aside
</aside>
<section>
<h1>Section</h1>
<article>art1</article>
<article>art2</article>
<article>art3</article>
<article>art4</article>
</section>
<aside class="news">
Aside
</aside>
<footer>
Footer
</footer>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
* {
margin: 0px;
padding: 0px;
}
h1, h2, h3 {
margin: 0px;
padding: 0px;
}
body {
margin-top: 20px;
font-family: ariel;
}
header, section, footer, aside, nav, article, hgroup {
display: block;
}
html {
-webkit-text-size-adjust:100%;
}
div.hela {
max-width: 1050px; /* Total bredd 1050 px */
margin: auto;
background-color: #7B68EE;
}
header {
width: 100%;
background-color: crimson; /* enbart för test */
height: 50px; /* enbart för test */
}
aside.meny {
width: 15%; /* 15% = 157,5 px */
float: left;
background-color: darkblue; /* enbart för test */
height: 450px; /* enbart för test */
}
aside.news {
width: 15%; /* 15% = 157,5 px */
float: right;
background-color: yellow; /* enbart för test */
height: 450px; /* enbart för test */
}
section {
width: 70%; /* 70% = 735 px*/
float: left;
background-color: green; /* enbart för test */
height: 450px; /* enbart för test */
}
article {
border: 5px solid Maroon;
border-radius: 25px;
float: left;
width: 37.69%; /*277 px = 0,3769% */
height: 100px;
margin: 2.72%; /*20 px = 0,0272% */
padding: 2.72%; /*20 px = 0,0272% */
}
.article {
border: 5px solid Maroon;
border-radius: 25px;
float: left;
width: 37.69%; /*277 px = 0,3769% */
height: 100px;
margin: 2.72%; /*20 px = 0,0272% */
padding: 2.72%; /*20 px = 0,0272% */
}
footer {
width: 100%; /* 100% = 1050 px */
clear: both;
background-color: purple; /* enbart för test */
height: 50px; /* enbart för test */
}
@media screen and (max-width: 800px)
{
section {
background-color: red;
}
}
@media screen and (max-width: 600px)
{
aside.news {
display: none;
}
section {
width: 85%;
}
}
@media screen and (max-width: 400px)
{
aside.meny {
clear:both;
width: 100%;
height: 50px;
}
section {
width: 100%;
}
}
