0

I'm using bootstrap version 4.1, on portrait screens it works correctly, but when I leave it on smaller devices and landscape orientation the content gets "bigger" than the screen and on top of everything, what can I do to fix this?

 <style>html, body { height: 100%; }</style>
        <main class="h-100">
            <div class="container d-flex flex-column justify-content-center h-100">
                <div>
                    <img src="/img/icons/over18.svg" alt="OVER 18 YEARS OLD" class="img-fluid OYOI mx-auto d-block">
                </div>
                <div class="mt-3">
                    <h1 class="text-center ml-4">WOW !!!</h1>
                    <h1 class="text-center"><span class="font-weight-bold">{{ person.name }}</span>, you are <span class="font-weight-bold">{{ person.age }} years old!</span></h1>
                </div>
                <div class="mt-4">
                    <h3 class="font-weight-light text-center text-white">You are now responsible for yourself, Welcome adult life!</h3>
                </div>
                <div class="mt-4">
                    <button type="button" class="btn btn-lg bg-dark text-white mx-auto d-block w-100">BACK</button>
                </div>
            </div>
        </main>

enter image description here

  • you can control it with media query in css – Nisharg Shah Dec 06 '18 at 00:49
  • @Nisharg Shah Sure, but if I manipulate it over there, I'll be modifying on the notebook, desktop that automatically are already landscape. Is there no way directly through the bootstrap css without manipulating the stockings? –  Dec 06 '18 at 13:56
  • can you provide demo of your html through pen or fiddle – Nisharg Shah Dec 06 '18 at 15:38
  • https://stackoverflow.com/a/37598748/8798220 || you can watch that for media queries landscape and portrait – Nisharg Shah Dec 06 '18 at 15:41

0 Answers0