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