<p></p>
<blockquote>
<p dir="auto">I still don't understand if you are against specific widths <em>in pixels</em> or widths in any units.</p>
</blockquote>
<p dir="auto">In general I'm against specific widths appearing in custom.css (in fact, I'd be quite happy to remove most of what remains in common.scss entirely, but that's an ongoing project).</p>
<p dir="auto">So for example, <code class="notranslate">.layers-ui.base-layers li</code> contains <code class="notranslate">margin-bottom: 8px</code> - this is an example of a style rule that should be removed, and replaced with either a) nothing, since bootstrap applies appropriate margin-bottoms to most components anyway or b) a bootstrap utility, e.g. mb-3. This way, margins are kept consistent all around the site, and are easy to change by customising bootstrap centrally. Same with the border-radius - these buttons don't need a custom border radius that's different from every other border radius used on the site; they should be using a <a href="https://getbootstrap.com/docs/5.1/utilities/borders/#border-radius" rel="nofollow">bootstrap corner radius</a> utility class.</p>
<p dir="auto">So the same applies to grids, grid spacing, grid margins etc - no singular grid should have its own widths set, since that means they are inconsistent with any other grid used in the site.</p>
<p dir="auto">This might seem unimportant, but small things like these often cause unexpected problems. For example, we used to have various <code class="notranslate">h1</code> and <code class="notranslate">h2</code> elements around the site with their own style rules and custom font sizes, originally in px and more recently in rem. But even those are now causing problems, since these hardcoded style rules interfere with the recently adopted <a href="https://getbootstrap.com/docs/5.1/getting-started/rfs/" rel="nofollow">RFS</a> - see <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1319575323" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/3630" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/3630/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/pull/3630">#3630</a>.</p>
<p dir="auto">I hope that explains things.</p>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/3620#issuecomment-1196787110">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLOAWWZ6UTT3DDBFY73VWE44BANCNFSM54SY7APA">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLN6PBFIVJ6TDWAP54LVWE44BA5CNFSM54SY7APKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOI5KYLJQ.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/3620/c1196787110</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/3620#issuecomment-1196787110",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/3620#issuecomment-1196787110",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>