Commit bfa11ff7a09f768d216cb0922d35a417dca49e41
1 parent
9e2965795d
Exists in
master
and in
2 other branches
Cambio en responsividad de la botonera principal.
Showing
2 changed files
with
16 additions
and
17 deletions
Show diff stats
src/sass/_botonera-principal.scss
| 1 | 1 | .botonera-principal { |
| 2 | 2 | menuitem { |
| 3 | 3 | display: inline-block; |
| 4 | - height: 130px; | |
| 5 | 4 | text-align: center; |
| 6 | - width: 180px; | |
| 7 | - @media (max-width: 576px) { | |
| 5 | + width: 185px; | |
| 6 | + height: 145px; | |
| 7 | + @media (max-width: 565px) { | |
| 8 | 8 | width: 50%; |
| 9 | - } | |
| 10 | - @media (min-width: 992px) and (max-width: 1200px) { | |
| 11 | - width: 150px; | |
| 9 | + height: 150px; | |
| 12 | 10 | } |
| 13 | 11 | } |
| 14 | 12 | button { |
| ... | ... | @@ -20,11 +18,14 @@ |
| 20 | 18 | position: relative; |
| 21 | 19 | width: 90px; |
| 22 | 20 | outline: 0; |
| 21 | + @media (max-width: 565px) { | |
| 22 | + filter: drop-shadow(4px 4px 4px gray); | |
| 23 | + } | |
| 23 | 24 | span { |
| 24 | 25 | left: 0; |
| 25 | 26 | position: absolute; |
| 26 | 27 | text-align: center; |
| 27 | - top: 90px; | |
| 28 | + top: 105%; | |
| 28 | 29 | width: 100%; |
| 29 | 30 | font-size: 12px; |
| 30 | 31 | color: #777777; |
| ... | ... | @@ -45,7 +46,7 @@ |
| 45 | 46 | &-menu { |
| 46 | 47 | width: 100%; |
| 47 | 48 | padding-left: 90px; |
| 48 | - @media (max-width: 576px) { | |
| 49 | + @media (max-width: 565px) { | |
| 49 | 50 | padding: 0; |
| 50 | 51 | } |
| 51 | 52 | } |
| ... | ... | @@ -53,7 +54,7 @@ |
| 53 | 54 | width: 100%; |
| 54 | 55 | margin-left: 50%; |
| 55 | 56 | opacity: 0.8; |
| 56 | - @media (max-width: 576px) { | |
| 57 | + @media (max-width: 565px) { | |
| 57 | 58 | width: 180%; |
| 58 | 59 | margin-left: 20%; |
| 59 | 60 | } |
| ... | ... | @@ -234,6 +235,7 @@ |
| 234 | 235 | |
| 235 | 236 | .swiper-button-next { |
| 236 | 237 | background-image: url("../img/derecha.png"); |
| 238 | + right: 0 !important; | |
| 237 | 239 | &:hover { |
| 238 | 240 | filter: drop-shadow(4px 4px 4px gray); |
| 239 | 241 | } |
| ... | ... | @@ -241,13 +243,9 @@ |
| 241 | 243 | |
| 242 | 244 | .swiper-button-prev { |
| 243 | 245 | background-image: url("../img/izquierda.png"); |
| 246 | + left: 0 !important; | |
| 244 | 247 | &:hover { |
| 245 | 248 | filter: drop-shadow(4px 4px 4px gray); |
| 246 | 249 | } |
| 247 | 250 | } |
| 248 | - @media (min-width: 992px) { | |
| 249 | - a { | |
| 250 | - margin-top: 2.5rem; | |
| 251 | - } | |
| 252 | - } | |
| 253 | 251 | } |
src/sass/_swiper.scss
| 1 | 1 | .swiper { |
| 2 | 2 | &-container { |
| 3 | - height: 100%; | |
| 3 | + height: 55%; | |
| 4 | 4 | } |
| 5 | 5 | &-slide { |
| 6 | 6 | background: transparent; |
| 7 | - height: 400px; | |
| 7 | + width: 100% !important; | |
| 8 | + height: 100%; | |
| 8 | 9 | text-align: unset; |
| 9 | 10 | -webkit-align-items: unset; |
| 10 | 11 | align-items: unset; |
| 11 | 12 | } |
| 12 | 13 | |
| 13 | - @media(max-width: 992px){ | |
| 14 | + @media(max-width: 765px){ | |
| 14 | 15 | &-container{ |
| 15 | 16 | height: 100%; |
| 16 | 17 | } |