[Resolved] Menu arrows and mobile spacing on archive pages

[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

[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!

[David]

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

[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

[David]

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

[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

[David]

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

[Joy]

That’s it! All sorted, thanks heaps!

[David]

You’re welcome

[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

[Elvin]

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

[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

[Elvin]

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.

[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

[Tom]

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!

[Author]

Posts