anacarolinaduartecavalcante/challenge-tourist-attractions-ana-carolina-duarte-cavalcante
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: adicionando breakpoint para tablet

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-11-17 16:28:08 -03:00
parent 4c1583d513
commit c86d36531c
4 changed files with 138 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/scripts/components/slider.js
View File

@ -1,45 +1,50 @@
export class Slider { export class Slider {
constructor() {} constructor() {}
selectors() {} selectors() {}
events() {} events() {}
} }
$(".slider-info").slick({ $(".slider-info").slick({
infinite: true, infinite: true,
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 1,
variableWidth: true, variableWidth: true,
arrows: true, arrows: true,
dots: true, dots: true,
responsive: [ responsive: [
{ {
breakpoint: 1024, breakpoint: 1024,
settings: { settings: {
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 4, slidesToScroll: 4,
infinite: true, infinite: true,
dots: false, dots: false,
arrows: false, arrows: false,
vertical: true, vertical: true,
verticalScrolling: false, verticalScrolling: false,
swipe: false, swipe: false,
variableWidth: true,
draggable: false,
},
}, }
{ },
breakpoint: 375, {
settings: { breakpoint: 375,
slidesToShow: 4, settings: {
slidesToScroll: 4, slidesToShow: 4,
infinite: true, slidesToScroll: 4,
dots: false, infinite: true,
arrows: false, dots: false,
vertical: true, arrows: false,
verticalScrolling: false, vertical: true,
swipe: false, verticalScrolling: false,
}, swipe: false,
}, variableWidth: true,
], draggable: false
}
},
],
}); });

8
src/styles/partials/container.scss
View File

@ -9,8 +9,10 @@
$breakpoint-tablet: 1024px; $breakpoint-tablet: 1024px;
@media (max-width: $breakpoint-tablet) { @media (max-width: $breakpoint-tablet) {
.container { .container {
max-width: 100vw; width: 96.87%;
width: 100%; margin: 40px auto;
margin: 0 16px; display: flex;
justify-content: center;
flex-direction: column;
} }
} }

51
src/styles/partials/form.scss
View File

@ -110,3 +110,54 @@ form {
.input-image-container img { .input-image-container img {
position: absolute; position: absolute;
} }
$breakpoint-tablet: 1024px;
@media (max-width: $breakpoint-tablet) {
form {
width: 100%;
height: 873.78px;
.form-container {
.form-inputs {
flex-direction: column;
width: 100%;
gap: 16px;
.input-image-container {
width: 100%;
height: 570px;
.input-image-content {
width: 100%;
height: 570px;
}
}
.form-input-descricao {
width: 100%;
height: 287.78px;
gap: 16px;
.input-titulo {
width: 100%;
height: 56px;
}
.description-content {
width: 100%;
height: 215.78px;
.input-descricao {
width: 100%;
height: 136px;
}
& button {
width: 100%;
padding: 16px 0;
float: none;
}
}
.input-descricao,
.input-titulo {
padding: 10px 16px;
}
}
}
}
}
}

50
src/styles/partials/slider.scss
View File

@ -28,7 +28,7 @@ h2 {
} }
& img { & img {
width: 100%; width: 100%;
object-fit: contain; object-fit: cover;
height: 212px; height: 212px;
border-radius: 8px; border-radius: 8px;
} }
@ -100,10 +100,10 @@ $breakpoint-tablet: 1024px;
@media (max-width: $breakpoint-tablet) { @media (max-width: $breakpoint-tablet) {
.slider-container { .slider-container {
margin-top: 60px; margin-top: 60px;
margin-bottom: 128px; margin-bottom: 64px;
position: relative; position: relative;
.slider { .slider {
width: 100vw; width: 100%;
margin: 0 auto; margin: 0 auto;
& ul { & ul {
margin-top: 38px; margin-top: 38px;
@ -111,15 +111,16 @@ $breakpoint-tablet: 1024px;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
& .slider-content { & .slider-content {
width: 100vw; width: 100%;
padding: 16px; padding: 0;
height: auto; height: auto;
min-height: 710px; min-height: 710px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: space-between;
&:not(:first-child) { &:not(:first-child) {
margin-left: 0; margin-left: 0;
margin-top: 24px;
} }
& img { & img {
width: 100%; width: 100%;
@ -128,18 +129,11 @@ $breakpoint-tablet: 1024px;
border-radius: 8px; border-radius: 8px;
} }
& h3 { & h3 {
font-weight: 700; width: 100%;
font-size: 24px;
line-height: 28px;
color: $title-item-list-color; color: $title-item-list-color;
height: 60px;
margin: 24px 24px 8px 24px;
} }
& p { & p {
padding: 0 24px 0 24px; padding: 0 24px 24px 24px;
font-weight: 400;
font-size: 16px;
line-height: 24px;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
@ -152,4 +146,30 @@ $breakpoint-tablet: 1024px;
.slick-dots li button{ .slick-dots li button{
display: none; display: none;
} }
.slick-track{
max-width: 100%;
margin-top: 0;
display: flex;
flex-direction: column;
transform: translate3d(0, 0, 0)!important;
}
.slick-list{
max-width: 100%;
}
.slick-prev {
left: 0;
&:before {
display: none;
}
}
.slick-next {
right: 0;
&:before {
display: none;
}
}
} }