diff --git a/components/ProjectModal.tsx b/components/ProjectModal.tsx
index 8b27049..4d1061b 100644
--- a/components/ProjectModal.tsx
+++ b/components/ProjectModal.tsx
@@ -53,7 +53,7 @@ const ProjectModal: NextPage = () => {
);
- return
{prev}{currentPage > 0 ? | : null}{select}{currentPage < currentContent.entries.length ? | : null}{next}
;
+ return {prev} 0 ? "visible" : "hidden"}}> | {select} | {next}
;
})();
return
diff --git a/styles/ProjectModal.module.css b/styles/ProjectModal.module.css
index 338eeed..124caa9 100644
--- a/styles/ProjectModal.module.css
+++ b/styles/ProjectModal.module.css
@@ -41,7 +41,7 @@
z-index: 100;
}
-/* Mobile possitioning */
+/* Non-mobile positioning */
@media all and (min-width: 1050px) {
.modalClose {
position: relative;
@@ -96,8 +96,8 @@
}
.pageSelector {
- display: flex;
- flex-direction: row;
+ display: grid;
+ grid-template-columns: 1fr max-content max-content max-content 1fr;
font-family: sans-serif;
}
@@ -120,14 +120,26 @@
text-decoration: underline;
}
-.leftSelectSpace, .rightSelectSpace {
- flex-grow: 2;
-}
-
.leftSelectSpace {
- text-align: right;
+ justify-self: right;
}
.rightSelectSpace {
- text-align: left;
+ justify-self: left;
}
+
+
+/* On mobile we only want to show the html select */
+@media all and (max-width: 500px) {
+ .leftSelectSpace, .rightSelectSpace, .pageSelector span {
+ display: none;
+ }
+ .pageSelector select {
+ margin-left: auto;
+ margin-right: auto;
+ display: block;
+ }
+ .pageSelector {
+ display: block;
+ }
+}
\ No newline at end of file