diff --git a/frontend/components/Carousel/index.tsx b/frontend/components/Carousel/index.tsx index ebf75fad..dff464c6 100644 --- a/frontend/components/Carousel/index.tsx +++ b/frontend/components/Carousel/index.tsx @@ -22,7 +22,10 @@ const carouselSettings = { }; const baseButtonStyle = css` position: absolute; - top: calc(40% + 10px); + border-radius: 50%; + width: 45px; + height: 45px; + top: calc(40% + 0px); `; const PreviousButton = Styled(Button)` ${baseButtonStyle} diff --git a/frontend/containers/landing-page/Components/ReviewItems.tsx b/frontend/containers/landing-page/Components/ReviewItems.tsx index eadabbfe..72336f89 100644 --- a/frontend/containers/landing-page/Components/ReviewItems.tsx +++ b/frontend/containers/landing-page/Components/ReviewItems.tsx @@ -5,21 +5,20 @@ import { Carousel } from 'components/Carousel'; const CardComponent = Styled.div` display: flex; overflow: hidden; - width: 250px; height: 180px; - text-align: center; border: 1.5px solid rgb(210,209,209); border-radius: 17px; - margin: 0 10px; background: #ffffff url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTEa0kE1BQAkvPikex-btLIzZ7UbZZZO0YuvvUbSM7q1tLtGMeR) no-repeat right top; - background-size: 250px 180px; + background-size: 100%; flex-direction: column; justify-content: flex-end; text-align: left; - `; const CardWrapper = Styled.div` padding: 20px 0; + & ul.alice-carousel__stage li.alice-carousel__stage-item{ + padding:0 5px; + } `; const Title = Styled.div` @@ -43,6 +42,11 @@ color: white; font-size: .7em; } `; +const CarouselStyled = Styled(Carousel)` + & .alice-carousel__stage-item{ + padding:0 5px; + } +`; interface Props { title: string; subTitle?: string; @@ -63,7 +67,7 @@ export const ReviewItems: React.FunctionComponent = ({ {title} - + {items.map((item, index) => ( @@ -72,7 +76,7 @@ export const ReviewItems: React.FunctionComponent = ({ ))} - + ); };