Fix/fixed header

src/components/header/style.module.scss

@@ -54,7 +54,6 @@
   }
 
   .title {
-    width: 80%;
     padding: 0;
     margin: 0;
     border: 0;
@@ -63,6 +62,7 @@
     font-size: 60px;
     font-weight: 300;
     line-height: 0.85;
+    text-align: left;
 
     @media screen and (max-width: map-get($breakpoints, md)) {
       font-size: 35px;
@@ -76,6 +76,7 @@
     border: 0;
     border-radius: 100%;
     background: white;
+    text-align: center;
     cursor: pointer;
     box-shadow: $box-shadow;
 
@@ -94,10 +95,4 @@
       }
     }
   }
-  .invisible {
-    display: block;
-  }
-  .visible {
-    display: none;
-  }
 }

src/components/location-modal/component.js

@@ -68,7 +68,7 @@ class LocationSelector extends PureComponent {
       <Fragment>
         <MediaQuery maxWidth={breakpoints.md - 1}>
           <Modal
-            className={styles.location}
+            className={classnames(styles.location, styles.mobile)}
             isOpen={isOpened}
             onRequestClose={this.closeModal}
           >
@@ -105,7 +105,7 @@ class LocationSelector extends PureComponent {
                 ))}
               </ul>
             </div>
-            <button type="button" onClick={this.closeModal} className={styles.searchButton}>
+            <button type="button" onClick={this.closeModal} className={classnames(styles.searchButton, styles.mobile)}>
               <FontAwesomeIcon icon={faTimes} size="lg" />
             </button>
           </Modal>

src/components/map/component.js

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import MapGL, { NavigationControl } from 'react-map-gl';
 import PropTypes from 'prop-types';
 import MediaQuery from 'react-responsive';
-import LegendMobileControl from 'components/map-legend/mobile';
+import MobileLegendControl from 'components/map-legend/mobile';
 import classnames from 'classnames';
 import { breakpoints } from 'utils/responsive';
 import BasemapSelector from 'components/basemap-selector';
@@ -83,7 +83,7 @@ class Map extends PureComponent {
           { [styles.expanded]: !isCollapse })}
         >
           <MediaQuery maxWidth={breakpoints.md - 1}>
-            <LegendMobileControl />
+            <MobileLegendControl />
           </MediaQuery>
           <div className={styles.tooltip}>
             <Legend />

src/components/widget/templates/highlighted-places/component.js

@@ -11,10 +11,12 @@ const HighlightedPlaces = ({ data, currentLocation }) => (
         key={d.id}
         className={classnames(styles.card, { [styles.active]: d.id === currentLocation.id })}
       >
-        <h3 className="notranslate">{d.name}</h3>
-        <p><span className="notranslate">{d.coast_length_m}</span> <span className="notranslate">{d.unit}</span> <span>coastline</span></p>
-        {d.id !== currentLocation.id && <Link to={{ type: 'PAGE/AOI', payload: { id: d.id } }}>View place</Link>}
-        {d.id === currentLocation.id && <Link to={{ type: 'PAGE/APP', payload: { id: 'worldwide' } }}>Back to Worldwide</Link>}
+        <span className={styles.cardInfo}>
+          <h3 className="notranslate">{d.name}</h3>
+          <p><span className="notranslate">{d.coast_length_m}</span> <span className="notranslate">{d.unit}</span> <span>coastline</span></p>
+        </span>
+        {d.id !== currentLocation.id && <Link to={{ type: 'PAGE/AOI', payload: { id: d.id } }}><span className={styles.link}>View place</span></Link>}
+        {d.id === currentLocation.id && <Link to={{ type: 'PAGE/AOI', payload: { id: 'worldwide' } }}><span className={styles.link}>Back to Worldwide</span></Link>}
       </div>
     ))}
   </div>