Fix per_page=100 for items results.

src/app/app.component.css

@@ -14,6 +14,10 @@ div.title h3 span.tablet-term b {font-weight:bold;cursor:pointer;}
 div.title h3 span.tablet-term b:hover {transform:rotate(-45deg);opacity:0.6;}
 
 @media screen and (max-device-width: 720px) {
-  div.title {position:relative;width:100vw;padding:10px 0; background:#d52b1e;}
+  div.title {position:relative;width:100vw;padding:10px 0; background:#d52b1e;padding-bottom:30px;}
-  div.title h2 span {float:left;width:40%;margin:5px 5px;text-align:center;}
+  div.title h2 {display:inline-block;}
+  div.title h2 span {float:left;width:100%;text-align:center;margin:auto;background:none;}
+  div.title h2 span a {background:transparent;}
+  div.title h1 {width:100%;display:flex;flex-wrap:wrap;font-size:3rem;text-align:center;}
+  div.title h1 span {width:100%;}
 }

src/app/app.component.html

@@ -1,5 +1,5 @@
 <div class="title">
-  <h3 style="color:#000;" *ngIf="filter">Filtered by : <span class="tablet-term">{{filter.name}} <b (click)="delFilter(filter)">x</b></span></h3>
+  <h3  class="title-filter" *ngIf="filter">Filtered by : <span class="tablet-term">{{filter.name}} <b (click)="delFilter(filter)">x</b></span></h3>
   <h1><span>Ticino</span> <span>Soundmap</span></h1>
   <h2><span *ngFor="let page of pages" style="" (click)="goToAnchor(page.slug)"><a style="color:#fff;" [innerHTML]="page.title.rendered"></a></span></h2>
   <!-- <p><span>Welcome to SOINUMAPA.NET Basque country Sound Map open archive project. Based on phonography or the art of recording environmental sounds, our aim is to show, share and exchange field recordings made in the Basque Country. Right now, you will find more than 1500 sound recordings: city noises, natural ambiences, animals, celebrations and parties, places, happenings, cultural events… including images and texts that behind their apparent silence, keep many sounds (see ABOUT) inside.

src/app/map-box/map-box.component.css

@@ -1,5 +1,7 @@
 div.map {z-index:1;position:absolute;top:0;left:0;width:100%;width:100vw;height:100%;height:100vh; }
+h3.map-title-filter {display:none;width:100%;}
 
 @media screen and (max-device-width: 720px) {
-  div.map {position:relative;}
+  div.map {position:relative;height:80vh;}
+  h3.map-title-filter {display:block;top:0;z-index:19;width:100%;width:80vw;position:absolute;margin-top:20px;margin-left:20px;}
 }

src/app/map-box/map-box.component.html

@@ -1 +1,2 @@
 <div class="map" id="map"></div>
+<h3  class="map-title-filter" *ngIf="filter"><span class="tablet-term">{{filter.name}} <b (click)="delFilter(filter)">x</b></span></h3>

src/app/map-box/map-box.component.ts

@@ -182,6 +182,10 @@ export class MapBoxComponent implements OnInit {
     //this.source.setData(this.mapService.getSource(term))
   }
 
+  delFilter(filter) {
+    this.mapService.delFilter(filter);
+  }
+
 
 
 }

src/app/pages/pages.component.css

@@ -20,9 +20,9 @@ footer div.info-footer {max-width:1000px;font-size:0.8rem;text-align:center;marg
 
 /* media query */
 @media screen and (max-device-width: 720px) {
-  div.page-container div.col-left  {margin:auto; width:100%;width:100%; min-height:0;clear:both;}
+  div.page-container div.col-left  {margin:auto; width:100%;width:100%; min-height:0;clear:both;min-width:0;}
-  div.page-container div.col-right {background-color:#d52b1e;margin:auto; width:100%;width:80vw;clear:both;}
+  div.page-container div.col-right {background-color:#d52b1e;margin:auto; width:100%;clear:both;min-width:0;}
   div.page-container h1 {min-width:0;width:100%;height:80%;margin:auto;padding:0;text-align:center;}
   div.page-container {padding:0 20px;}
-  div.container-map-pages {background-color:#d52b1e;}
+  div.container-map-pages {background-color:#d52b1e;padding-top:0;}
 }

src/app/wordpress.service.ts

@@ -30,7 +30,7 @@ export class WordpressService {
   }
 
   public getMarker(slug:string = "", term:any = ''):Observable<PageItem[]> {
-    let params = "?_embed";
+    let params = "?_embed&per_page=100";
     if (slug!="") params = params+"&slug="+slug;
     if (term!="") {
       let collection = term["_links"]['collection'][0]['href']

src/styles.css

@@ -5,12 +5,14 @@ html {  scroll-behavior: smooth;}
 body {padding:0;font-size:12pt;overflow-x:hidden;font-family:'Raleway',sans-serif;margin:0}
 a {color:#fff;padding:0 5px;background-color:#333;font-weight:bold;text-decoration:none;}
 h1,h2,h3,h4,h5,h6 {font-family:'Oswald';}
-div.modal {z-index:20;display:block;position:absolute;top:0;left:0;width:100vw;height:100vh;width:100%;height:100%; background-color:rgba(255,255,255,0.8);overflow-y:scroll;}
+div.modal {z-index:20;display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;width:100%;height:100%; background-color:rgba(255,255,255,0.8);overflow-y:scroll;}
 div.content { position:relative;display:block;height:100%;overflow:auto;font-size:1em;background:#fff;border:1px solid #eee;padding:30px;border-radius:1px; position:relative; width:80vw;min-height:50vh;margin:auto;margin-top:2vh;margin-bottom:10vh;}
 div.col-left-70 {position:relative;float:right;width:66%;padding-left:1%;padding-right:1%;}
 div.col-right-30 {border-right:1px solid #ccc;position:relative;float:right;width:28%;padding-left:1%;padding-right:1%;}
-div.content h1 span {font-size:3em;padding:0 20px;}
+div.content h1 span {font-size:3em;padding:0;}
+
 div.title h2 span { background:#ccc; color:#fff; padding:0 20px;}
+div.title h3 {color:#000; }
 div.content h1,h2,h3,h4,h5 {text-decoration:none; font-size:1em;color:#d52b1e;}
 div.content div.content-col > * {margin:0 20px;height:100%;display:block;}
 div.content div.col-right-30 > * {margin-bottom:20px;}
@@ -31,6 +33,11 @@ div.content div.audio-box {clear:both;}
 div.content-metadata {top:20px;position:relative;}
 div.content div.audio-box ul li {padding:3px 0;font-size:0.8em;}
 
+/*filter */
+span.tablet-term { background:#d52b1e;color:#fff; padding:2px 10px;}
+span.tablet-term b {font-weight:bold;cursor:pointer;}
+span.tablet-term b:hover {transform:rotate(-45deg);opacity:0.6;}
+
 
 /* pages */
 app-pages div.container-map-pages {padding-top:100vh;background-color:#d52b1e;}
@@ -41,4 +48,10 @@ div.mapboxgl-ctrl-bottom-left { display:none;}
 
 @media screen and (max-device-width: 720px) {
     body { background-color:#d52b1e}
+    div.col-right-30 {width:100%; border:0;}
+    div.col-left-70 {width:100%;}
+    div.title h3 {display:none;}
+    map-box {position:relative;height:80vh;}
+    div.content h1 span {font-size:2em;}
+
 }