Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Enhancing Design with CSS Finishing Touches Applying Media Queries

Solving the column problem without calc

Hi friends, my website managed to place the two columns side by side on preview before I got to the part of the video where Anwar demonstrates the calc function. My practice code mirrors the demo to a T, so why did my browser (Firefox) solve the problem?

Sherrie Jeffers
seal-mask
.a{fill-rule:evenodd;}techdegree
Sherrie Jeffers
Front End Web Development Techdegree Student 3,029 Points

I dont have an answer for you, but mine did the same thing in chrome, I had really nicely placed columns before the calc() was introduced, and using the calc actually made my columns break... The -4px also caused my columns to overlap until the first child part was added. this is the CSS I have to nice columns.

.column { display: inline-block; width: 48%; margin-right: -4px; } .column:first-child { margin-right: 4%; margin-bottom: 0; }

2 Answers

Moe Set
seal-mask
.a{fill-rule:evenodd;}techdegree
Moe Set
Front End Web Development Techdegree Student 6,575 Points

/* Media Queries ------------------- */ @media screen and (min-width: 800px){ header{ padding:20vh 1rem; } h1{ font-size: 5rem; } h1::after{ margin-top:2rem; } .title{ font-size:1.25rem; } .intro{ padding:0 15%; font-size:1.1rem; } .column { display: inline-block; width: 50%; margin-left:-10px;

} .column:first-child{ margin-left:-5px; margin-right:-10px; margin-bottom:0;

}

can you explain me please? Where is problem my code?

Amanda Richardson
seal-mask
.a{fill-rule:evenodd;}techdegree
Amanda Richardson
Web Development Techdegree Student 12,775 Points

No answer, but I had the same issue as the poster. I was doing this using Safari and when I added the margin-right to 4%, it actually looked nicely spaced. When I added the calc(4%-4px) then the space reduced and didn't look as nice. Why did the calc() actually throw things off?