0
J'ai créé une sorte d'élément de bannière div en haut de ma page et un second élément transparent a été superposé à une position absolue. Le problème est que les mots de cet élément absolu ne seront pas redimensionnés à mesure que la taille de la page diminue, en d'autres termes, ils ne sont pas très réactifs. Comment puis-je réparer cela?Impossible d'ajuster la réactivité des mots sur l'en-tête
CSS
.full{
min-height: 100%;
background-color: white;
/*background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.3) 90%), url("america/cservice.jpeg");*/
/*background-blend-mode: lighten;*/
padding-top:25px ;
color: #5a5a5a;
/*color: black;*/
padding-bottom: 20px;
text-align: center;
align-items: center;
border-top: 5px solid rgba(0, 0, 102, 0.5);
border-bottom: 5px solid rgba(0, 0, 102, 0.5);
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.image{
width: 100%;
height: 280px;
background-image: url(america/news2.png);
background-size: cover;
background-repeat: no-repeat;
position: relative;
padding-top: 20px;
padding-bottom: 20px;
display: block;
margin: 0 auto;
}
.bor {
position: absolute;
border: 5px solid;
border-color: rgba(255, 255, 255, 0.5);
padding-top:15px;
padding-bottom:;
background-color: rgba(133, 133, 173, 0.4);
left: 0;
right: 0;
bottom: 20;
top: 20;
padding-left: 20px;
padding-right: 20px ;
margin-right: 250px;
margin-left: 250px;
}
h2 {
position: absolute;
width: 100%;
color: black;
font-size: 40px;
padding-top:15px;
font-weight: 900;
}
h4 {
position: relative;
width: 100%;
color: black;
font-size: 30px;
font-weight: 900;
padding-top: 95px;
padding-bottom: 25px;
font-stretch: ultra-expanded;
}
b{
border: 5px solid black;
padding-right: 25px;
padding-left: 25px;
margin-left: 20px;
margin-right: 20px;
color: white;
font-weight: 900;
font-size: 40px;
}HTML
<div class="full">
<div id="section">
<h1 class="text-center">—News Feed—</h1>
<br>
<hr>
<div class="image">
<div class="bor">
<h2>Weekly<b>Report</b></h2>
<br>
<h4>—Catch up on all the latest news regarding the world—</h4>
</div>
</div>
</div>
</div>