Archived topic
Footer menu spacing
13 replies · Started by Adarsha on August 5, 2022
Hey
For my website footer, I have 5 items in menu. I have set it to justify items to center.
The issue is it is very close with no space.
Both on desktop and mobile.
If I set it to "space between items" and reduce the container size to 600, then it looks fine in desktop.
But in mobile again the 2 items which goes to next line is far apart.
How can I fix the spacing when it is set to items to center?
Hi Adarsha,
To clarify, on mobile, should they all still be in one line?
No, before 3 were in one line and next 2 in next line but not spaced like this.. It would be center aligned with proper spacing.
Hi there,
did you see my reply here:
https://generatepress.com/forums/topic/issue-with-footer/#post-2294224
It will add back the missing spacing between those items
Hi, thanks.
I just checked that. Also added, whatever I change value to the footer items ain't moving.
You can check now, I have changed 10px to 30px and still same.
I can't see any issue with it - see here, this is me adding it to your child theme stylesheet in the developers tools and its working:
[deleted per request]
As you can see it's already added, but not changing.
Attached a screenshot in sensitive section.
Also hope you can delete the above 2 images from previous post.
Can you try adding it through Customize > Additional CSS and see if it will work?
It seems to be working in live mode. But in when logged in the footer show all close. So all good.
But on mobile it goes to 3 lines. How can I reduce the size of font only on mobile so it can come to 2 lines? In element, size adjusting is for both mobile and desktop together.
Also, At the bottom of the footer there is a large white space. I cant;t seem to figure out where I have added the space. Added screenshot.
In Appearance > Customize > Typography, add a new typography, and set the target to custom.
Set this as the selector: .site-footer .wp-block-navigation__container .wp-block-navigation-item a
Then choose a font size for mobile.
Then, as for the space below, it’s coming from your ads. Try checking how you’re adding them.
That got applied for desktop aswell. I could have just changed size in the navigation size options if I wanted to apply for both.
I wanted a way to only change mobile size.
Regarding whitespace, I don't have ads enabled on my site yet
In the Typography Manager, there should be a responsive view button for mobile to make changes only for mobile: https://share.getcloudapp.com/04uQBrpA
If you want the custom CSS route, try this:
@media (max-width: 768px) {
.site-footer .wp-block-navigation__container .wp-block-navigation-item a {
font-size: 10px
}
}It’s coming from something that’s for Google Ads: https://share.getcloudapp.com/nOuXjW6p
Got it. Used the mobile option.
Will check the white space part. Thank you for the solutions you provided.
You’re welcome Adarsha!
