Starter/samples
1
0
Fork 0
mirror of https://github.com/flutter/samples.git synced 2025-11-08 13:58:47 +00:00
Code Issues Releases Wiki Activity

Fix carousel alignment issue (#691)

Browse Source
This commit is contained in:
Sashika Nawarathne
2021-01-29 21:54:53 +05:30
committed by GitHub
parent 192dc62b93
commit 60c5cf97eb
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/samples_index/web/styles.scss
View File

@@ -403,17 +403,17 @@ a {
// Carousel Container // Carousel Container
.slider-container { .slider-container {
position: relative; position: relative;
margin: -80px auto -60px auto; margin: 12px auto 24px auto;
width: 800px; width: 800px;
height: 600px; height: 500px;
max-width: 95%; max-width: 95%;
@media screen and (max-width: $mobile-width) { @media screen and (max-width: $mobile-width) {
margin: -80px 4px -60px 4px; margin: 12px 4px;
} }
.bullet-container { .bullet-container {
position: absolute; position: absolute;
bottom: 80px; bottom: 0;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -432,7 +432,7 @@ a {
background-color: black; background-color: black;
opacity: 0.2; opacity: 0.2;
cursor: pointer; cursor: pointer;
transition: 40ms ease; transition: 200ms ease;
&.active { &.active {
opacity: 1; opacity: 1;
@@ -445,10 +445,10 @@ a {
left: 50%; left: 50%;
top: 50%; top: 50%;
width: 70%; width: 70%;
height: 60%; height: 85%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@media screen and (max-width: $mobile-width) { @media screen and (max-width: $mobile-width) {
width: 100% width: 100%;
} }
.slider-single { .slider-single {