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

Dejan Buric
Dejan Buric
12,560 Points
Posted by Dejan Buric
Dejan Buric
12,560 Points

DIVs changing position with windows resize

Hi all,

When i resize my windows the divs change their position and make problem on my page. Can you see my page and my code and tell me how to fix it.

http://port-80-6ahphgqpoy.treehouse-app.com/

Code:

http://prntscr.com/6xaoxu http://prntscr.com/6xap5u http://prntscr.com/6xaphz

I learn HTML & CSS for 45 days, and this is my first web page. I have complete first two chapters on "Web design" track. Teacher Guil Hernandez give tips for practice in last video of CSS Basic chapter. So i made page of my favorite city. Can you give me some comments for it.

Sorry on my bad English (grammar).

2 Answers

Chyno Deluxe
Chyno Deluxe
16,936 Points

After looking at your site and going through the CSS. i noticed a couple things you could benefit in using. The first thing i noticed was that your images do not stretch the size of the parent div(this is why your header tags move the larger the screen is. and next after changing the images to span the full width of the parent div you could use a clear to every third element so that you always have a nice 2 column layout. try this code.

.group img {
width: 100%;
}

.group > div:nth-child(3n) {
clear: right;
}
Dejan Buric
Dejan Buric
12,560 Points
Dejan Buric
Dejan Buric
12,560 Points

Thanks you Chyno, this "nth-child" code resolve my problem.

Stephen Van Delinder
Stephen Van Delinder
21,457 Points
Stephen Van Delinder
Stephen Van Delinder
21,457 Points

Dejan,

Awesome Site!! It looks like you've learned a lot in the last 45 days. I cannot see your page anymore, but I noticed a few things that could help.

  1. It looks like you have a file called responsive.css, but there is not very much in the document. As you progress with Guil Hernandez, he will teach you how to make sure that you add styling for different size displays with media queries.

  2. I think you should build your site entirely from scratch so you understand how all the aspects of design work. However, because yours is a problem that all websites face when you code them from scratch, designers may opt to use a framework like Bootstrap or Skeleton. The bootstrap grid system is a great solution to problems like this because the breakpoints and mobile design is already built into the layout.

Always use the forums when you have questions!

I hope this helps.

Dejan Buric
Dejan Buric
12,560 Points
Dejan Buric
Dejan Buric
12,560 Points

Thanks for help Stephen, i will learn how to use Bootstrap in my projects. Greetings for Treehouse community moders, you are doing great job on site and forum!

Dejan Buric
Dejan Buric
12,560 Points
Dejan Buric
Dejan Buric
12,560 Points

Stephan, i have one more question.

I need just to copy this in my new HTML file? http://prntscr.com/6xm6e8

Can you give me more tips about Bootstrap, what should i use, and stuff like that.