.scenery .content .scenery-container{ width: 80%; margin: 50px 10% 0; } .scenery .content ul{ width: 100%; } .scenery .content ul li{ border: 2px solid #eee; width: 47%; margin: 30px 1%; float: left; transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } .scenery .content ul li:hover{ background:#eee ; } .scenery .scenery-container-img{ position: relative; width: 100%; overflow: hidden; padding-top: 68.3%; } .scenery .content ul li img{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } .scenery .content ul li img:hover{ opacity: .8; filter: alpha(opacity=80); } .scenery .content ul{ width: 90%; margin: 100px auto 0; } .scenery-container h1{ transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } .scenery-container h1:hover{ opacity: .8; filter: alpha(opacity=80); } .scenery-container h1{ padding-top: 35px; padding-bottom: 20px; color: #295694; font-size: 1.5em; } .scenery-container h1 span{ padding-bottom: 20px; border-bottom:2px solid #ccc; } .scenery-container .scenery-introduction{ margin-top: 15px; color: #626262; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: 2px; } .scenery-container .scenery-introduction span{ font-size: 0.8em; } .scenery-container .scenery-Browse-volume{ margin-top: 30px; margin-bottom: 10px; color: #c5c4c7; text-align: right; } @media only screen and (max-width:1200px ) { .scenery .content ul{ width: 100%; } } @media only screen and (max-width:1024px ) { .scenery .content ul{ margin: 30px auto 50px; } } @media only screen and (max-width: 650px) { .scenery-container h1{ font-size: 1.25em; } .scenery-container p{ font-size: 0.8em; } } @media only screen and (max-width: 420px) { .scenery .content ul li{ width: 96%; margin: 15px 2%; } }