everybody.
I’m studying an HTML responsive structure with relative CSS which, on paper, should be very simple, but eventually it isn’t simple for me at all.
In the structure there are a header with a fixed positioned navigator, and a DIV with some internal DIVs having countdown class that must be set with a fixed width. In the code example I’ve inserted only one of these, but adding the others would not change the essence of the problem.
What happens is strange to me: only the navigator and the DIV with fixed width reduce correctly, while the rest, including the body, are reduced much more.
I don’t quite know how to fix the CSS. I did some tests, with poor results.
Can anyone tell me what’s going on and how to fix it?
I am attaching the complete but simplified code: obviously, it is only a scheme, but all the elements involved are there.
<!DOCTYPE html>
<html lang="EN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi08PN5GDeUVVVC/BVt/9Izdsc9SVeVfA1UZbY3sHUlDSyRXhCzHfr6hmPPw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="style.css">
<style>
body{
border: 2px solid Crimson;
/* max-width: 1350px; */
font-weight: 500;
line-height: 35px;
text-rendering: optimizeLegibility;
background-color: salmon;
-webkit-text-size-adjust:none;
}
header{
margin: 0 auto 3em auto;
height: auto;
text-align: center;
border: 1px solid #f00;
}
.navigator{
position: fixed;
width: 100%;
padding: 2vh 5vw;
background: red;
background-repeat: no-repeat;
background-size: cover;
box-shadow: none;
transition: all 0.3s ease;
z-index: 100;
}
.navigator .menuVoices {
border: 1px solid blue;
width: 80vw;
padding: 15px;
margin: 0 auto;
vertical-align: middle;
}
h1{
margin-top: 1.5vh;
padding-left: 1vw;
}
section{
width: 100%;
height: auto;
padding: 2.5em;
margin: auto;
font-size: 25px;
font-weight: 200;
text-align: justify;
color: #f7f9ef;
background-color:#f15985;
}
.wrap {
border: 1px solid blue;
height: auto;
margin: auto;
width: 100%;
}
.countdown {
border: 1px solid black;
width: 1310px;
height: 20vh;
text-align: center;
margin: 0 auto;
}
.countdown .bloc-time {
float: left;
margin-right: 45px;
text-align: center;
}
.countdown .bloc-time:first-child {
margin-left: 23px;
}
.countdown .bloc-time:last-child {
margin-right: 0;
}
.countdown .figure {
position: relative;
float: left;
height: 110px;
width: 100px;
margin-right: 10px;
background-color: yellow;
}
footer {
max-width: 2000px;
width: 100%;
height: 900px;
text-align: center;
background: Azure;
margin: 3vh auto 0 auto;
overflow-x: hidden;
}
</style>
</head>
<body>
<header>
<div class="navigator">
<div class="menuVoices"></div>
</div>
</header>
<section>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</section>
<h1>TESTING FOR RESPONSIVE</h1>
<div class="wrap">
<div class="countdown">
<div class="bloc-time">
<div class="figure"></div>
<div class="figure"></div>
</div>
<div class="bloc-time">
<div class="figure"></div>
<div class="figure"></div>
</div>
<div class="bloc-time">
<div class="figure"></div>
<div class="figure"></div>
</div>
<div class="bloc-time">
<div class="figure"></div>
<div class="figure"></div>
</div>
<div class="bloc-time">
<div class="figure"></div>
<div class="figure"></div>
</div>
</div>
</div>
<footer>
</footer>
</body>
</html>
Every help will be appreciated.
2
Answers
Start trying with changing width of section, it will help to control the responsive
I have taken the liberty to improve the HTML for semantic and accessibility purposes, making use of
<main>,<nav>tags.Regarding your CSS, I think you are better off learning about CSS flexbox and grid as they will help with layout and responsiveness of your site. Learning about media queries will also help you in more minute and specific details, but not needed in this example. I have introduced flexbox here as yours is a simple layout requirement. I have removed some of the unnecessary properties in your CSS as they were creating more problems, such as setting fixed widths and heights on certain elements – those values were clashing with each other and distorting the layout. If you want a dynamic, responsive layout, avoid static values and mostly rely on
padding,margin,flex/grid. Ofcourse, certain components like icons, menu, panels, badges, etc, will require those details.I have provided my solution below. Let me know if you have any questions.