My first project, Tribute page

Code Feedback
1

Hey,
I’ve been on freecodecamp a week and a half and I now finished my Tribute page.
I have a few problems that I wasn’t able to solve on my own and I think it’s time to ask you for help.
https://codepen.io/pcurry/full/pMWxeg
:star: Problem no. 1.
I’ve tried everything I know to center my first image within it’s parent div and I have failed every time. How do I get that to happen while keeping the original layout of the page and not have everything else migrate to another dimension? :smiley:
:star: Problem no. 2.
I have 4 smaller pictures arranged in a vertical line to the right of the main picture. On a smaller screen, the last one of those four just migrates underneath my main Image description text. Could I somehow tie/wrap all the pictures together so that the structure stays the same regardless of the scale of our screen? I tried to make all the images responsive and also have the margins set to percentages instead of px so I’m not sure what I’m doing wrong. :grimacing:
:star: Problem no. 3.
Image Caption. How do I move that right under the pic it belongs to and how do I allow it to be only that specific width(especially with my img width being a percentage value not a px)?
:star: Problem no. 4.
For my local anchor buttons that I have under my pictures, in smaller than full screen they look like they are centered within the width of the page, however if you do full screen, they will just move to the right of the screen and just hang out there. Annoying! Why is this happening?
Sorry for my extra long post, I just need to have some answers to be ok with myself. haha.

Also, please let me know if you can think of ways that I can make my code look cleaner and nicer. This is my first website and I’d like to make it a habit to write clean and nice looking code.

Patricia

2

To start:

Use a validator to help you find errors (google it)

Can’t do this:

#img-caption {
  width: #image width px;
}

li must go inside a list element ul, ol, or dl.

No such thing as float:bottom;

After floating an item or group of items you need to clear the float. (Problem 4)

Don’t float your image caption p.

For testing purposes let’s add this to your CSS `*{ border: red 2px solid;} now we can see what we’re doing and can begin fixing it.

1 Like
3

Hello Patricia,

I’m liking the direction you took your tribute page. For problem #1 and #2, you can use a grid to organize your images, so that they are grouped and maintain the same ratio of space. Here is an example for you to check out: https://codepen.io/nohj/full/MNrjPx

1 Like
4

Hey tlc35us!
Thank you so much for all of that!
I have gotten rid of all the non-sense, and it is much better.
However, I can’t make those images stay in the structure that I want if I get rid of the float on my image caption p. But aligning that did take care of the image migration problems that I was having when down-sizing. yay!

5

John! That looks amazing! I’m gonna use that all the time now
btw, do you know of a trick to align and lock my labels to my input boxes horizontally? my label just floats up and my input box down and I’m not sure how to prevent that.
here’s a link:Form project

6

What I remember doing, off the top of my head, is p { text-align: center;} for your image caption and put an empty div under the img s which you did. I then put a class of .clear { clear: both;} on it which fixed the button problem and the image problem. You had put the text-align:center on the p s grandparent.

On your survey remember to clear your floats. See screenshot. Also the question for the checkboxes should be a p not a label. labels are the text next to the checkboxes. You misspelled “maxlength”. You mistakenly put text data in the textarea. “We love your feedback” should be in a placeholder attribute. Good Job! Love the look!

patriciaCurrySurvey
patriciaCurrySurvey1821×965 380 KB

1 Like