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
mrx3
8,742 PointsHaving some trouble with my images pushing text too far.
I've been trying to figure out why the images are pushing the text so far down the page, and why the footer second picture has so much space with the overflow: auto. I know you won't be able to see the images but, you can see there's way too much width being applied. Now, when I make the width smaller the text will of course match this, and the page will look better. The only problem with this fix is that the image will be to small. I'm trying to make the pictures adjust to various screen sizes. When I launch the site from text-editor everything looks great. I validated my markup, css, and css lint, everything checked out great. My codepen: http://codepen.io/mike316/pen/wAsHm
Thanks again for any help.
2 Answers
Scott Moore
4,050 PointsWhat size is the image you are using? You have max width set for 100%. Then you are making a selector to say that you want it to be 45% of the page size. When I take the width out of your selector the image goes to basically 40px.? Are you using a small image?
Also the second image you are stating the same thing, you want it be 45% of the page size and float right. Are you trying to wrap that image around the paragraph?
You might try adding a width to the paragraphs instead of the image. The code is telling the image to do 2 different things? Change your width on .one and you will see what I am getting at.
Scott Moore
4,050 PointsThe new looks good to me. Nice work.
mrx3
8,742 PointsHi Scott, Thank your for the comment, taking the time to help me, and for the compliment.
mrx3
8,742 Pointsmrx3
8,742 PointsWhat up Scott? After a night a of rest, I didn't sleep so well the night before, so here a better explanation. I'll start at the beginning and hopefully this will explain. In Nick's beginning lesson How to make a website, on the portfolio page we added pictures that would resize for mobile devices. The images would be kind of big, but if you resize the browser window and make it smaller the images get smaller. I can't remember exactly, and this is my fault but, the images have to set to max-width: 100% The images original size is 1.920 px by 1,440 pixels. When I apply the max-width: 100% they are scaled to 920px by 690 px. Next Nick next styles the images using 45% as the width with a margin of 2.5%. They looked nice at that size so, I figured I would do the same with mine. I'm not trying to wrap in the page, I just wanted to put the images in their randomly like another site but, I want the site to be "mobile ready" So the text and the images resize for a mobile device. Today I got home from work and was practicing another site and decided to do the image site again. Since you can't upload images to code pen I thought, "What if I add a border to see what is happening with the pictures?" I added a border, and if you look at the page in full page view and resize the browser window you'll see that borders will resize and get small if you make the browser window small, and large again when you make the browser window bigger. Below is the old and new code pen. Try resizing the widows in full page view and you'll see what I mean. The images are not as big as in code pen though, it's like code pen is adding extra height to the images, and I don't know why. They don't look too bad at that height, I'm just picky, and like everything to look perfect. I could remove some of the width maybe? if you have any suggestion let me know. And also, thank you for all the help, I really appreciate it my friend.
Old: http://codepen.io/mike316/full/wAsHm/
New: http://codepen.io/mike316/full/sJFLD/