Skip to content

Commit

Permalink
fix: cards image display on mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@gtnsimon
gtnsimon committed Nov 14, 2021
1 parent ed1fb90 commit 0ee85bc
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 48 deletions.
108 changes: 63 additions & 45 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,11 +144,13 @@ <h2 class="cards-group__item__title">Hébergements à Marseille</h2>
<li class="cards-list__item">
<a href="#" title="Consulter l'auberge La Cannebière" class="cards-list__item__wrapper">
<article class="cards-list__item__container">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/marcus-loke-WQJvWU_HZFo-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/marcus-loke-WQJvWU_HZFo-unsplash.jpg">
<img src="./images/hebergements/4_small/marcus-loke-WQJvWU_HZFo-unsplash.jpg" alt="Aperçu de la chambre" width="250">
</picture>
<div class="cards-list__item__cover-wrapper">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/marcus-loke-WQJvWU_HZFo-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/marcus-loke-WQJvWU_HZFo-unsplash.jpg">
<img src="./images/hebergements/4_small/marcus-loke-WQJvWU_HZFo-unsplash.jpg" alt="Aperçu de la chambre" width="250">
</picture>
</div>

<div class="cards-list__item__content">
<header class="cards-list__item__header">
Expand All @@ -168,11 +170,13 @@ <h3 class="cards-list__item__title">Auberge La Cannebière</h3>
<li class="cards-list__item">
<a href="#" title="Consulter l'hôtel du port" class="cards-list__item__wrapper">
<article class="cards-list__item__container">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/fred-kleber-gTbaxaVLvsg-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/fred-kleber-gTbaxaVLvsg-unsplash.jpg">
<img src="./images/hebergements/4_small/fred-kleber-gTbaxaVLvsg-unsplash.jpg" alt="Aperçu de la chambre" width="250">
</picture>
<div class="cards-list__item__cover-wrapper">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/fred-kleber-gTbaxaVLvsg-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/fred-kleber-gTbaxaVLvsg-unsplash.jpg">
<img src="./images/hebergements/4_small/fred-kleber-gTbaxaVLvsg-unsplash.jpg" alt="Aperçu de la chambre" width="250">
</picture>
</div>

<div class="cards-list__item__content">
<header class="cards-list__item__header">
Expand All @@ -192,11 +196,13 @@ <h3 class="cards-list__item__title">Hôtel du port</h3>
<li class="cards-list__item">
<a href="#" title="Consulter l'hôtel Les mouettes" class="cards-list__item__wrapper">
<article class="cards-list__item__container">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/reisetopia-B8WIgxA_PFU-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/reisetopia-B8WIgxA_PFU-unsplash.jpg">
<img src="./images/hebergements/4_small/reisetopia-B8WIgxA_PFU-unsplash.jpg" alt="Aperçu de la chambre" width="250">
</picture>
<div class="cards-list__item__cover-wrapper">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/reisetopia-B8WIgxA_PFU-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/reisetopia-B8WIgxA_PFU-unsplash.jpg">
<img src="./images/hebergements/4_small/reisetopia-B8WIgxA_PFU-unsplash.jpg" alt="Aperçu de la chambre" width="250">
</picture>
</div>

<div class="cards-list__item__content">
<header class="cards-list__item__header">
Expand All @@ -216,11 +222,13 @@ <h3 class="cards-list__item__title">Hôtel Les mouettes</h3>
<li class="cards-list__item">
<a href="#" title="Consulter l'hôtel de la mer" class="cards-list__item__wrapper">
<article class="cards-list__item__container">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/annie-spratt-Eg1qcIitAuA-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/annie-spratt-Eg1qcIitAuA-unsplash.jpg">
<img src="./images/hebergements/4_small/annie-spratt-Eg1qcIitAuA-unsplash.jpg" alt="Aperçu de la chambre" width="250">
</picture>
<div class="cards-list__item__cover-wrapper">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/annie-spratt-Eg1qcIitAuA-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/annie-spratt-Eg1qcIitAuA-unsplash.jpg">
<img src="./images/hebergements/4_small/annie-spratt-Eg1qcIitAuA-unsplash.jpg" alt="Aperçu de la chambre" width="250">
</picture>
</div>

<div class="cards-list__item__content">
<header class="cards-list__item__header">
Expand All @@ -240,11 +248,13 @@ <h3 class="cards-list__item__title">Hôtel de la mer</h3>
<li class="cards-list__item">
<a href="#" title="Consulter l'auberge Le Panier" class="cards-list__item__wrapper">
<article class="cards-list__item__container">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/nicate-lee-kT-ZyaiwBe0-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/nicate-lee-kT-ZyaiwBe0-unsplash.jpg">
<img src="./images/hebergements/4_small/nicate-lee-kT-ZyaiwBe0-unsplash.jpg" alt="Aperçu de la chambre" width="250">
</picture>
<div class="cards-list__item__cover-wrapper">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/nicate-lee-kT-ZyaiwBe0-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/nicate-lee-kT-ZyaiwBe0-unsplash.jpg">
<img src="./images/hebergements/4_small/nicate-lee-kT-ZyaiwBe0-unsplash.jpg" alt="Aperçu de la chambre" width="250">
</picture>
</div>

