Besoin d'aide pour rendre mon site responsive?

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;
}

Hi @Wolalaaa !

Welcome to the forum!

It is hard to understand the issue without seeing it.
Can you provide a link to the project?

Oh so sorry, I was adding the html and css.
Here is the link : https://codepen.io/Wolalaaa/pen/NWbdYxy

Thanks for your quick answer !

The issue is that you are using a width of 700px for the text. On smaller screens it is going to spill over.

When you delete that then it should fix the issue.
But you are also using a lot of media queries for a page that use very little content.

I personally think that for the first couple of projects you do not need to use any media queries.
Use rem or em for font sizes and percentage for width and height.

1 Like

To add on to @jwilkins.oboe’s great advice, I would recommend you always use a narrow-first approach to styling. Narrow your browser in as far as it will go and style the page to look good at that narrow width. This will be your base CSS. Then you can gradually widen the browser window and make adjustments for wider view ports using media queries if needed. With a simple layout like this you will probably not need them though (as long as you do your CSS correctly :slight_smile: ).

It is almost always easier to start narrow and then work your way wider.

1 Like

Thanks so much

@jwilkins.oboe yes that’s the point. I thought i had to give a width to the tribute-page so that the text doesn’t occupy all the body’s width but for sure i will try to do it accorded to your councel “Use rem or em for font sizes and percentage for width and height.”

Without media queries how to make my page fit on smaller screens ?

@bbsmooth If i undrstand what you said, by narrow-first you are speaking about mobile-first ?

(sorry for my english, i’m in Paris and it’s 00:46 right now :slight_smile:)

In this case you don’t need it because basically you just have some text and an image.
For later projects with more content and complex layouts then it would make sense to use media queries.

For example, you can set the font-size:10px; in the body and then use ems for the font in the p tags and heading. Or you can use rem. The default html font size is 16px. 1rem=16px.

You could start by adjusting your h1.
Right now it is hardcoded at 100px. But it forces you to go through different break points and constantly change it.

Instead you could use 5rem or 5.2rem if you want it bigger.
If you test it by resizing the window you will notice that it looks good on all screens 350px and higher.

In codepen, I would suggest using this editor layout to test responsiveness.

I would just go through the elements on the page and set the screen at 350px like I show here. If it looks good here it will probably look good on larger screens.

I think it 100% possible to just use relative fonts and percentages since there is not a lot of content to work with and the layout is pretty simple.

Hope that makes sense.

Yes, it makes sense of course. I avoided using em or rem because i don’t reallly have the habit of using them (it’s somehow new to me) but let’s discover it ;-).

Both of you @jwilkins.oboe and @bbsmooth helped me a lot

Just another little question but maybe it’s not directly related to “responsiveness”.

It’s about the h1 font . I don’t understand why on little screen the good font doesn’t seem to be applied

You set a font size for 50px when the browser is 460px or less.
It is working on my end when I test it.

ooh ok i’ll do it
:pray: you helped me so much. Once your councels applied, i’ll be able to begin my second project.
You know everything !

1 Like

Hahaha I wish I knew everything. :laughing:

When you are finished with the project, you can make another post in the #project-feedback section. That way people can offer suggestions on your project that will help you even more.

:grinning:

ok, cool :slight_smile: for sure i will go the #project-feedback section.

Yes, call it mobile-first if you like. I prefer narrow-first because you can have someone using a large font size on the desktop that needs a “narrow” view.

Ok, thanks :blush:
I’ve never heard “narrow-first” before.