diff --git a/src/routes/[country]/[location]/index.svelte b/src/routes/[country]/[location]/index.svelte index 0a1ed63..735462a 100644 --- a/src/routes/[country]/[location]/index.svelte +++ b/src/routes/[country]/[location]/index.svelte @@ -143,7 +143,7 @@
- {#each photos as { title, image: { id, title: alt }, slug, date_taken }} + {#each photos as { title, image: { id, title: alt }, slug, date_taken }, index}
{/each} diff --git a/src/style/organisms/_house.scss b/src/style/organisms/_house.scss index b196495..65147a5 100644 --- a/src/style/organisms/_house.scss +++ b/src/style/organisms/_house.scss @@ -42,10 +42,34 @@ // Photo number &__index { - position: absolute; - right: -250px; - top: 50%; - transform: translateY(-50%); - z-index: 1; + @include bp (sm) { + position: absolute; + z-index: 1; + left: 112.5%; + width: 400px; + top: 50%; + text-align: left; + transform: translate3d(-50%, -50%, 0); + } + } + + // Even photos + &:nth-child(even) { + .house { + &__photo { + grid-column-start: 4; + } + &__info { + margin-left: auto; + text-align: right; + } + &__index { + @include bp (sm) { + right: auto; + left: -12%; + text-align: right; + } + } + } } } \ No newline at end of file diff --git a/src/style/pages/_location.scss b/src/style/pages/_location.scss index ed75ca3..86d8dec 100644 --- a/src/style/pages/_location.scss +++ b/src/style/pages/_location.scss @@ -126,22 +126,6 @@ &:not(:last-child) { margin-bottom: 120px; } - - &:nth-child(even) { - .house { - &__photo { - grid-column-start: 4; - } - &__info { - margin-left: auto; - text-align: right; - } - &__index { - right: auto; - left: -250px; - } - } - } } // Next photos section @@ -190,7 +174,7 @@ margin: 0 -10px; } } - & > p { + p { display: block; margin: 16px auto 0; text-align: center;