search

CampusMadridProjects / directory-frontend

Campus Directory Frontend: A Progressive Web App made with VueJS.
MIT License
8 stars 0 forks source link

Update CSS for Mobile devices to enable 2/4 visible cards per viewport. #9

Closed musikame closed 6 years ago

musikame commented 6 years ago

Suggested updates (for review @ivoriginal, @CodingCarlos):

@media (min-width: 600px){

.card-user-pic{
    calc(40vw - 32px)
}

}

@media (min-width: 0px){

.card-user-pic{
    calc(40vw - 32px)
}

}

.flex.xs12 { flex-basis: 50%; }

.headline { font-size: 16px!important; }

CodingCarlos commented 6 years ago

You can also achieve that by using the grid system built in vuetify framework.

Will provide more details tonight, now I'm quite busy, sorry :S

El vie., 24 ago. 2018 13:24, Edu Duque notifications@github.com escribió:

Suggested updates (for review @ivoriginal https://github.com/ivoriginal, @CodingCarlos https://github.com/CodingCarlos):

@media https://github.com/media (min-width: 600px){

.card-user-pic{ calc(40vw - 32px) }

}

@media https://github.com/media (min-width: 0px){

.card-user-pic{ calc(40vw - 32px) }

}

.flex.xs12 { flex-basis: 50%; }

.headline { font-size: 16px!important; }

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/CampusMadridProjects/directory-frontend/issues/9, or mute the thread https://github.com/notifications/unsubscribe-auth/AHDVP8SPALInPsDoKhX5PqdsDQpQW2A9ks5uT-JLgaJpZM4WLL5H .

musikame commented 6 years ago

Good call, probably better to manage that way (not familiar with vuetify) to have a similar visual effect, Gcs Carlos!

CodingCarlos commented 6 years ago

Fixed in #18 and waiting to production