@media screen and (max-width: 1024px){ body{ #start{ width: $Wi80-m; #text_figli{ #item_list{ .card{ width: $Wi33-m; #item{ width: calc(300% + (.5rem * 2)); } } } } } } } @media screen and (max-width: 414px) { body{ #start{ width: $Wi-m; margin: 0rem auto 2rem auto; padding-right: 2rem; #text_figli{ p{ font-size: 1.7rem; line-height: 2.3rem; a{ &:before, &:after { width: 50%; opacity: 1; background-color: black; } } } #item_list{ width: 100%; .card{ width: calc(100%); margin: 0 0 0.5rem 0; #item{ width: 100%; padding: 1rem; .content-title{ h2{ font-size: 2rem !important; line-height: 2.5rem !important; } & > div{ line-height: 1rem; } } } } } } } .sidebar-right{ width: 100%; right: -100%; #icone_list{ z-index: 0; width: 100%; // background-color: #f9f9f9fe; .hamburger{ float: right; z-index: 999; } } .list-projets{ z-index: 999; ul{ text-align: center; span{ text-align: center; } li{ text-align: center; margin-top: 0!important; &::before{ width: 100%; } a{ padding: 0.5rem; } } } } } } footer{ z-index: 999; justify-content: center; width: 100%; bottom: 0!important; left: 0!important; padding: 0.5rem; background-color: #f9f9f9fe; } .circle_hover.open{ width: 100px!important; height: 100px!important; } }