How can I move the blog post title above the blog image?

[pradeepnags]

Hi, I am trying to move the blog post title above blog image for better distinction between individual blogs but couldn’t do it . Could someone assist ? Thanks a lot!

[AvadaCommerce]

Hi @pradeepnags ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

[KetanKumar]

@pradeepnags

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Denishamakwana]

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.

[pradeepnags]

Hi, Thanks for the quick response. The Store URL is <dbanyan.nl/blogs/info>.

The issue is also applicable to Recipe section which is again based on blogs <dbanyan.nl/blogs/recipes>

[pradeepnags]

Hi Ketan,

Thanks for the immediate response.

The Store URL is <dbanyan.nl/blogs/info>.

The issue is also applicable to Recipe sections which is again based on blogs <dbanyan.nl/blogs/recipes>

[AvadaCommerce]

Hi @pradeepnags ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/styles.css->paste below code at the bottom of the file:

.template-blog .opposing-items h1.left {
    position: absolute;
    left: 50%;
    top: 150px;
    z-index: 99;
    transform: translateX(-50%);
    background: rgba(255,255,255,.6);
    padding: 0 10px;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[KetanKumar]

@pradeepnags

great thanks for all details

can you please confirm firt that look

[pradeepnags]

Hi Ketan,

Yes. Thats correct. The title ‘How to sign up for online account using your Dbanyan shop account?’

should be above the picture. Is there an option ?

[pradeepnags]

Hi Avada,

No. This solution didnt work. I pasted the code into styles.css.liquid but still see the heading below the blog image!

[AvadaCommerce]

Hi @pradeepnags ,

Sorry, I confused the blog title with the blog post title.

You try below code in styles.css file:

@media (min-width: 768px) {
#shopify-section-blog-template .reading-column > h2 {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 10px;
    background: rgba(255,255,255,.5);
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[pradeepnags]

Hi Avada,

Still not working. Am i explaining my issue correctly ? Every blog post title should be above the picture rather than below.

Like this.

[pradeepnags]

Hi Ketan,

Do you have an update. It is not the blog title but blog post title!

[pradeepnags]

Hi Denishamakwana,

Could you assist in fixing the blog title issue. The others answers didnt work

[AvadaCommerce]

Hi @pradeepnags ,

Can you share your blog post code?

Thanks you

[Denishamakwana]

Hi,

Please add below code in bottom of assets/styles.css file

.articles {
position: relative;

margin-top: 70px;

}

.article h2 {
position: absolute;
top: -40px;
}

.reading-column {

margin-bottom: 20px ;

}

Thank you.

Hope it works.

[pradeepnags]

Hi Denishamakwana,

Actually this works but now all the blog headings have come to the top above the first blog image instead of headings per blog. (Like below)

Can you suggest how to get the heading over the top of the image for each blog ?

Thanks!

[pradeepnags]

Hi Denishamakwana,

Do you have a solution for the above issue? Now all the blog titles are in one single line!

[Denishamakwana]

Hi,

I check it again .

It work perfectly.

Here, I attached screenshot Please check it.

[pradeepnags]

Hi Denishamakwana,

Very strange that it wouldn’t work for me :(.

Can you check whether I am doing the right thing ?

I have pasted your exact code at the end of the styles.css.liquid file.

Is there anything wrong ?