Horizon | Centered blog featured image

Store Design
1

How I can centered the blog featured image on Horizon 2.1.4 theme?

2

Hey @Ell_Soll

Share your Store URL and Password if enabled.

Best,
Moeed

3

Hello @Ell_Soll

Could you please share your store URL and password if enabled
? This will help us take a closer look and provide a more accurate solution.

Step 1:

  1. Go to Online Store → Themes → … → Edit code.
  2. Open the blog template file where featured images are output (usually templates/article.json or the section sections/article-template.liquid / main-article.liquid).

Step 2: Add custom CSS:
Go to Online Store → Themes → Customize → Theme settings → Custom CSS (or Edit code → assets/theme.css if no custom CSS box).

Add:

/* Center blog featured image */
.article-template__hero,
.article-template__hero img,
.article__image,
.article__image img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

Tip: If the image is still left-aligned, your theme might be using flexbox for the article hero. In that case, add:

article-template__hero {
  display: flex;
  justify-content: center;
}
4

URL address:

5

Not working.

URL address:

6

Hey @Ell_Soll

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
div#shopify-block-AT2lVaCsrWmZ1TmFib__blog-post-image {
    text-align: -webkit-center !important;
}
</style>

RESULT:

image
image826×808 129 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

7

Hello @Ell_Soll

Make this changes in your code:

.blog-post-featured-image {
  --width: auto;             /* don’t force 100% */
  --custom-width: auto;
  display: block;
  position: relative;
  width: auto;
  max-width: 800px;          /* adjust as needed */
  margin: 0 auto;            /* centers the block */
  text-align: center;
}

image
image1838×843 183 KB