Fix mobile horizontal scroll and add logo containers

- Add box-sizing border-box and overflow-x hidden
- Wrap logos in containers with light background, padding, radius
- Change img width from 100% to max-width 100%
This commit is contained in:
Russell Ballestrini 2025-10-15 07:56:57 -04:00
parent 83405a3002
commit fd4bde6166

View file

@ -7,13 +7,31 @@
<link rel="stylesheet" href="../css/pico.classless.min.css">
<link rel="stylesheet" href="../css/chunkfive/stylesheet.css">
<style>
* {
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
h1, h2 {
font-family: 'chunkfiveregular', sans-serif;
}
.logo-container {
background: rgba(255, 255, 255, 0.05);
padding: 1rem;
border-radius: 8px;
display: inline-block;
max-width: 100%;
}
@media (prefers-color-scheme: light) {
.logo-container {
background: rgba(0, 0, 0, 0.03);
}
}
article img {
width: 100%;
max-width: 600px;
max-width: 100%;
height: auto;
display: block;
}
</style>
</head>
@ -26,7 +44,9 @@
<article>
<h2>Make Post Sell</h2>
<img src="https://www.makepostsell.com/static/mps.png" alt="Make Post Sell"><br><br>
<div class="logo-container">
<img src="https://www.makepostsell.com/static/mps.png" alt="Make Post Sell">
</div><br>
<p>Sell the digital & physical things you make — commission free! A platform for creators and makers to sell their products without paying platform fees.</p>
<nav>
<ul>
@ -40,7 +60,9 @@
<article>
<h2>Remarkbox</h2>
<img src="https://www.remarkbox.com/remarkbox-minified.png" alt="Remarkbox"><br><br>
<div class="logo-container">
<img src="https://www.remarkbox.com/remarkbox-minified.png" alt="Remarkbox">
</div><br>
<p>A hosted comment service that embeds in your pages to keep the conversation with your content. Supports standalone mode for dedicated Q&A style forums. Started in 2014 to solve the problem of adding comments to static sites.</p>
<p><strong>Business Model:</strong> Pay what you feel it's worth - based on reciprocity and trust.</p>
<nav>