html - CSS: Vertical alignment issue in mobile display -

html - CSS: Vertical alignment issue in mobile display -

image

html code here.

question 1:

is right way add together bootstrap classes?

css:

.hai { padding-top: 20%; padding-bottom: 20%; padding-left: 10%; padding-right: 10%; }

question 2:

i not familiar css. above css gives perfect output in (my) pc display (link screenshots above), in mobile view output not expected. why not vertically center alligned in mobile view? changes should made?

since have padding top+bottom = 40%

i assume should set container .hai height 100-40 = 60%

edited:

try adding within .hai { ... }

height: 60%;

html css twitter-bootstrap