Tribute Page Project- some help sought!

Tribute Page Project- some help sought!
0.0 0

#1

[7 May 2018 UPDATE ] - I rebuilt the project entirely today & Here is my new link:

Currently I am stuck with the following issues:

  1. Make the caption stick to the image and have a white background that spans exactly to the width of the image.

  2. Aligning the unordered list and the child line elements to the center.

  3. Reducing the width of the blockquote and some other textual elements

Any help or hint would be greatly appreciated.


#2
  1. You can make the parent div text-center and then change the ones you don’t want text-centered. In your css file: .container {text-align: center;} li {text-align: left}
  2. I’m not sure what you mean. Does this work? In your css file: figcaption {background-color: white;}

#3

Thanks for replying! Actually the challenge asks me to do everything in Bootstrap and not use custom CSS. I cannot make it look like the sample tribute page [https://codepen.io/freeCodeCamp/full/NNvBQW] and I really have no idea what to do to proceed from now.

I made some changes keeping in view your suggestions but still the li’s are not where they should be! and the caption background width is not the same as image width.

Here is the codepen link to my tribute page

[https://codepen.io/sujitmohanty/pen/ZxOPgP]


#4

For the challenge, you can use css, but don’t mess with custom css for layout because Bootstrap takes care of that. Avoid padding, margins, and floats in css. Things like text-align, colors, and borders are okay to customize.


#5

You can use custom CSS if you want for the entire project. There are no requirements in the user stories to only use Bootstrap or that you have to use Bootstrap at all. You can choose to use external CSS libraries (i.e. Bootstrap) or no libraries at all. The choice is up to you. The sample page does use Bootstrap 3 and the following custom CSS, but the sample is just a guide and you do not need to duplicate it.

body {
  margin-top: 60px;
}

#6

Alright! I will keep that in mind next time I attempt it. Thanks!


#7

yes! But I couldn’t bring that caption background width to align properly with the image and a few other things to work correctly as well!. If possible please review this https://codepen.io/sujitmohanty/full/ZxOPgP/ and give a feedback about how far I went.

As I didn’t receive enough support while I was trying to figure it out, I gradually lost interest in this avenue called FCC & eventually switched to another resource. But I am glad you both have reached out to me! Thanks!


#9

Good job! Huge improvement. The html and css is a lot cleaner.

The only thing I might change is <strong> tags to <b>. Or, change it to <span class="timeline-year"> and the css to .timeline-year {font-weight:700;} because strong is meant to be used for emphasizing something of great important to the content. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong for an in-depth explanation.


#10

Thank you so much Elise! I just went through the MDN document & implemented the changes in my code to what you had suggested. Please have a look here to see if I have implemented exactly like u have said:

But I still don’t understand two things: (1) the caption with the white background & (2) how to align the line elements of the unordered list to the centre. Can you please provide me some hints?