Build a Tribute Page - Tom Searle

HTML-CSS
1

Hi there,

first of all, my Tribute Page so far: https://codepen.io/trvepeak/pen/MPRoNJ

For now I’m just figuring out structure, which is why the rows are colored the way they are. Design will follow after everything is at it’s place and responsive.

I’m stuck here and could use a few hints how to solve the following problems (using Bootstrap):

1

Centering the content of the rows. I’ve found a workaround once by decreasing the size of the rows but I’m sure I can center text and objects some other way, right?

2

To position the content vertically I used br. Is this legit or is there a more elegant way, by altering padding for example?

3

The div called “img-caption” should stay below “img-div” all the time. Do I achieve this by using the push and pull method of Bootstrap?

4

When resizing the whole page both headings should resize (h1 and h2) but they don’t, can’t get it working. I also noticed “tribute-info” has a padding between the edge of the div and the text whereas the rest of the text doesn’t. How to I add this to the rest?

Thank you so much in advance for any helpful comment and sorry if I posted this in the wrong topic!

2

#1

To center the text you use the class text-center, if it is not working maybe it is because the text element is nested in a row class (which is a flex container). Every time you use a row class, only put columns inside it, and the other stuff inside those columns.

Working example:

<div class="row bg-dark text-center" id="title">
  <div class="col-sm">
    <h1>Tom Searle (* 1988 † 2016)</h1>
  </div>
</div>
3

Thank you very much, it worked! :slight_smile: