[Resolved] Menu arrows and mobile spacing on archive pages

Home Forums Support Menu arrows and mobile spacing on archive pages

  • This topic has 24 replies, 4 voices, and was last updated 4 months ago by Tom.
Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
    Posts
  • #1381347
    Joy

    Hi Team GP,
    Hope all is well.

    Issue 1:
    I’m looking to remove the little arrows in the navigation menu. I found this code in the support forum which works:


    @media
    (min-width: 769px) {
    .menu-item-has-children .dropdown-menu-toggle {
    display: none;
    }
    }

    But, it seems to make the space between menu items inconsistent. For example, the space between our first menu item (Lifestyle) and the second (podcast) is much wider than the difference between (podcast) and (about).

    Any ideas on how to fix this? I took out the code for now given it looks pretty weird but let me know if you need me to add it back so you can see it better.

    Issue 2:
    I’m finding that the archive pages on my site (that have a list of all the posts) are looking nicely centered in the mobile view using Chrome’s developer tools but when I look at it on my actual phone, it’s off center. Any idea why this is happening?

    Many thanks,
    Joy

    #1381350
    Joy

    Ah sorry, I see David already replied to my other post re issue 1 (I couldn’t figure out how to see if anyone had replied, apologies) so will try that now. So just issue 2 per the above is where I need help many thanks!

    #1381483
    David
    Staff
    Customer Support

    Hi there,

    1. glad to hear you found the CSS.
    I link the topic here for reference:
    https://generatepress.com/forums/topic/remove-dropdown-arrows-from-navigation/#post-1375618

    2. Looks like some of the CSS is getting scrambled by the cache plugin. Add this CSS to fix that:

    @media (max-width: 768px) {
        .generate-columns {
            padding-left: 0 !important;
        }
    }
    #1428596
    Joy

    Thanks so much David,

    #2 worked for the main archive pages however on each post, we have a “related articles” section that uses the “latest posts” block. And these are still looking very off center. I imagine they use the same code as the archive pages? Any idea how to fix this?

    Many thanks,
    Joy

    #1428831
    David
    Staff
    Customer Support

    Did you resolve the issue with Related Posts ? It looks fine to me.

    #1431428
    Joy

    Hi David,

    No unfortuntely not, it still looks skew on my mobile and on mobile preview. Here’s an image of what it looks like to me. Looks the same on both our phones unfortunately.

    Many thanks in advance for any thoughts!
    Joy

    #1431671
    David
    Staff
    Customer Support

    You can remove the right margin from the Related Posts lists on mobile with this CSS:

    @media(max-width: 768px) {
        .wp-block-latest-posts.is-grid li {
            margin-right: 0;
        }
    }
    #1432452
    Joy

    That’s it! All sorted, thanks heaps!

    #1432734
    David
    Staff
    Customer Support
    #1489555
    Joy

    Hi David,

    Sorry to come back to this topic, we’re slowly redesigning each page so I’m tweaking as I go. I’m having trouble again with the spacing on archives and latest posts. While all looks great with mobile now (thanks to your help), the iPad view is off the page / looking wonky

    I’ve put two links into the private information. The first is our standard archive page – if you use developr tools to look at this page and select ipad or iPad Pro, the excerpts fall off the page and the alignment is strange looking.

    In the second link, you have to scroll down a little to see the “latest posts” list. If you use developer tools to look at this list as an ipad Pro, it’s sitting skew with too much padding / space on the right hand side. And if I look at it with iPad (not Pro), the posts are all bunched up on top of each other with again too much space on the right hand side – I’m going to replicate this page for all our category pages so keen to get it right.

    Many thanks in advance for any advice,
    Joy

    #1489640
    Elvin
    Staff
    Customer Support

    Hi,

    To clarify, do you need the latest post items to have space inbetween them?

    The items seems to be sticking to each other and it looks like it was done on purpose as there’s a custom CSS adding a margin-right:0px on the code.

    If this isn’t intended and you want space between them, please remove this code:

    @media (max-width: 768px)
    .wp-block-latest-posts.is-grid li {
        margin-right: 0;
    }

    And try this:

    @media(max-width:768px){
    /* remove margin-right for every right-most item only */
    .wp-block-latest-posts.is-grid li:nth-child(3n+0) {
        margin-right: 0px;
    }
    
    /* center align everything else in this flexbox */
    .wp-block-latest-posts.is-grid {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        justify-content: center;
        max-width: 100%;
    }
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1489769
    Joy

    Thanks Elvin,
    Re the custom CSS adding a margin-right:0px on the code – David suggested I add that code when I was having the issue with mobile (if you scroll up you can see the thread as it’s in the same conversation above).

    Would you mind confirming I should still remove it and try the replacement code you’ve suggested?

    Many thanks and much appreciated,
    Joy

    #1489783
    Elvin
    Staff
    Customer Support

    Ah my bad that makes sense.


    @media
    768px was affecting tablet as well. Perhaps we can keep David’s suggestion by doing this instead. So it applies on the actual smaller screens.

    Let’s modify David’s suggestion into this:

    @media (max-width: 599px)
    .wp-block-latest-posts.is-grid li {
        margin-right: 0;
    }

    And then add the code I provided on the previous reply for the tablet columns.

    A wise man once said:
    "Have you cleared your cache?"

    #1489859
    Joy

    Thanks Elvin, really appreciate the help.

    I think I’ve done it right and mobile looks great but the iPad views still look off for both the site examples I shared. On the archives category page, the title and excerpt are wider than the images (ipad pro) and on the ipad, there seems to be no padding on the LHS

    And on the other page, the latest posts look great but still aligned a little too much to the left.

    Many thanks again,
    Joy

    #1490800
    Tom
    Lead Developer
    Lead Developer

    For the first page, the issue is that the image itself isn’t wide enough to fill the box, and the box doesn’t have any padding.

    Try this:

    @media (max-width: 1024px) {
        .separate-containers .generate-columns .inside-article {
            padding: 30px;
        }
    }

    For the second page, remove the alignwide option from the block, then do this:

    .wp-block-latest-posts.is-grid {
        margin-left: -20px;
    }
    
    .wp-block-latest-posts.is-grid li {
        padding-left: 20px;
        margin-left: 0;
        margin-right: 0;
    }

    Hope this helps!

Viewing 15 posts - 1 through 15 (of 25 total)
  • You must be logged in to reply to this topic.