Blog posts display on the home page

Topic summary

A user is seeking help to make all blog posts display at the same size on their store’s home page. They’ve attached a picture showing the current inconsistent sizing.

Proposed Solution:

  • Locate the theme’s CSS file (typically “theme.scss.liquid” or “styles.scss.liquid”) in the Assets folder
  • Add custom CSS targeting .blog-post selector
  • Set a fixed height value (example suggests 300px) to standardize post appearance
  • Additional styling for padding, margin, and borders can be added as needed

Status: The discussion appears to have one proposed technical solution but no confirmation yet whether it resolved the issue or if the user needs further assistance.

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

Hi,

how do I make all blogs appear the same size on the home page? I attached the picture.

  1. Locate the CSS file: In the code editor, navigate to the “Assets” folder and find the CSS file related to your theme. It may be named something like “theme.scss.liquid” or “styles.scss.liquid.”

  2. Add custom CSS: Open the CSS file and add the following CSS code:

.blog-post {
  /* Set a fixed height for the blog posts */
  height: 300px; /* Adjust the height value as desired */

  /* Add any additional styling as needed */
  /* For example, you can add margin, padding, border, etc. */
}

The .blog-post selector targets the blog post elements on the home page. You can adjust the height value to the desired size that makes all blog posts appear the same.