Re: How to Center Align the Featured Image of a blog post

Marlee_ · ‎02-04-2024

Heyy,

Hope anyone could help me - I really appreciate it in advance.

Wondering how to center align my featured image on a blog post?

Featured Image Alignment Issue on Blog

From the link above, you will see the image is to the left and it is bothering me somewhat 🥲

Thank You soo much!!

ThePrimeWeb · ‎02-04-2024

Hey @Marlee_,

Could you try this 😊

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.card__inner.color-background-2.gradient.ratio {
    margin: auto !important;
}

@media only screen and (max-width: 768px) {
    .card__information {
        margin: auto !important;
        text-align: center !important;
    }    
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

PageFly-Henry · ‎02-04-2024

Hi @Marlee_

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

.card.article-card.card--standard.article-card__image--medium.card--media {

align-items: center !important;

}

h1.title--primary {

text-align: center !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

Marlee_ · ‎02-04-2024

Heyy Henry!

I appreciate the help and swift response!

Unfortunately it appears to not have worked? Please find below instructions adhered to and my link again here

ThePrimeWeb · ‎02-04-2024

Hey @Marlee_,

Could you try this 😊

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.card__inner.color-background-2.gradient.ratio {
    margin: auto !important;
}

@media only screen and (max-width: 768px) {
    .card__information {
        margin: auto !important;
        text-align: center !important;
    }    
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?