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 John Levy
John Levy
1,451 Points

How to prevent elements from moving when I increase the page size.

I am trying to prevent the elements from moving when I increase or decrease the page size. What I dont understand is the code is exactly the same but one box moves and the other one stays still. Shown in the code attached below the first box (#img) stays still while the second one moves around. What is causing the second box to move around? I have attached my code below http://codepen.io/Johned22/pen/BLRNvA Thanks in advance

3 Answers

Ash Scott
Ash Scott
435 Points
Ash Scott
Ash Scott
435 Points

Hey John Levy,

I can't get the issue in your Code Pen, which suggest you have some other conflicting code in your project. Can you create another pen with all the code in the project please?

Cheers Ash

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Dos this one work? http://codepen.io/Johned22/pen/BLRNvA

Ash Scott
Ash Scott
435 Points

Sadly not no. I do think I see the problem though. You're using pixel based values which means it will be the same distance no matter what. Try using media queries to change the values at different screen sizes, or to test it right away, use a %age based value instead, then look at media queries after :)

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Ok I will put the code right in here- HTML

<div id="img"> <a href="https://itunes.apple.com/us/app/custom-fit/id572434610?mt=8" target="_blank"></a> <img src="customfitfree.jpg" alt="smile" height="100%" width="100%"></div> <div id="img2"> <a href="https://itunes.apple.com/us/app/custom-fit-pro/id916095963?mt=8" target="_blank"></a> <img src="customfitpro.jpg" alt="smile" height="100%" width="100%"></div>

CSS-

img {

width: 200px;
height: 200px;
margin: 40px 10px -50px 50px;

}

img2 {

width: 200px;
height: 200px;
margin: -535px 0px -505px 330px;

}

I dont understand why "img" does not move but "img2" does move when they are layed out the same way. I use media queries but it still causes one to move and not the other and I want them both still.