How can I edit blog previews and display format on Craft Theme 13?

Store Design
,

Topic summary

A user running Craft Theme 13 sought help with two blog display customizations:

Issue 1: Hiding blog preview text

  • Remove description/title previews appearing under blog posts
  • Solution: Edit main-blog.liquid file and change show_excerpt:true to show_excerpt:false

Issue 2: Adjusting blog grid layout

  • Mobile: Display 2 posts side-by-side (each taking 1/2 screen width) instead of 1
  • Desktop: Display 3-4 posts per row (each taking ~1/4 screen width)
  • Solution: Add custom CSS code to the section-main-blogs.css file

Both solutions involve accessing the theme code editor (Themes > … > Edit code) and modifying specific files. Screenshots were provided showing the exact code locations and expected results. The original poster confirmed the solutions worked successfully.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

I am on the craft theme 13. Is there a way to edit the blog in 2 ways. The first is to make it so that the description or title does not show up as a preview under the blog? The second is so that the blog posts show up differently. On mobile for the to show up as 2 next to each other instead of 1. So maybe have each take up 1/2 the length of the screen and for desktop for each to show up at 4 or 3. So maybe take up 1/4 of the screen.

To visualize think of them as little playing cards. ‌ :joker: ‌. Mobile ‌ :heart_suit: ‌‌ :diamond_suit: ‌. On the screen desktop ‌ :spade_suit: ‌‌ :spade_suit: ‌‌ :spade_suit: ‌‌ :spade_suit: ‌ and then rows of that. It’s just a slight display augmentation

20240305_061441_0000.png
20240305_061441_0000.png1545×2000 139 KB

Screenshot_2024-03-05-06-07-53-25_40deb401b9ffe8e1df2f1cc5ba480b12.jpg
Screenshot_2024-03-05-06-07-53-25_40deb401b9ffe8e1df2f1cc5ba480b12.jpg1080×2021 96.3 KB

2

Hi Ambientcandle,

For this, go to Themes > … > Edit code > Search for the file named “main-blog.liquid”. Then like the photo attached below, change the “show_excerpt:true” into “show_excerpt: false”

PaulMartin_0-1709729981750.png
PaulMartin_0-1709729981750.png1155×657 42.7 KB

Result:

PaulMartin_1-1709730036942.png
PaulMartin_1-1709730036942.png575×507 270 KB

PaulMartin_4-1709730667536.png
PaulMartin_4-1709730667536.png594×515 292 KB

1 Like
3

For this, go to Themes > Edit code > … > Search for the file named “section-main-blog.css”. Then add this code (see photos)

PaulMartin_5-1709730883158.png
PaulMartin_5-1709730883158.png628×347 19.1 KB

Results:
Desktop

PaulMartin_6-1709730915473.png
PaulMartin_6-1709730915473.png982×651 144 KB

Mobile

PaulMartin_7-1709730925364.png
PaulMartin_7-1709730925364.png412×719 175 KB

1 Like
4

It works thanks have a great day. Thanks for the photos.