Bonjour à tous,
Je suis sur le 1er projet en Responsive Web Design et j’ai presque fini. Mais ce qui me bloque c’est qu’on dirait que le body ou le main n’arrivent pas à s’adapter en responsive. J’ai une grosse marge à droite qui apparait quand j’ouvre la page sur un écran de téléphone.
J’ai vu qu’en ne fixant pas la taille du bloc ayant pour id “tribute-page” le problème se résout, mais j’aimerais vraiment bel et bien attribuer une taille à cet id pour qu’il ne s’étende pas sur toute la largeur du “main”.
Si quelqu’un veut bien m’aider svp
Voici le code html :
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
<body>
<main id="main">
<h1 id="title">
Princess Franny
</h1>
<h2>
The good news of 2020
</h2>
<div id="img-div">
<img id="image" class ="img_border" src="https://i.ibb.co/ww43gFB/Princess-Franny.jpg" alt="Princess Franny">
<figcaption id="img-caption">Credits : Andrae Ricketts from Unsplash</figcaption>
</div>
<div id="tribute-info" ><p>I am honored to create this tribute page for my beautiful baby girl <a href="https://unsplash.com/photos/Q9_zv0LN4jU" target="blank">Franny</a>
: </p>
<ul>
<li>Born just before the beginning of covid19, you brought all the <strong>strength</strong> we would soon need</li>
<li>Full of joy</li>
<li>Vivacious</li>
<li>Very Smart !</li>
<li>Very observant!</li>
<li>Persevering</li>
<li>Courageous</li>
<li>You are the queen of stunts!</li>
<li>And what a beautiful hair you have!</li>
</ul>
<p >I marvel at your progress every day and look forward to seeing what a beautiful person you will become.</p>
<p>In the meantime, here are a lot of <a id="tribute-link" href="https://afroculture.net/coupe-afro-pour-bebes-noirs-et-metis-de-0-a-36-mois/" target="_blank">hairstyle ideas</a> on the Afroculture website to make you pretty curly hair.
</div>
</main>
</body>
et le code css :
body{
font-family: 'Nunito Sans','Poppins','TrebuchetMS', sans-serif;
background-color: #AD7A99;
color: black;
margin: 0;
}
@media and screen (max-width: 460px){
body {
}
}
#main{
background-color: #FBD1A2;
margin: 10px 5px ;
padding: 0; 10px; 0; 10px;
}
@media{
#main{
margin:0;
}
}
#title{
text-align: center;
color: black;
font-size: 100px;
font-family: 'Montserrat';
margin-bottom: 0;
}
@media screen and (max-width : 460px) {
#title{
font-size: 50px;
line-height: 1.2;
}
}
h2{
text-align: center;
color: black;
font-size: 26px;
margin-top: 1%;
margin-bottom: 5%;
}
@media screen and (max-width : 460px) {
h2{
font-size: 16px;
}
}
p{
font-size: 21px;
}
a {
color: #000000;
font-style: bold;
}
a:visited {
color: #74638f;
}
#img-div{
background-color: inherit;
text-align: center;
}
#image{
max-width: 100%;
border-radius: 10%;
max-width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
#img-caption{
color: black;
font-size: 16px;
}
.img_border{
border-color: #AD7A99;
border-width: 25px;
border-style: solid;
}
@media screen and (max-width: 460px) {
#image{
width: 250px;
}
#img-caption{
color: black;
font-size: 12px;
text-align: center;
}
.img_border{
border-width: 12px;
}
}
#tribute-info{
font-size: 21px;
width: 700px;
margin-left: auto;
margin-right: auto;
background-color: inherit;
text-align: left;
display:block;
}
@media and screen (max-width: 460px){
#tribute-info{
font-size: 18px;
width: 300px;
margin-left: 5px;
margin-right: 5px;
}
}
ul {
max-width: 450px;
margin: 0 auto 20px 30px;
text-align: left;
line-height: 1.5;
font-size: 21px;
}
li {
margin: 8px 0;
}
).
you helped me so much. Once your councels applied, i’ll be able to begin my second project.
