HTML How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

Gordon Akinpelu
Gordon Akinpelu
7,331 Points

Why am I unable to have the sections "stack" as I decrease the width of my browser window?

I also am unable to decrease the width of the browser window past a certain point. My code is below. Thanks!

contact.html code: <section id="primary"> <h3> General Information</h3> <p>Not looking for new stuff, as I am new to this. Available to write, and do whateva. </p> <p>Please only use phone contact for urgent inquiries. Facebookand email are cool </p> </section> <section id="secondary"> <h3>Contact details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:555-1234">555-1234</a></li> <li class="mail"><a href="mailto:gordon@gordo.com">gordon@gordo.com</a></li>

  </ul>
  </section>

responsive.css code:

<section id="primary"> <h3> General Information</h3> <p>Not looking for new stuff, as I am new to this. Available to write, and do whateva. </p> <p>Please only use phone contact for urgent inquiries. Facebookand email are cool </p> </section> <section id="secondary"> <h3>Contact details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:555-1234">555-1234</a></li> <li class="mail"><a href="mailto:gordon@gordo.com">gordon@gordo.com</a></li>

  </ul>

  </section>

2 Answers

Dean Kennedy
Dean Kennedy
4,491 Points

Where is the CSS for this file. I would assume you have a media query to handle sizing?

Gordon Akinpelu
Gordon Akinpelu
7,331 Points

My apologies; I thought I had pasted it in. Here is the media query...

```@media screen and (min-width: 480px) {

/************************ Two column layout *************************/

primary {

width: 50%;
float: left;

}

secondary {

width: 40%; float: right; }
}```

Dean Kennedy
Dean Kennedy
4,491 Points

Change your secondary width to 50%