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:
parent
83405a3002
commit
fd4bde6166
1 changed files with 26 additions and 4 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue