sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust layout of featured articles and ads on the homepage

Browse Source 
Modify the homepage grid structure to accommodate ads and resize featured articles, changing `lg:col-span-3` to `lg:col-span-4` for the parent container and nesting the articles within a new `lg:col-span-3` div.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 42525754-c9d3-4c4c-84f2-577aa58381c6
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/nFw7xof
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-03-02 18:26:59 +00:00
parent d56ce2aacf
commit 19554ed77f
2 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772475973309.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 281 KiB

13
client/src/pages/home.tsx
View File

@ -570,7 +570,7 @@ export default function Home() {
</div>
{widePickedArticles.length > 0 && (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
<div className="hidden lg:block rounded-lg overflow-hidden bg-card border border-card-border">
<AdSense
slot="3854634730"
@ -580,10 +580,13 @@ export default function Home() {
className="w-full h-full min-h-[250px]"
/>
</div>
<div className="hidden lg:block" />
{widePickedArticles.map((a) => (
<WideCard key={`wide-top-${a.id}`} article={a} focalPoints={focalPoints} />
))}
<div className="lg:col-span-3">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{widePickedArticles.map((a) => (
<WideCard key={`wide-top-${a.id}`} article={a} focalPoints={focalPoints} />
))}
</div>
</div>
</div>
)}