TRIBUTE page problem with CENTRE class and DIVISIONS

HTML-CSS
1

Hello,

I’ve done a part of the project, but now I have a problem with “text-center” class within my HEADs (h1/h2).
I’ve tried a lot of ways but still it doesn’t work and I don’t have any other idea what to do. It had been well before I added the “row” and “col-xs-12” classes.

Just to be honest, I think I don’t really know how DIVISIONs work when there are many of them. I don’t understand it perfectly where should I end it and which ending () is dedicated to which DIVISION…

Here’s a link to the project:

This is my actual code:

ul {text-align: left;
display: inline-block;}

.bigger-text {font-family: Arial;
font-size: 16px;}

.text-center {text-align: center;}

.jumbotron {background-color: rgb(235, 235, 235);
border-radius: 25px;
margin-top: 15px;
  border-width: 15px;

border-color: rgb(180, 180, 180);
}

#target1 {-webkit-filter: grayscale(60%);
filter: grayscale(60%);}

Leo Messi

The King of Football

Leo's fingers
Leo's fingers990×627 241 KB

Leo Messi lifting his fingers after a match. You can guess that he probably had scored a goal before :-D

Leo Messi life achievments:

  • Najwięcej goli w roku kalendarzowym: 91 goli (2012)
  • Najwięcej goli w jednym sezonie: 73 gole (2011/2012)
  • Najwięcej goli w jednym sezonie Primera División: 50 goli (2011/2012)
  • Najwięcej goli dla Barcelony: 543 gole (oficjalne) oraz 34 (nieoficjalne)
  • Najwięcej goli dla Argentyny: 61 goli
  • Najwięcej goli w El Clásico: 24 gole
  • Najwięcej goli w Superpucharze Hiszpanii: 11 goli
  • Najwięcej goli w jednym meczu Ligi Mistrzów: 5 goli
  • Najwięcej goli na wyjeździe w jednym sezonie Primera División: 24 gole
  • Najwięcej meczów na wyjeździe z golem w jednym sezonie Primera División: 15 meczów
  • Najwięcej kolejnych meczów z golem w Primera División: 21 meczów, 33 gole
  • Najmłodszy zawodnik z 200 golami w Primera División: 25 lat
  • Jedyny zawodnik z co najmniej 400 golami w hiszpańskim futbolu (gole oficjalne i nieoficjalne)
  • Najlepszy strzelec w historii Primera División: 375 goli
  • Najwięcej hat-tricków w jednym sezonie Primera División: 8
  • Najwięcej Złotych Piłek: 5
  • Najwięcej asyst w historii Primera División: 139 asyst
  • Jedyny zawodnik, który strzelił bramkę w 7 różnych rozgrywkach w ciągu jednego roku (2015)
  • Pierwszy piłkarz w historii, który przekroczył granicę 300 goli w Primera División
  • Najwięcej goli na jednym stadionie (Camp Nou): 206 goli

To read more about Leo Messi's life, click HERE

If anyone could help me it would be great!

2

The problem is that there is no col-xs-12 class. You need to use col-12 instead. see:

Div’s are not too tricky once you get the hang of them. If you are struggling I suggest you break down you code into boxes (on paper) and work out what needs to be inside of what- this might help you start to work out how a page needs to be structured. It will help if you try to properly indent your code for example you have:

<div class="row">
  <div class="col-xs-12">
    <h1 class="text-center">Leo Messi</h1>
    <h2 class="text-center"><em>The King of Football</em></h2>
  </div>
  <div class="img-thumbnail">
    <img id="target1" style="width:100%;" class="img-responsive container-fluid" src="http://e00-marca.uecdn.es/assets/multimedia/imagenes/2016/10/20/14769177854355.jpg" alt="Leo's fingers">
    <div class="text-center caption"> 
      <p><p>Leo Messi lifting his fingers after a match. You can guess that he probably had scored a goal before :-D</p>
      </div>
  </div>
    </div>

If you style it like this, then it will be more readably. After a little practice it will become second nature looking at it and you will be able to more easily identify what each div is doing.

<div class="row">
  <div class="col-xs-12">
    <h1 class="text-center">Leo Messi</h1>
    <h2 class="text-center"><em>The King of Football</em></h2>
  </div>
  <div class="img-thumbnail">
    <img id="target1" style="width:100%;" class="img-responsive container-fluid" src="http://e00-marca.uecdn.es/assets/multimedia/imagenes/2016/10/20/14769177854355.jpg" alt="Leo's fingers">
    <div class="text-center caption"> 
      <p>
        Leo Messi lifting his fingers after a match. You can guess that he probably had scored a goal before :-D
      </p>
    </div>
  </div>
</div>

A couple of tips for indenting on Codepen:

  1. if you click on a div (or another tag), Codepen will underline the corresponding div for you.
  2. if you click on a div (or another tag) and press shift and tab, Codepen will (usually) indent it in the proper place for you.

I would also recommend not using the html and head tags etc on codepen as it not needed. I would also move everything within the style tags into the css section of codepen as it will make it easy to maintain and find faults with you code.

Hope this helps :slightly_smiling_face:

3

Man, thank you. I didn’t expect so fast answer.

The thing with “col-12” totally helped. I’m a total beginner (it’s been only 3 days since I started my coding adventure) so I hadn’t known about the fact about “clicking on a div”. I think it will help a lot during my further working.

I have also a problem with changing the size of my first heading (h1) text.

I’ve tried something like that:

> h1 {color: black;
>     font-family: Monospace;
>     font-size: 60px;}
> ```



If you could give me any tip with that I would be glad!
4

I’m not quite sure where you at at with your code, but the way that I usually change sizing, when using bootstrap, is with a separate class:

.large-heading {
  font-size: 1000px;
}

<h1 class="text-center /*other bootstrap classes*/ large-heading">Hello world</h1>

Hopefully this should get you going. :slightly_smiling_face:

5