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 Yasir ALQAISI
Yasir ALQAISI
1,682 Points

Is it bad practice to use too mach break point to keep layout shape ?

I made simple page to practice what i learned from css lessons (flex , tansition , media query ect) you can visit the page to check it out .

http://176.145.208.16/testpage/test.html .

To keep the layout shape i had to use too many breakpoint i wonder if it's bad practice ?

4 Answers

Patryk Bernasiewicz
PLUS
Patryk Bernasiewicz
Courses Plus Student 10,281 Points
Patryk Bernasiewicz
Patryk Bernasiewicz
Courses Plus Student 10,281 Points

Depends entirely on you - you're the problem solver here. :) Although if I were you, I'd just use relative values instead of so many breakpoints - you probably could achieve the same effect using percentage values only, even without any breakpoints.

Yasir ALQAISI
Yasir ALQAISI
1,682 Points

Thanks for the answer i will try to do it with relative values to learn new way . thanks for the note :) .

Yasir ALQAISI
Yasir ALQAISI
1,682 Points

Man i tried my best to do it but i couldn't do it . is there some hint

Patryk Bernasiewicz
Patryk Bernasiewicz
Courses Plus Student 10,281 Points

Yasir ALQAISI, sure. Here's a simple CodePen I created basing on your file:

It does pretty much what you want it to, it's responsive and doesn't use any breakpoints. :) just add some transitions and it should be ready to go.

Yasir ALQAISI
Yasir ALQAISI
1,682 Points
Yasir ALQAISI
Yasir ALQAISI
1,682 Points

That is amazing job with much less code :) that what mean to be pro lol thanks ill try to understand the code to enhance my skills

Yasir ALQAISI
Yasir ALQAISI
1,682 Points

sorry i am gona give you head ache today so after i took along time trying to understand your work because iam so slow lol . i get that some how . defining a phony character and give it style can keep the div from crashing with width changing and the divs just keeps adapting to the width of the page .

.col::after { content: ''; display: block; padding-top: 100%; }

Patryk Bernasiewicz
Patryk Bernasiewicz
Courses Plus Student 10,281 Points

Yasir yes, that rule allows you to keep your div's height the same as its width, you can read more about it at http://www.mademyday.de/css-height-equals-width-with-pure-css.html

Yasir ALQAISI
Yasir ALQAISI
1,682 Points
Yasir ALQAISI
Yasir ALQAISI
1,682 Points

thanks man for teaching me something new :)

Yasir ALQAISI
Yasir ALQAISI
1,682 Points
Yasir ALQAISI
Yasir ALQAISI
1,682 Points

the post is awesome and the idea is smart . since the padding that define our box height it also related to the to the width of the pseudo element when the width shrink also the padding . very smart