jannik/web-jbeyerstedt
1
0
Fork 0
Code Releases Activity

[FIX] bootstrap carousel would not adapt to screen width

Browse source
This commit is contained in:
Jannik Beyerstedt 2016-12-16 23:41:53 +01:00
parent aaa48a2e22
commit 6c12449993
3 changed files with 6 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/css/templates/photo.css
View file

@ -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 */ /*# sourceMappingURL=photo.css.map */

BIN
assets/css/templates/photo.css.map
View file

Binary file not shown.

5
assets/scss/templates/photo.scss
View file

@ -67,3 +67,8 @@ div.carousel {
// @requires animation.scss (already in main.scss) and carousel.js, util.js // @requires animation.scss (already in main.scss) and carousel.js, util.js
@import "carousel"; @import "carousel";
// fix responsiveness
.carousel-inner>.carousel-item>img {
width: 100%;
}