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
John Levy
1,451 PointsHaving trouble making the elements stay static when increasing the screen size
I want the elements on my page to stay in one place when I increase or decrease the page size. I have used media queries but still even with a 50px increase in width it causes the elements to move when enlarging the page. When I increase the size the the page the first element (#img ) stays still which is what I want but all the other elements move. I also dont understand why #img stays still while all the others move. How do I get all the elements attached in the code below stay static on the page? http://codepen.io/Johned22/pen/BLAYPq Thanks in advance
3 Answers
David Bath
25,940 PointsThis is the strangest CSS I have ever seen! You have crazy margins on everything! I can't tell what the layout should actually look like. Why don't you first try getting the elements into the right position at a particular breakpoint, and then figure out what needs to change when the browser changes size? Right now you have some things with percentage widths, so when the browser size changes so does the size of the element. Is that what you want? And with those margins it becomes very difficult to know where the elements would be naturally and what affect each margin has on the layout. I can see no reason to apply margins to every element like this.
I hope my comments don't sound too negative, I just think it would be best to step back and simplify before continuing.
John Levy
1,451 PointsThanks for your response. So if I use px only instead of including % the elements should not change when I increase or decrease the page? Thanks
David Bath
25,940 PointsThey will probably stay in position that way, but depends on other styles as well. I would try laying things out with no margins declared at all, and then only defining the ones that are necessary. If you really need to position things in specific positions you can also try absolute positioning, or fixed...but I think those things should be used relatively infrequently. Good luck!
David Bath
25,940 PointsYou also have a couple of elements sized with percents as well, so they will change as the browser size changes because they are relative to their parent, which right now is the body element.
John Levy
1,451 PointsThanks for your help