@media screen and (max-width: 1023px) { #main_title_container h2 { margin-top: 15vh; } #main_title { top: 15rem; } #cover .button { top: 7vh; } #content_all h2, #welcome h2 { font-size: 6em; line-height: 1em; text-align: left; } #content_all .columns{ top: -145vh; width: 55vw; } .columns{ display:block !important; } .column { width: 100% !important; } #open { top: 80vh; } /** flipping part */ #flipping_zone { margin-top: -120vh; position: static; } .flip-container{ position: relative; } .flip-container + .flip-container{ margin-top: -5vh; } .flip-container .container-text{ z-index: 1; left:33vw; } .flip-container .text-title{ margin-top:0; } .flip-container .phone-container{ left: 42vw; top: 5vh; } .flip-container.flip-from-left .container-text{ left: 33vw; top: 5vh; } .flip-container.flip-from-left .phone-container{ left: 25vw; top: 10vh; } #content-4{ margin-top: 25vh; } #content-5 { margin-top: 15vh; } #popover{ margin-top: 100vh; } /** exemples sliders */ .slider-screen .text-title{ margin-top:1em; } .slider-screen .text, .slider-screen .phone-container { position: relative; width: 412px; left: 25vw; top: 5vh; } .bullets{ top: 28em; } .arrow-left, .arrow-right{ top: 60vh; } .slider-screen{ min-height:100vh; } } @media screen and (max-width: 35em) { #main_title{ margin-top: 5vh; } #main_title_container h2 { margin-top: 15vh; } #content_all h2, #welcome h2 { font-size: 4rem !important; } #content_all .text{ padding-right:0; } .container-text-md{ width: auto; } #content_all .columns{ width:100%; margin: 1rem; } .flip-container .container-text{ width:100%; left:5vw; } .flip-container .phone-container { position: static; margin: 4rem auto; } .flip-container.flip-from-left .container-text{ left: 5vw; } .flip-container .phone-container { margin-top: 7rem; } .flip-container .text-description{ max-width: 90vw; } #content-4 { margin-top: 50vh; } #content-5 { margin-top: 45vh; } .slider-screen .text, .slider-screen .phone-container{ left: 5vw; max-width: 90vw; } }