Change the position of the related posts using CSS

mirastnews · Member · Jul 4, 2016 at 10:19 pm
Copy link

Add topic to favorites
Hello, I need some help to change the position of the related posts. I would like to have it below the previous/next button and above the commentary.
Here is one page of the website :
https://mirastnews.net/2016/07/04/der-spiegel-leurope-est-la-risee-de-leconomie-mondiale/

Thank you for any help you can provide.

The blog I need help with is: (visible only to logged in users)
carladoria · Member · Jul 5, 2016 at 2:55 am
Copy link
Hi there,
Try the following to position “previous” and “next” before the related posts.
This first CSS should move both buttons above the related posts:
```
.section-title {
   position: relative;
    top: -420px;
}
```
And the following CSS should position your related posts a little bit lower so that your other buttons have enough space:
```
div#jp-relatedposts {
    position: relative;
    top: 20px;
}
```
mirastnews · Member · Jul 5, 2016 at 12:49 pm
Copy link
Thank you carladoria for your suggestion.
As the content of the related posts is dynamic, I prefer a solution that do not use fixed size. Plus there is a empty space above the commentary. I have read some solution that use flex but I keep searching.
mirastnews · Member · Jul 5, 2016 at 1:45 pm
Copy link
Maybe I should add some informations about the right position of each div in the page. I want to put this div
<div id='jp-relatedposts' class='jp-relatedposts' >
after this div
<div class="textwidget">

EDIT: As those div are in different block, the flex property do not seems to work.
thesacredpath · Member · Jul 5, 2016 at 7:40 pm
Copy link
@mirastnews, since the related posts are in the entry div, relocating them outside of that div, and to below the next/previous navigation on the single posts will be problematic with a responsive designed theme, such as MH Magazine. When we use position: relative, or position: absolute to relocate elements.

Adding the following to your post content will not work
div id='jp-relatedposts' class='jp-relatedposts' >
since it would require php to call in the related posts, and the related posts are already in the entry content. They would have to be placed outside of that div.

I’m not seeing any clean way to do this and have it work on all screen/window widths.
thesacredpath · Member · Jul 5, 2016 at 7:41 pm
Copy link
I forgot to mention that we cannot edit the HTML or theme files to rearrange or move divs.
mirastnews · Member · Jul 5, 2016 at 11:05 pm
Copy link
Hi thesacredpath.
Thank you for your answer. That is what I thought after looking deeper in the code and after some hours of research but I just wanted to be sure about that.
Thank you again.
thesacredpath · Member · Jul 6, 2016 at 2:00 am
Copy link
You are welcome.

No items found.