<div class="cards-list__item__content">
<header class="cards-list__item__header">
Expand All @@ -264,11 +274,13 @@ <h3 class="cards-list__item__title">Auberge Le Panier</h3>
<li class="cards-list__item">
<a href="#" title="Consulter l'hôtel chez Amina" class="cards-list__item__wrapper">
<article class="cards-list__item__container">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/febrian-zakaria-M6S1WvfW68A-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/febrian-zakaria-M6S1WvfW68A-unsplash.jpg">
<img src="./images/hebergements/4_small/febrian-zakaria-M6S1WvfW68A-unsplash.jpg" alt="Aperçu de la chambre" width="250">
</picture>
<div class="cards-list__item__cover-wrapper">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/febrian-zakaria-M6S1WvfW68A-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/febrian-zakaria-M6S1WvfW68A-unsplash.jpg">
<img src="./images/hebergements/4_small/febrian-zakaria-M6S1WvfW68A-unsplash.jpg" alt="Aperçu de la chambre" width="250">
</picture>
</div>

<div class="cards-list__item__content">
<header class="cards-list__item__header">
Expand Down Expand Up @@ -297,11 +309,13 @@ <h2 class="cards-group__item__title">Les plus populaires</h2>
<li class="cards-list__item cards-list__item--paysage">
<a href="#" title="Consulter l'hôtel Le soleil du matin" class="cards-list__item__wrapper">
<article class="cards-list__item__container">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/emile-guillemot-Bj_rcSC5XfE-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/emile-guillemot-Bj_rcSC5XfE-unsplash.jpg">
<img src="./images/hebergements/4_small/emile-guillemot-Bj_rcSC5XfE-unsplash.jpg" alt="Aperçu de la chambre" width="250">
</picture>
<div class="cards-list__item__cover-wrapper">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/emile-guillemot-Bj_rcSC5XfE-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/emile-guillemot-Bj_rcSC5XfE-unsplash.jpg">
<img src="./images/hebergements/4_small/emile-guillemot-Bj_rcSC5XfE-unsplash.jpg" alt="Aperçu de la chambre" width="136" height="136">
</picture>
</div>

<div class="cards-list__item__content">
<header class="cards-list__item__header">
Expand All @@ -321,11 +335,13 @@ <h3 class="cards-list__item__title">Hôtel Le soleil du matin</h3>
<li class="cards-list__item cards-list__item--paysage">
<a href="#" title="Consulter au cœur de l'eau Chambres d'hôtes" class="cards-list__item__wrapper">
<article class="cards-list__item__container">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/aw-creative-VGs8z60yT2c-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/aw-creative-VGs8z60yT2c-unsplash.jpg">
<img src="./images/hebergements/4_small/aw-creative-VGs8z60yT2c-unsplash.jpg" alt="Aperçu de la chambre" width="250">
</picture>
<div class="cards-list__item__cover-wrapper">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/aw-creative-VGs8z60yT2c-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/aw-creative-VGs8z60yT2c-unsplash.jpg">
<img src="./images/hebergements/4_small/aw-creative-VGs8z60yT2c-unsplash.jpg" alt="Aperçu de la chambre" width="136" height="136">
</picture>
</div>

<div class="cards-list__item__content">
<header class="cards-list__item__header">
Expand All @@ -345,11 +361,13 @@ <h3 class="cards-list__item__title">Au cœur de l'eau Chambres d'hôtes</h3>
<li class="cards-list__item cards-list__item--paysage">
<a href="#" title="Consulter l'hôtel Tout bleu et Blanc" class="cards-list__item__wrapper">
<article class="cards-list__item__container">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/febrian-zakaria-sjvU0THccQA-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/febrian-zakaria-sjvU0THccQA-unsplash.jpg">
<img src="./images/hebergements/4_small/febrian-zakaria-sjvU0THccQA-unsplash.jpg" alt="Aperçu de la chambre" width="250">
</picture>
<div class="cards-list__item__cover-wrapper">
<picture class="cards-list__item__cover">
<source media="(min-width: 992px)" srcset="./images/hebergements/2_large/febrian-zakaria-sjvU0THccQA-unsplash.jpg">
<source media="(min-width: 768px)" srcset="./images/hebergements/3_medium/febrian-zakaria-sjvU0THccQA-unsplash.jpg">
<img src="./images/hebergements/4_small/febrian-zakaria-sjvU0THccQA-unsplash.jpg" alt="Aperçu de la chambre" width="136" height="136">
</picture>
</div>

<div class="cards-list__item__content">
<header class="cards-list__item__header">
Expand Down
18 changes: 15 additions & 3 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -307,18 +307,28 @@ a {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.cards-list__item__cover {
.cards-list__item__cover-wrapper {
position: relative;
display: block;
overflow: hidden;
height: 112px;
min-height: 112px;
line-height: 0;
border-radius: 20px 20px 0 0;
}

.cards-list__item__cover {
display: block;
width: 100%;
height: 100%;
line-height: 0;
}

.cards-list__item__cover > img {
object-fit: cover;
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
}

.cards-list__item__content {
Expand Down Expand Up @@ -356,6 +366,7 @@ a {

.cards-list__item__stars::before {
position: absolute;
z-index: 0;
top: 0;
left: 0;
visibility: visible;
Expand All @@ -365,6 +376,7 @@ a {

.cards-list__item__stars::after {
position: absolute;
z-index: 1;
top: 0;
left: 0;
visibility: visible;
Expand Down Expand Up @@ -405,9 +417,9 @@ a {
padding: 6px 16px;
}

.cards-list__item--paysage .cards-list__item__cover {
.cards-list__item--paysage .cards-list__item__cover-wrapper {
flex: 0 0 136px;
min-height: 112px;
height: auto;
border-radius: 20px 0 0 20px;
}

Expand Down

0 comments on commit 0ee85bc

Please sign in to comment.