Related Articles Image Fix - 5 Perspectives Analysis

Related Articles Image Fix - 5 Perspectives Analysis

Problem Statement

In the Related Articles section, the blog post card preview images have the following issues:

  1. Images are cut off/cropped improperly
  2. On the left side, the image is touching the boundary
  3. On the right side, there is a grey/white bar (like a right-side margin gap)

Root Cause Analysis

The Original Code (Broken)

.related-post-image {
  display: block;
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
  margin: -1.25rem -1.25rem 1rem -1.25rem;  // ❌ PROBLEM HERE
}

Why It Fails

  1. Bulma’s .box class has default padding of 1.25rem on all sides
  2. .related-post-card adds a 1px border
  3. Negative margins of -1.25rem on left/right pull the image outside the padding
  4. BUT the calculation doesn’t account for the 1px border on each side
  5. Result: Image extends correctly on the left but falls short on the right by 2px (1px left border + 1px right border)

Visual Representation

┌─────────────────────────────────────┐
│ .box (padding: 1.25rem)             │
│ ┌─────────────────────────────────┐ │ ← 1px border
│ │ .related-post-card              │ │
│ │                                 │ │
│ │ ╔═══════════════════════════╗   │ │ ← Image should be here
│ │ ║ .related-post-image       ║   │ │ ← But stops 2px short
│ │ ║                           ║   │ │
│ │ ╚═══════════════════════════╝   │ │
│ │                                 │ │
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘
        ↑                              ↑
    Left edge                    Right gap (2px)
    touches                      white/grey bar

5 Fix Perspectives

Perspective 1: Calc() with Border Compensation ✅ IMPLEMENTED

Approach: Use CSS calc() to adjust width and margins accounting for borders

Code:

.related-post-image {
  display: block;
  position: relative;
  width: calc(100% + 2.5rem + 2px);  // Account for padding AND borders
  height: 150px;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
  margin: -1.25rem -1.25rem 1rem -1.25rem;
  margin-left: calc(-1.25rem - 1px);  // Extra 1px for left border
  margin-right: calc(-1.25rem - 1px); // Extra 1px for right border
}

Pros:

  • ✅ Precise calculation
  • ✅ Minimal code changes
  • ✅ No HTML modifications needed
  • ✅ Maintains existing structure
  • ✅ Accounts for all spacing

Cons:

  • Slightly complex calc() expressions

Effectiveness: ⭐⭐⭐⭐⭐ (5/5)

Perspective 2: Width Calc Only

Approach: Adjust only width, simplify margins

Code:

.related-post-image {
  display: block;
  position: relative;
  width: calc(100% + 2.5rem + 2px);
  height: 150px;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
  margin-top: -1.25rem;
  margin-bottom: 1rem;
  margin-left: calc(-1.25rem - 1px);
  margin-right: 0;
}

Pros:

  • ✅ Simpler margin declarations
  • ✅ Easier to understand

Cons:

  • ⚠️ May have slight right-side alignment issues
  • Less precise than Perspective 1

Effectiveness: ⭐⭐⭐⭐ (4/5)

Perspective 3: Absolute Positioning

Approach: Position image absolutely within card

Code:

.related-post-card {
  position: relative;
  padding-top: 150px; // Space for image
}

.related-post-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
}

Pros:

  • ✅ No negative margins needed
  • ✅ Clean containment
  • ✅ Predictable behavior

Cons:

  • ⚠️ Requires parent padding adjustment
  • ⚠️ More structural changes

Effectiveness: ⭐⭐⭐⭐ (4/5)

Perspective 4: No Negative Margins + Padding Restructure

Approach: Remove negative margins entirely, restructure padding

Code:

.related-post-card {
  padding-top: 0 !important;
}

.related-post-image {
  display: block;
  width: 100%;
  height: 150px;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
  margin: 0 0 1rem 0;
}

.related-post-content {
  padding: 0 1.25rem 1.25rem 1.25rem;
}

Pros:

  • ✅ Simplest approach
  • ✅ No complex calculations
  • ✅ Most maintainable
  • ✅ Easy to understand

Cons:

  • ⚠️ Requires overriding Bulma’s .box padding
  • ⚠️ May affect other box styles if not scoped

Effectiveness: ⭐⭐⭐⭐ (4/5)

Perspective 5: Modern Flexbox

Approach: Use flexbox with proper containment

Code:

.related-post-card {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
}

.related-post-image {
  display: block;
  width: 100%;
  height: 150px;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
  flex-shrink: 0;
}

.related-post-content {
  padding: 1rem 1.25rem 1.25rem 1.25rem;
  flex-grow: 1;
}

Pros:

  • ✅ Modern approach
  • ✅ Flexible for future enhancements
  • ✅ Best for complex layouts
  • ✅ Clean separation of concerns

Cons:

  • ⚠️ More structural changes
  • ⚠️ Requires understanding flexbox

Effectiveness: ⭐⭐⭐⭐⭐ (5/5)

Recommendation

Best Solution: Perspective 1 (Calc() with Border Compensation)

This was chosen and implemented because:

  1. ✅ Minimal changes: Only CSS modifications, no HTML changes
  2. ✅ Precise: Accounts for all spacing (padding + borders)
  3. ✅ Compatible: Works with existing Bulma structure
  4. ✅ Maintainable: Clear comments explain the calculation
  5. ✅ Responsive: Works across all breakpoints

Alternative Solutions for Future

If you need to restructure later or want cleaner code:

  • Short term: Stick with Perspective 1
  • Medium term: Consider Perspective 4 if refactoring card styles
  • Long term: Consider Perspective 5 for modern layout architecture

Testing Checklist

  • Desktop view (1920x1080)
  • Tablet view (768px) - Uses same styles
  • Mobile view (375px) - Height adjusted to 120px (see line 3309)
  • Dark mode compatibility - No changes needed
  • Image hover effects - Scale animation preserved
  • Multiple card layouts (1, 2, 3 columns) - Bulma columns handle this
  • Cross-browser testing (Chrome, Firefox, Safari) - Needs user verification

Files Modified

  • assets/css/app.scss - Lines 2902-2924 (.related-post-image) + Lines 2937-3009 (Alternative perspectives documented)

Mobile Responsiveness

The mobile media query (line 3309) only adjusts the image height:

@media screen and (max-width: 768px) {
  .related-post-image {
    height: 120px;  // Reduced from 150px for mobile
  }
}

Our calc() fix works across all breakpoints because:

  • Bulma’s .box padding (1.25rem) remains consistent
  • Border width (1px) remains consistent
  • Only the height changes, not width calculations
  • Original issue: Images cut off with grey bar on right
  • Root cause: Negative margins not accounting for border width
  • Solution: Add border width to calc() expressions

Alternative Perspectives

All 5 perspectives are documented in assets/css/app.scss as comments (lines 2937-3009). They can be activated by uncommenting and adjusting the main implementation if needed.

Verification Steps

  1. ✅ Check that image extends edge-to-edge in card
  2. ✅ Verify no white/grey bar on right side
  3. ✅ Confirm left edge touches card boundary properly
  4. ✅ Test hover animation still works (scale 1.08)
  5. ✅ Verify mobile responsiveness (height: 120px)
  6. ⏳ User to verify in production environment