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 {
constructor() {}
constructor() {}
selectors() {}
selectors() {}
events() {}
events() {}
}
$(".slider-info").slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
variableWidth: true,
arrows: true,
dots: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 4,
infinite: true,
dots: false,
arrows: false,
vertical: true,
verticalScrolling: false,
swipe: false,
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
variableWidth: true,
arrows: true,
dots: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 4,
infinite: true,
dots: false,
arrows: false,
vertical: true,
verticalScrolling: false,
swipe: false,
variableWidth: true,
draggable: false,
},
},
{
breakpoint: 375,
settings: {
slidesToShow: 4,
slidesToScroll: 4,
infinite: true,
dots: false,
arrows: false,
vertical: true,
verticalScrolling: false,
swipe: false,
},
},
],
}
},
{
breakpoint: 375,
settings: {
slidesToShow: 4,
slidesToScroll: 4,
infinite: true,
dots: false,
arrows: false,
vertical: true,
verticalScrolling: false,
swipe: false,
variableWidth: true,
draggable: false
}
},
],
});

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

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