Mng 81 add pokemon choosing screen #9
Conversation
index.html
Outdated
| <p><span>Sorry, but we couldn't wake up Snorlax... <br>Here you have 12 Pokemons ready to fight</span></p> | ||
| <p id='whoChoosesParagraph'><span>Ash chooses 1 (the last) pokemon</span></p> | ||
| <div class='choosePagePlayers' id='choosePagePlayer1'> | ||
| <h1 class='choosePagePlayersName fancyFont' id='choosePagePlayer1Name'>ASH</h1> | ||
| <img src='./assets/pokeball.png' alt='Pokeball'> | ||
| <img src='./assets/pokeball.png' alt='Pokeball'> | ||
| <img src='./assets/pokeball.png' alt='Pokeball'> | ||
| </div> | ||
| <div class='choosePagePlayers' id='choosePagePlayer2'> | ||
| <h1 class='choosePagePlayersName fancyFont' id='choosePagePlayer2Name'>MISTY</h1> | ||
| <img src='./assets/pokeball.png' alt='Pokeball'> | ||
| <img src='./assets/pokeball.png' alt='Pokeball'> | ||
| <img src='./assets/pokeball.png' alt='Pokeball'> | ||
| </div> | ||
| <h1 class='fancyFont' id='pokemonListHeader'><span>POKEMON LIST</span></h1> | ||
| <p class='smallFont' id='pokemonListParagraph'><span>Click on a pokemon to choose the best one for you!</span></p> |
There was a problem hiding this comment.
why all paragraphs get span element?
| justify-content: center; | ||
| align-content: center; | ||
| padding: 5vh 2.5vh; |
There was a problem hiding this comment.
causes problems in desktop view. Try to set heigth of container to 100vh and justify-content to center
There was a problem hiding this comment.
I don't understand what's the problem here, it looks like all is working well
| flex: 1 1 20%; | ||
| text-align: center; | ||
| font-weight: 900; |
There was a problem hiding this comment.
imported font 'Bellota Text' got two weights Regular 400 and Bold 700
|
|
||
| p { | ||
| font-size: 2.2vh; |
There was a problem hiding this comment.
dont use vh or vw for font-size - this way is hard to control.
We set root (html) font-size to 10px so u can simply calculate it.
Default for body is atm 2.4 em = 24px.
If u want font-size be equal to 44px for h1 set it 4.4rem or for 28 px it will be 2.8rem
| #choose-page { | ||
| width: 100%; | ||
| height: 100%; |
There was a problem hiding this comment.
height needs be change to 100vh instead of 100% otherwise content dont fill all view height
No description provided.