[Resolved] Rearrange elements on paged pages

[Fernando]

The screenshot you shared here says Page – 1: https://generatepress.com/forums/topic/rearrange-elements-on-paged-pages/#post-2351142

To clarify, is this screenshot paged or not?

[Fergal]

I see. The first one is the job-opening archive. Archives are not paged right?

The second screenshot is .com/page/3

I hope this helps and please let me know your thoughts.

Thanks,
Fergal

[Fernando]

I see. Thank you for clarifying.

Can you try adding this:

body.archive main#main {
    display: flex;
    flex-direction: column;
}

body.archive main#main .gb-container.my_newsletter_container {
    order: -2
}

body.archive main#main header.page-header {
    order: -1
}

[Fergal]

Almost there thanks Fernando! Job-opening archive and job-opening paged are perfect.

Just need to rearrange the Featured Jobs section on .com/page/2.

Can we do that with CSS or should I now do that with priority on the hook element?

Thanks

[Fernando]

We’ll need CSS.

Can you share all the CSS you have now, and how you want it to look again on .com/page/2?

[Fergal]

Sounds good. Please see below:

/* rearrange job number, featured jobs, and newsletter */
body.blog[class^='paged'] main#main, body[class*=' paged'] main#main{
    display: flex;
    flex-direction: column;
}
body.blog[class*=' paged'] .my_jobsnumber_container,body.blog[class*=' paged'] .my_newsletter_container, body.blog[class*=' paged'] .site-main>article, body.blog[class*=' paged'] nav#nav-below{
    order: -1;
}
body.blog[class*=' paged'] .my_featuredjobs_container {
    order: 0;
}

body.archive main#main {
    display: flex;
    flex-direction: column;
}

body.archive main#main .gb-container.my_newsletter_container {
    order: -2
}

body.archive main#main header.page-header {
    order: -1
}

[Fernando]

Can you try removing this first?:

body.blog[class^='paged'] main#main, body[class*=' paged'] main#main{
    display: flex;
    flex-direction: column;
}
body.blog[class*=' paged'] .my_jobsnumber_container,body.blog[class*=' paged'] .my_newsletter_container, body.blog[class*=' paged'] .site-main>article, body.blog[class*=' paged'] nav#nav-below{
    order: -1;
}
body.blog[class*=' paged'] .my_featuredjobs_container {
    order: 0;
}

[Fergal]

Ok great I did that, thanks. Getting closer.

https://imgur.com/a/yvCAz2t

Now just need to please shift featured jobs below All Jobs

[Fernando]

Can you try replacing all the code we have for this with:

body:is(.archive, [class*=' paged']) main#main {
    display: flex;
    flex-direction: column;
}

body:is(.archive, [class*=' paged']) .gb-container.my_newsletter_container {
    order: -2;
}

body.archive header.page-header {
    order: -1;
}

body[class*=' paged'] .my_jobsnumber_container {
    order: -1;
}

[Fergal]

It worked! Beautiful! Thank you so much Fernando!

[Fernando]

You’re welcome Fergal!

[Author]

Posts