digital-theory/css/7-responsive.css

164 lines
2.2 KiB
CSS
Raw Normal View History

@media screen and (max-width: 1023px) {
2023-05-11 14:23:32 +02:00
#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;
}
}