How to Center Align the Featured Image of a blog post

Solved

How to Center Align the Featured Image of a blog post

Marlee_
Visitor
3 0 0

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!! 

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2138 615 493

This is an accepted solution.

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.

 

ThePrimeWeb_0-1707067723514.jpeg

 

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

Replies 4 (4)

PageFly-Henry
Shopify Partner
1184 335 283

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_
Visitor
3 0 0

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

 

Screenshot 2024-02-04 at 12.57.51.png

ThePrimeWeb
Shopify Partner
2138 615 493

This is an accepted solution.

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.

 

ThePrimeWeb_0-1707067723514.jpeg

 

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!
Marlee_
Visitor
3 0 0

Legend! 

Thank you soooo much @ThePrimeWeb !! - This was the solution that worked for me.

I am immensely grateful 🙏 

Hope you have a wonderful evening / day!!!!! 😊