Hi everyone,
I’m currently working on a Flarum-managed community and have been trying to improve its visual layout to align more closely with another forum I run, which is hosted on my self-managed server. On that server, I was able to install and customize the Asirem theme, which gave the interface a polished and responsive look that I’m trying to match.
However, since our current project is on a Flarum-managed community, installing custom extensions or themes is not possible. We are limited to only using the extensions that are available in the managed hosting environment. Because of this, I’ve been attempting to recreate the styling of Asirem using custom CSS alone, to maintain some visual consistency across both forums.
While I’ve had partial success on desktop, the mobile view is still broken, with layout, spacing, and responsiveness issues that I haven’t been able to resolve. I've spent several hours trying to get it right, but I'm running out of time and mental bandwidth — especially with my upcoming flight test, ongoing projects, and work responsibilities.
So I’m reaching out to the community for help:
If anyone has front-end/UI experience with Flarum and could assist with improving or fixing the CSS, I’d truly appreciate the help.
Alternatively, if someone is available to take this up as a paid gig, I’m happy to work with you. I can pay via PayPal, Ko-Fi, or any credit/debit card–supported method.
Please feel free to DM or respond here if you’re interested. I’ll share the CSS I’ve developed and what exactly needs improvement.
Thanks in advance to anyone willing to lend a hand.
Best regards,
CSS
.TagTiles {
list-style-type: none;
padding: 20px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
box-sizing: border-box;
}
.TagTiles > li {
background: var(--tag-bg, #f0f4ff);
border-radius: 16px;
flex: 0 1 320px;
overflow: hidden;
transition: transform 0.2s ease;
box-sizing: border-box;
align-self: flex-start;
}
.TagTiles > li:hover {
transform: translateY(-5px);
}
.TagTile {
position: relative;
display: flex;
flex-direction: column;
padding: 20px;
color: #0f0f10;
box-sizing: border-box;
}
.TagTile.colored,
.TagTile.colored a {
color: var(--contrast-color, var(--body-bg));
}
.TagTile a {
text-decoration: none !important;
}
.TagTile-info {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
box-sizing: border-box;
}
.TagTile-info .icon {
font-size: 32px;
margin-bottom: 10px;
display: block;
}
.TagTile-name {
font-size: 20px;
font-weight: bold;
margin-bottom: 8px;
}
.TagTile-description {
font-size: 14px;
opacity: 0.8;
margin-bottom: 10px;
display: block;
}
.TagTile-description:empty {
display: none;
margin: 0;
padding: 0;
}
.TagTile-children {
font-weight: bold;
font-size: 13px;
margin-top: auto;
}
.TagTile-children a {
margin-right: 8px;
}
.TagTile-lastPostedDiscussion {
font-size: 13px;
color: #555;
padding-top: 10px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 15px;
opacity: 0.7;
}
/* Responsive layout */
@media (max-width: 1000px) {
.TagTiles > li {
flex: 0 1 45%;
}
}
@media (max-width: 600px) {
.TagTiles {
padding: 16px; /* Add spacing around the grid on mobile */
}
.TagTiles > li {
flex: 0 1 100%;
}
.TagTile {
padding: 16px; /* Add internal padding for mobile */
}
}
