The Title Of The Articles is Below The Main Photo - Question | JoomShaper

The Title Of The Articles is Below The Main Photo

FB

Fernando Bautista

Helix Framework 10 months ago

Greetings from Colombia, dear support team, and I hope you are well.

I would like the text of the title of the articles that is located below the main photo to be at the top and the details of the article as an author to continue below the photo, but I cannot do it (attached photo)

https://prnt.sc/dgnqmJLVNLnb

My website is: https://portalnews.co

I use Joomla 5.2 - Helix Ultimate Framework - php 8.3

Could you please tell me how to do it so that it is configured in featured articles, categories and articles?

Thank you very much in advance and happy 2025, let's go with everything!!!

0
4 Answers
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 10 months ago #179671

Greetings from the support team, and thank you for reaching out. Happy 2025 to you as well—let's indeed go with everything this year! 😊

Apolozy for the inconvenience. Unfortunately, there isn't a built-in setting within Joomla or the Helix Ultimate Framework to rearrange the title and article details in the manner you’ve described. However, this is achievable with a simple custom CSS modification. Please add the following CSS code to your Template Options -> Custom Code -> Custom CSS

.article-details {
    display: flex;
    flex-direction: column;
}

.article-header {
    order: -1;
}

.article-full-image {
    order: 0;
}

This should resolve the problem. Please let us know if you need any further assistance!

Best regards

0
FB
Fernando Bautista
Accepted Answer
10 months ago #179722

Dear Atick, thank you very much for your kind collaboration.

The code works well when I go to read the article directly, however, when I go to categories and home page the news headline continues to be displayed below the image.

Is it possible to make the news headline be displayed above the image in articles on the home page and categories?

Thank you.

0
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 9 months ago #179894

Please add the following CSS code to your Template Options -> Custom Code -> Custom CSS

.article {
    display: flex;
    flex-direction: column-reverse;
}

.articleBody{
    margin-bottom:15px ;
}
0
FB
Fernando Bautista
Accepted Answer
9 months ago #179992

Thanks very much!!!

0