Paragraph stays too big for a mobile view (responsive design)-CodePudding

I'm new to all of this. Trying to stop my text from going over on mobile view. As soon as I changed the text width in CSS this issue arose. I don't want the text stretching all the way across the screen in a desktop view.

Apparently my post is mostly code and I need more details

Both desktop and mobile screenshots below.

Desktop:

Mobile:

HTML: <!DOCTYPE html>
<html>
  <head>
    <title>Day on the Pier</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="Style.css" />
  </head>

  <body>
    <header>
      <ul>
        <li>
          <a href="Portfolio.html"
            >HOME</a
          >
        </li>
        <li>
          <a href="experience.html"
            >EXPERIENCE</a
          >
        </li>
        <li>
          <a href="About me.html"
            >ABOUT ME</a
          >
        </li>
        <li>
          <a href="/Blog.html">BLOG</a>
        </li>
      </ul>
    </header>

    <main>
      <h1>25/02/22 A day on the Pier</h1>
      <img src="img/pier1.jpg" alt="pier" />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      </p>
    </main>

    <footer>
      <ul>
        <li>© L D</li>
        <li>[email protected]</li>
      </ul>
    </footer>
  </body>
</html>

CSS:

    p {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  width: 600px;
  
}


@media only screen and (max-width: 480px) {
  header ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    margin: 0;
    padding: 0;
  }

  @media only screen and (max-width: 480px) {
    body {
      display: flex;
      flex-direction: column;
      text-align: center;
    }
  }
 

@media only screen and (max-width: 480px) {
    footer ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      margin: 0;
      padding: 0;
    }
  }
}

CodePudding user response：

You can try this way

p {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  max-width: 600px;
  text-align:center;
  width:100%;
  height:auto;
  margin:0 auto;
  
}

main { 
text-align:center
}

img {
  max-width:600px;
  width:100%;
  height:auto;
  margin:0 auto;
 }
 
@media only screen and (max-width: 480px) {
  header ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    margin: 0;
    padding: 0;
  }

p {
font-size:16px;
}

    footer ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      margin: 0;
      padding: 0;
    }
  }

<main>
      <h1>25/02/22 A day on the Pier</h1>
      <img src="https://st2.depositphotos.com/3791047/5689/i/600/depositphotos_56899783-stock-photo-girls-sitting-on-the-bench.jpg" alt="pier" />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      </p>
      
      <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
    </main>

CodePudding user response：

You defined paragraph width without media query.

p {
  /* ... */
  width: 600px;
}

Every paragraph will be 600px wide even on mobile.

You need to set a media query to limit the width for desktop only, or use a "better" rule

p {
  /* ... */
  max-width: 600px;
}

With that, your text will never be larger than 600px, but it will be smaller on mobile.