From 6c124499937b3b08a05bc6737204ad53feef93e0 Mon Sep 17 00:00:00 2001 From: Jannik Beyerstedt Date: Fri, 16 Dec 2016 23:41:53 +0100 Subject: [PATCH] [FIX] bootstrap carousel would not adapt to screen width --- assets/css/templates/photo.css | 2 +- assets/css/templates/photo.css.map | Bin 6707 -> 6771 bytes assets/scss/templates/photo.scss | 5 +++++ 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/assets/css/templates/photo.css b/assets/css/templates/photo.css index a2b0044..f3d9eb0 100644 --- a/assets/css/templates/photo.css +++ b/assets/css/templates/photo.css @@ -1,3 +1,3 @@ -body{color:#fff}div.site-wrap{background-color:#424242}a{color:#34c501}a:active,a:hover{color:#41f801}main p a:visited{color:#ccc}@media (min-width: 576px){nav ul.nav{color:#fff}nav ul.nav a.section:hover,nav ul.nav a.section:focus{border:none}}@media (max-width: 575px){label[for="nav-trigger"]{color:#fff;background-color:#424242}}footer{background-color:#303030;color:#e6e6e6}div.carousel{max-width:1300px;margin:0 auto}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:0.25rem;background-color:#fff;border:1px solid #ddd;border-radius:0.25rem;transition:all 0.2s ease-in-out;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:0.5rem;line-height:1}.figure-caption{font-size:90%;color:#636c72}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-item{position:relative;display:none;width:100%}@media (-webkit-transform-3d){.carousel-item{transition:transform 0.6s ease-in-out;backface-visibility:hidden;perspective:1000px}}@supports (transform: translate3d(0, 0, 0)){.carousel-item{transition:transform 0.6s ease-in-out;backface-visibility:hidden;perspective:1000px}}.carousel-item.active,.carousel-item-next,.carousel-item-prev{display:block}.carousel-item-next,.carousel-item-prev{position:absolute;top:0}@media (-webkit-transform-3d){.carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right{transform:translate3d(0, 0, 0)}.carousel-item-next,.active.carousel-item-right{transform:translate3d(100%, 0, 0)}.carousel-item-prev,.active.carousel-item-left{transform:translate3d(-100%, 0, 0)}}@supports (transform: translate3d(0, 0, 0)){.carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right{transform:translate3d(0, 0, 0)}.carousel-item-next,.active.carousel-item-right{transform:translate3d(100%, 0, 0)}.carousel-item-prev,.active.carousel-item-left{transform:translate3d(-100%, 0, 0)}}.carousel-control-prev,.carousel-control-next{position:absolute;top:0;bottom:0;width:15%;color:#fff;text-align:center;opacity:0.5}.carousel-control-prev:focus,.carousel-control-prev:hover,.carousel-control-next:focus,.carousel-control-next:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-prev-icon,.carousel-control-next-icon{position:absolute;top:50%;z-index:5;display:inline-block;width:20px;height:20px;margin-top:-10px;font-family:serif;line-height:1;background:transparent no-repeat center center;background-size:100% 100%}.carousel-control-prev-icon{left:50%;margin-left:-10px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E")}.carousel-control-next-icon{right:50%;margin-right:-10px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")}.carousel-indicators{position:absolute;right:0;bottom:10px;left:0;z-index:15;padding-left:0;margin-right:15%;margin-left:15%;text-align:center;list-style:none}.carousel-indicators li{position:relative;display:inline-block;width:30px;height:3px;text-indent:-999px;cursor:pointer;background-color:rgba(255,255,255,0.5)}.carousel-indicators li::before{position:absolute;top:-10px;left:0;display:inline-block;width:100%;height:10px;content:""}.carousel-indicators li::after{position:absolute;bottom:-10px;left:0;display:inline-block;width:100%;height:10px;content:""}.carousel-indicators .active{background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center} +body{color:#fff}div.site-wrap{background-color:#424242}a{color:#34c501}a:active,a:hover{color:#41f801}main p a:visited{color:#ccc}@media (min-width: 576px){nav ul.nav{color:#fff}nav ul.nav a.section:hover,nav ul.nav a.section:focus{border:none}}@media (max-width: 575px){label[for="nav-trigger"]{color:#fff;background-color:#424242}}footer{background-color:#303030;color:#e6e6e6}div.carousel{max-width:1300px;margin:0 auto}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:0.25rem;background-color:#fff;border:1px solid #ddd;border-radius:0.25rem;transition:all 0.2s ease-in-out;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:0.5rem;line-height:1}.figure-caption{font-size:90%;color:#636c72}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-item{position:relative;display:none;width:100%}@media (-webkit-transform-3d){.carousel-item{transition:transform 0.6s ease-in-out;backface-visibility:hidden;perspective:1000px}}@supports (transform: translate3d(0, 0, 0)){.carousel-item{transition:transform 0.6s ease-in-out;backface-visibility:hidden;perspective:1000px}}.carousel-item.active,.carousel-item-next,.carousel-item-prev{display:block}.carousel-item-next,.carousel-item-prev{position:absolute;top:0}@media (-webkit-transform-3d){.carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right{transform:translate3d(0, 0, 0)}.carousel-item-next,.active.carousel-item-right{transform:translate3d(100%, 0, 0)}.carousel-item-prev,.active.carousel-item-left{transform:translate3d(-100%, 0, 0)}}@supports (transform: translate3d(0, 0, 0)){.carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right{transform:translate3d(0, 0, 0)}.carousel-item-next,.active.carousel-item-right{transform:translate3d(100%, 0, 0)}.carousel-item-prev,.active.carousel-item-left{transform:translate3d(-100%, 0, 0)}}.carousel-control-prev,.carousel-control-next{position:absolute;top:0;bottom:0;width:15%;color:#fff;text-align:center;opacity:0.5}.carousel-control-prev:focus,.carousel-control-prev:hover,.carousel-control-next:focus,.carousel-control-next:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-prev-icon,.carousel-control-next-icon{position:absolute;top:50%;z-index:5;display:inline-block;width:20px;height:20px;margin-top:-10px;font-family:serif;line-height:1;background:transparent no-repeat center center;background-size:100% 100%}.carousel-control-prev-icon{left:50%;margin-left:-10px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E")}.carousel-control-next-icon{right:50%;margin-right:-10px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")}.carousel-indicators{position:absolute;right:0;bottom:10px;left:0;z-index:15;padding-left:0;margin-right:15%;margin-left:15%;text-align:center;list-style:none}.carousel-indicators li{position:relative;display:inline-block;width:30px;height:3px;text-indent:-999px;cursor:pointer;background-color:rgba(255,255,255,0.5)}.carousel-indicators li::before{position:absolute;top:-10px;left:0;display:inline-block;width:100%;height:10px;content:""}.carousel-indicators li::after{position:absolute;bottom:-10px;left:0;display:inline-block;width:100%;height:10px;content:""}.carousel-indicators .active{background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center}.carousel-inner>.carousel-item>img{width:100%} /*# sourceMappingURL=photo.css.map */ \ No newline at end of file diff --git a/assets/css/templates/photo.css.map b/assets/css/templates/photo.css.map index f1544bf185b96ea0bc645f69df67d0d1b5bac2b7..e7bb4dfbf82ec624aff5b38f0f48e652f5b4bbef 100644 GIT binary patch delta 90 zcmdmN^4VmAqEwKMqhFqTq)w`%W2%m`qocDv%gl hdV{1~bvz*~mtrR+9WDh0rM$%4)M6zoh3HtWS^%5B7@YtB delta 26 hcmextve{&VqLh%54wr(0QeI+iYO#`)LUb%wEdXwX2bBN- diff --git a/assets/scss/templates/photo.scss b/assets/scss/templates/photo.scss index 9c4f1e4..dc48783 100644 --- a/assets/scss/templates/photo.scss +++ b/assets/scss/templates/photo.scss @@ -67,3 +67,8 @@ div.carousel { // @requires animation.scss (already in main.scss) and carousel.js, util.js @import "carousel"; + +// fix responsiveness +.carousel-inner>.carousel-item>img { + width: 100%; +}