Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Kuzivakwashe Desmond Matonhodze
Kuzivakwashe Desmond Matonhodze
11,292 Points

Background-images of the right column, are going on top of the left column text

@media screen and (min-width: 480px) { /**************************************** TWO COLLUMN LAYOUT ****************************************/ #primary { width: 50%; float: left; }

#secondary {
    width: 40%;
    float: right;
}

}

If I resize the browser window down to the mobile size, the background images are appearing side to side with contact details as they should. But as soon as the window gets wide enough for two columns to be displayed, the background images are sitting on top of the text of the left column. The contact details are right where they should be, which is on the right column

Anastasia Khazova
Anastasia Khazova
5,640 Points
Anastasia Khazova
Anastasia Khazova
5,640 Points

I have the same problem. The answer is not found.

1 Answer

Shaun Hoffman
Shaun Hoffman
10,879 Points
Shaun Hoffman
Shaun Hoffman
10,879 Points

I'm just getting started with this, but I was able to resolve by setting the left margin at 50% within main.css (when setting the background images) and then making a new @media in responsive.css at the beginning which is a min-width of 1px and setting the left margin to zero (so there is no margin in a one column layout).

Note: I do not know how this will affect the project going forward so follow at your own risk :)

Example for mail: In main.css: .contact-info li.mail a{ background-image: url('../img/mail.png'); margin-left: 50%; }

In responsive.css: @media screen and (min-width: 1px){ .contact-info li.mail a{ background-image: url('../img/mail.png'); margin-left: 0%; }}