HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Ricky Logsdon
Ricky Logsdon
1,046 Points

Build a Three Column Layout "Two Column isn't breaking up."

I believe I have the code written like Nikes, but the Contact page is not changing. Any Changes. https://w.trhou.se/misy14haxo

I dont understand your question, can you be more specific? But if you want to create a 3 column layout, each container need to have 33.3% width = (33.3x3)99.9%width total

1 Answer

Ricky Logsdon
Ricky Logsdon
1,046 Points

I'm trying to get the two column layout to work first. In the responsive.css I have

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

/****************************** TWO COLUMN LAYOUT ********************************/

primary {

width: 50%; 
float:left; 

}

secondary {

width: 40%; 
float:right; } 

}

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

}

                                                                          In the contact.html I have 

<section id="primary"> <h3>General Information </h3> <p>I am just starting on web designing, but I'm hopeful that I can be up and running and writing code full time within the next year.</p> <p>If you would like to follow my journey and find out how I'm improving you can follow me on Twitter.</p> </section> <section id="secondary"> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:502-555-6400">502-555-6400</a></li> <li class="mail"><a href="mailto:ric@example.com">ric@example.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=riclogsdon">@riclogsdon</a></li> </ul> </section>

After I save my work and go to the web page I'm working on. I refresh the page but the layout is the same it doesn't go to a to layout look.

Ricky Logsdon
Ricky Logsdon
1,046 Points

thank you for your help. I figured it out. YEAH!!!!