Site logo

Archived topic

Rearrange elements on paged pages

25 replies · Started by Fergal on September 21, 2022

Viewing posts 16–26 of 26

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

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
}

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

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?

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
}

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;
}

Ok great I did that, thanks. Getting closer.

https://imgur.com/a/yvCAz2t

Now just need to please shift featured jobs below All Jobs

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;
}

It worked! Beautiful! Thank you so much Fernando!

You're welcome Fergal!

This archived topic is closed to new replies.