Paragraph not responding to 100% width when resizing to less than 600px

Question

Everything is look great so far in terms of design. The header, footer, and my 3 column stack is responsive when I resize my browser. The only thing left I like to do is to get my paragraphs that is in my div="content" to fit 100% of its width when it is 600px or less.

What should I do to add or change my CSS to make it so that the paragraph can fit when in mobile?

 *. { width: 100%; } body { font-family: Andale Mono, monospace; margin: 0; } p { font-size: 24px; } .header { padding-top: 200px; padding-bottom: 200px; text-align: center; background-color: #001f4d; } .header h1 { font-size: 64px; color: white; width: 100%; } .header p { color: white; } .footer { font-size: 24px; padding-top: 50px; padding-bottom: 50px; text-align: center; background-color: #00cc44; } /* Begin main-content */ .content { background: #0d0d0d; padding: 80px; color: white; } .about-me { margin-left: 300px; margin-right: 300px; } .column { float: left; width: 33.33%; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Extra large devices (large laptops and desktops, 1200px and up) */ @media screen and (max-width: 1200px) { body { width: 100%; } .about-me p { /*width: 100%;*/ /*margin: auto;*/ } } /* Small devices (portrait tablets and large phones, 600px and up) */ @media screen and (max-width: 600px) { body { width: 100%; } #main-paragraph { width: 100%; } .about-me p { /*width: 100%;*/ /*margin: auto;*/ } .column { width: 100%; display: block; margin-bottom: 20px; } }

 <!DOCTYPE html> <html> <head> <title>Doug Cannon's Biography</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="header"> <h1>My Website</h1> <p>Welcome to my website.</p> </div> <div class="content"> <div class="about-me"> <h2 style="font-size: 36px;"><center>About Me</center></h2> <p>Mollit officia quis officia nostrud culpa ad sunt quis nulla quis esse adipisicing ut. Ullamco mollit ad elit reprehenderit mollit in duis incididunt id sit laboris adipisicing nisi pariatur. Lorem ipsum ea ut qui in ea consectetur id adipisicing quis officia occaecat laboris id velit. Sunt ea irure ex nostrud elit enim dolor in ut anim cillum ad duis.</p> </div> <br><br><br> <!-- Responsive column cards --> <div class="row"> <div class="column" style="background-color:#aaa;"> <h2>Column 1</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <h2>Column 2</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ccc;"> <h2>Column 3</h2> <p>Some text..</p> </div> </div> </div> <!-- End main-content --> <div class="footer"> <footer> Copyright places here because it is cool <span class="highlight">&copy; 2019</span> </footer> </div> </body> </html>

Answer 1

Add this in your css:

@media only screen and (max-width: 600px){
    .about-me {
        margin-left: 0;
        margin-right: 0;
    }
}

Paragraph not responding to 100% width when resizing to less than 600px

Question

1 answers

solution1
0 2019-12-16 01:44:45

Paragraph not responding to 100% width when resizing to less than 600px

Question

1 answers

solution1 0 2019-12-16 01:44:45

solution1
0 2019-12-16 01:44:45