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

Improve image centering and layout consistency across the blog

Browse Source 
Refactor CSS layout from columns to grid and update image focal point detection for better centering.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: d39fa6ed-4009-49a3-9ea7-1211f347d7a5
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/drGbo1a
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 21:17:53 +00:00
parent 4046bafaab
commit d354584769
2 changed files with 8 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772313438997.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 833 KiB

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

@ -369,33 +369,21 @@ export default function Home() {
<FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} />
<div className="columns-1 sm:columns-2 lg:columns-4 gap-4 space-y-4 [column-fill:_balance]">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{row2Left.map((a) => (
<div key={a.id} className="break-inside-avoid">
<MediumCard article={a} focalPoints={focalPoints} />
</div>
<MediumCard key={a.id} article={a} focalPoints={focalPoints} />
))}
<div className="break-inside-avoid">
<PhotoGalleryWidget />
</div>
<div className="break-inside-avoid">
<RecipeWidget />
</div>
</div>
<div className="columns-1 sm:columns-2 lg:columns-4 gap-4 space-y-4 [column-fill:_balance]">
<div className="break-inside-avoid">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<HoroscopeWidget />
</div>
{row3Middle.map((a) => (
<div key={a.id} className="break-inside-avoid">
<MediumCard article={a} focalPoints={focalPoints} />
</div>
<MediumCard key={a.id} article={a} focalPoints={focalPoints} />
))}
<div className="break-inside-avoid">
<NewsWidget />
</div>
</div>
{row4Articles.length > 0 && (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">