<p>In <a href="https://github.com/openstreetmap/openstreetmap-website/pull/1240#discussion_r67928201">app/views/layouts/map.html.erb</a>:</p>
<pre style='color:#555'>> @@ -46,12 +46,17 @@
>  
>      <% unless @user %>
>        <div class="welcome">
> -        <h2><a><span class="icon close"></span></a><%= t 'layouts.intro_header' %></h2>
> +        <h2><%= t 'layouts.intro_header' %></h2>
> +        <div class="close-wrap"><span class="icon close"></span></div>
</pre>
<p>Good question - I added <code>close-wrap</code> to give the close button a larger touch target.<br>
We use <code>class="icon close"</code> a lot of places to draw those close icons.. I didn't want to change all of them, just the ones on the Welcome and the Banner divs.</p>

<p>If we just absolutely position the close icon on top of the banner without the wrapping div, we get this:<br>
<a href="https://cloud.githubusercontent.com/assets/38784/16241979/513218f4-37be-11e6-8046-32c9c60641a9.png" target="_blank"><img width="516" alt="screenshot 2016-06-21 14 39 35" src="https://cloud.githubusercontent.com/assets/38784/16241979/513218f4-37be-11e6-8046-32c9c60641a9.png" style="max-width:100%;"></a></p>

<p>The problem with that is: if the user misses clicking on that little 'X', their click will go to the banner div and it will send them to the other website.</p>

<p>With the <code>close-wrap</code>, the user has a much larger target to click, and won't accidentally click the banner.:</p>

<p><a href="https://cloud.githubusercontent.com/assets/38784/16241987/56d1b210-37be-11e6-9071-40f4724442d3.png" target="_blank"><img width="459" alt="screenshot 2016-06-21 14 37 58" src="https://cloud.githubusercontent.com/assets/38784/16241987/56d1b210-37be-11e6-9071-40f4724442d3.png" style="max-width:100%;"></a></p>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />You are receiving this because you are subscribed to this thread.<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/1240/files/933335a0ea28f274bc7301c18611bcd90709fd99#r67928201">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe/ABWnLQY6Ipemt6Z2LYdE-jIH4KB1ixBHks5qODFSgaJpZM4I6MD6">mute the thread</a>.<img alt="" height="1" src="https://github.com/notifications/beacon/ABWnLSBFRF59B16Jlas96HWubnY0SP0Zks5qODFSgaJpZM4I6MD6.gif" width="1" /></p>
<div itemscope itemtype="http://schema.org/EmailMessage">
<div itemprop="action" itemscope itemtype="http://schema.org/ViewAction">
  <link itemprop="url" href="https://github.com/openstreetmap/openstreetmap-website/pull/1240/files/933335a0ea28f274bc7301c18611bcd90709fd99#r67928201"></link>
  <meta itemprop="name" content="View Pull Request"></meta>
</div>
<meta itemprop="description" content="View this Pull Request on GitHub"></meta>
</div>