Shopify often crops or misaligns blog post images because themes use fixed heights, object-fit settings, or outdated CSS. This tutorial shows how to fix image alignment, cropping, stretching, and spacing issues inside Shopify blog articles.

---

1️⃣ Problem: Images Get Cropped (head cut off, sides missing)

This happens because the theme forces object-fit: cover or a fixed height.

✔ Fix: Make images scale naturally

.blog-post img {
  height: auto !important;
  object-fit: contain !important;
}

This ensures the full image always appears — no cropping.

---

2️⃣ Problem: Images Don’t Align to Center

Some themes add floats or margins that push images left or right.

✔ Fix: Force center alignment

.blog-post img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

---

3️⃣ Problem: Images Are Too Big on Desktop or Mobile

To prevent stretching or oversized images:

✔ Fix: Add max-width protection

.blog-post img {
  max-width: 100%;
}

---

4️⃣ Problem: Images Overflow on Mobile

Ensure images scale perfectly on small screens:

✔ Fix: Responsive images

@media (max-width: 768px) {
  .blog-post img {
    width: 100%;
    height: auto;
  }
}

---

5️⃣ Optional Enhancements (make posts look cleaner)

✔ Add rounded corners

.blog-post img {
  border-radius: 8px;
}

✔ Add soft shadow effect

.blog-post img {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

---

6️⃣ Where to Add This Code

Add this CSS to your theme:

1. Go to Online Store → Themes
2. Click Edit Code
3. Open: assets/base.css or theme.css
4. Paste the CSS at the bottom

---

🎉 Your Blog Images Are Now:

• ✔ Correctly aligned
• ✔ Not cropped or distorted
• ✔ Fully responsive
• ✔ Consistent across all devices
• ✔ Clean and professional-looking