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

CSS

Posted by Michael Nguyen
Michael Nguyen
3,332 Points

Converting Pixels to Percentages & Content Defined Breakpoints

Ive been stuck on these two code challenges for awhile and im not really sure how to solve this challenge.

Im on the second task for content defined breakpoints and the error that i am getting is this: Be sure you're using a media query at 705px. my css codes for Content Defined Breakpoints is pasted below

@media screen and (max-width : 705px) {

    .grid_1 { width: 100%; }
    .grid_2 { width: 100%; }
    .grid_3 { width: 100%; }
    .grid_4 { width: 100%; }
    .grid_5 { width: 100%; }
    .grid_6 { width: 100%; }
 }

    .love-at-first-bite  { 
          display: none;
     }
}

and html codes:

<head>
    <link rel="stylesheet" href="styles.css" type="text/css">
<link href="//fonts.googleapis.com/css?family=Nunito:400,300,700"   rel="stylesheet" type="text/css">
         <link media="screen and (max-width: 705px)" rel="stylesheet" type="text/css">
</head>

For the converting pixels to percentages, i am stuck on task 2. The question asks to convert the width of cake to percentages using icing as the context.

The result i got from dividing 0.50(context) / 400(target)=125

3 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

The instructions for task 2 on the Converting Flexible Margins challenge ...

Using .cake as your context, convert the margins on .filling from pixels to percentages.

The formula is target / context = result

So that's ... <margin of filling> / <width of cake> Then multiply by 100 to convert it to a percentage.

Tip: Use all of the decimal places, don't round, when converting from pixels to percentage.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

For the Content Defined Breakpoint ...

You don't need to add a class to the love at first bite illistration. Instead just take a look at the html, and take note of ...

  • The image is inside of the intro div.
  • It's the only image inside of that div.

If you click the refresh preview button in the code challenge and then resize your browser until it's less than 705px wide the illistration will vanish.

The reason for this is that the code challenge's preview function is actually using your own browsers media queries, so it won't actually hide the images until you your viewport size is less than 705px wide.

rilwan shinaba
PLUS
rilwan shinaba
Courses Plus Student 3,909 Points
rilwan shinaba
rilwan shinaba
Courses Plus Student 3,909 Points

can i get a answer and an explanation

rilwan shinaba
rilwan shinaba
Courses Plus Student 3,909 Points

never i did it, i just saw the comment that james wrote down, so which was. 300 / 80 =3.75 * 100= answer 375%.