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 trialKuzivakwashe Desmond Matonhodze
11,292 PointsBackground-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
1 Answer
Shaun Hoffman
10,879 PointsI'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%; }}
Anastasia Khazova
5,640 PointsAnastasia Khazova
5,640 PointsI have the same problem. The answer is not found.