Footer build questions

Hi akubrin,

To achieve what you’re looking for with your Twenty Twenty-Two footer, you’ll need to add some custom CSS. Here are the steps to accomplish your three goals:

1. Reduce the height of the footer: Add this CSS to reduce the padding: cssCopy.site-footer { padding-top: 20px; padding-bottom: 20px; }
2. Make the row span full width: Adjust the width and remove default padding: cssCopy.wp-block-group.has-background { width: 100%; padding-left: 0; padding-right: 0; }
3. Center the nav links: Use flexbox to align the items: cssCopy.wp-block-group.has-background { display: flex; justify-content: space-between; align-items: center; } .wp-block-navigation { flex-grow: 1; display: flex; justify-content: center; }

You can add this CSS through the WordPress Customizer (Appearance > Customize > Additional CSS) or by creating a child theme.
as like i did for my client website https://nullbrawl.org/

Remember to adjust the selectors if needed, as they might vary depending on your specific setup.

Let me know if you need any clarification or have additional questions!

• This reply was modified 1 week, 5 days ago by James Huff.
• This reply was modified 1 week, 5 days ago by Coder. Reason: the same issue i solved on other website

Hi @codermania,

Wow, awesome, thank you for this code.

I have a question about how to identify the CSS selector classes in the block settings.

For example, for the second and third rules above, do I include the entire selector or just the class–that is, .wp-block-group.has-background or just has-background?

Thanks!

It’s best to use the full selector .wp-block-group.has-background rather than just has-background. The full selector is more specific, which helps ensure your styles target the correct elements and reduces the risk of unintentionally affecting other parts of your site.

To identify the correct selectors:

1. Use your browser’s developer tools (usually F12 or right-click > Inspect)
2. Click on the element you want to style
3. Look at the classes applied to that element in the HTML structure

This method will help you find the most accurate and specific selectors for your CSS rules.

@codermania, thank you for that clarification.

Which elements do I apply .wp-block-group.has-background to? To the entire footer? To the group? To the rows?

I know how to open the inspector and select an element, but I don’t know how to identify the classes applied to the element. The classes are somewhere in there, I guess.

Thanks!

Based on the image you’ve shared, I can see you’ve successfully identified the correct element in the WordPress block editor. The selector you’re looking for is indeed visible in the inspector.

The full selector you should use is:

.wp-block-group.alignfull.has-background.wp-block-navigation.is-content-justification-center

This selector targets the specific group block that contains your footer content. It includes multiple classes that ensure you’re targeting the exact element you want to style.

Hi @codermania,

It’s almost there. There are some orange bits (padding?) on either side of the site icon and social media icons. How do I remove those?

Thank you.

its okay we give padding to make it mobile responsive if it look good than leave it.. or if you want to removed it than hit me a reply here i’ll guide you ??

Hi @coder, that makes sense. I’ll leave it alone then.

Thank you for all your help!