Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #292669

    I couldn’t find anything in the forum, but has anybody had any instances where they made the pagination more noticeable on the full-width masonry? We don’t want to use the “Load More” option. Rather we want the “pages” option. On wide screens, the pages are easy to miss. I would like to center the pages and make them a different color to stand out. A heading that says “View More Projects” would be helpful.

    Would anybody have any suggestions for that? Thanks for your help.

    #292801

    Hey tck!

    If we can see the page live we can inspect the code and suggest some css for you. That way it can be specific to your instance.

    Cheers!
    Devin

    #292993
    This reply has been marked as private.
    #293223

    Hey!

    Thank you for the link.

    Add this on Quick CSS or custom.css:

    .pagination .pagination-meta {
    left: 50%;
    position: relative;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    }

    Change the font style with this:

    .main_color .pagination span {
    color: red;
    font-size: 15px;
    }

    Best regards,
    Ismael

    #293897

    Thanks for the reply. I put the style in my child theme’s style.css, but it had no effect. Any suggestions on what I am doing wrong?

    #294157

    Hi!

    Sorry about that, please use this instead:

    span.pagination-meta {
    left: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    }

    Cheers!
    Ismael

    #294520

    Thanks again for the wonderful support. You answered the question I asked, but I don’t think I asked the right question.

    Would there be a way to get the buttons centered as well? Or possibly only the buttons? Could we have text that says, “View more projects: [button page 1] [button page 2] [button page 3]”? The text that reads “Page 1 of 3″ could go back to the right or be gone completely.

    I’m also struggling to change the background color of that section.

    Sorry for being a pain. Again, thanks for all your help.

    #294657

    Hey!

    Please add following code to Quick CSS as well

    span.pagination-meta { display: none; }
    nav.pagination { width: 10%; margin: auto; }

    Best regards,
    Yigit

    #295506

    Thanks for all your help. Everything has worked so far, but it doesn’t display well on my cell phone. Is there anything you can suggest to help with that?

    Thanks.

    #295511

    Hi!

    Please change the code i posted previously to following one

    @media only screen and (min-width: 768px) {
    span.pagination-meta { display: none; }
    nav.pagination { width: 10%; margin: auto; }}

    it will be applied only on screens bigger than 768px

    Cheers!
    Yigit

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.