[Resolved] Problems with styling in the footer bar and ninja forms

[Oleksiy]

Hi, guys.

Can’t solve two problems. Need your help.
First – center alignment in the footer bar. Until it’s one row with navigation links, it’s ok. But on smaller screens links start to move to the second row. And in this case there is no center alignment – https://monosnap.com/file/j9VdruVuOAdy90jHFUo0ZfFyfyTJJ6. How to solve it without hardcoding?

Second issue is with a Ninja Form styling. I use single checkbox as a “Terms & Conditions and Privacy Policy” agreement. The only way that I’ve found to make the links to those pages clickable is via “Display” field in Ninja Form builder. And in this case everything goes wrong with both horizontal and vertical alignment:
https://monosnap.com/file/XOQs9sOyHJ7Y8tBtdujQrNwPGuiQND
https://monosnap.com/file/SKn2KX3gClirYZATo6r1obSY2L5OIR
Screenshots of the ninja forms are from the local server. It’s not on prod right now.
Is there some way to fix it without restyling everything?

[Leo]

Hi there,

1. It just looks like there isn’t enough room for all items to stay in one line on a smaller screen.

We can try changing the font size smaller on mobile:

@media (max-width: 768px) {
    .footer-bar .widget_nav_menu a {
        font-size: 10px;
    }
}

2. This sounds like something you’d need to check the support of Ninja Form. Unfortunately I cannot be sure without seeing the issue live.

[Oleksiy]

Thanks for response, Leo.

1. Font size. Yes, I’ve also tried several hardcoding solutions, including:

@media (max-width: 768px) {
	.footer-bar .widget_nav_menu li {		
		float: none;    	
	}
}

But they are not scalable. When I add 3 more links, I’ll have to make font size even smaller 🙂
Scalable solution here is a correct alignment for a multi-row set of links.
At the moment I see two main ways to fix it:
– I need to fully rewrite it using flexbox.
– Maybe you’ll make it fully responsive in some of the next theme versions. And I’ll use built-in solution. Probably I’m not the only one who faced this problem.

2. I’m not sure either, who’s styles are used – GP’s or NF’s. Added example of the form to prod. It’s here – /uncategorized/hello-world/

[Leo]

1. Try adding this CSS:

@media (max-width: 768px) {
    .footer-bar .widget_nav_menu > div > ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

Things like this are a bit tough to implement due to backwards compatibility issues. I haven’t seen too many cases like this either.

I also noticed that you might have this issue here with the child theme:
https://docs.generatepress.com/article/child-theme-issues/#import

2. Can you open a new topic for this? Much easier if we tackle one question per topic.

Thank you.

[Oleksiy]

This solution is working in the same way as my hardcoding. Because of the different margins for the first, last and other children, alignment is not accurate – https://monosnap.com/file/WQ8693nB09Hf3ZBomMq2jkvK19dpld.

I’ve initially followed this instruction – https://docs.generatepress.com/article/child-theme-issues/#import. So there is no @import or mentioned function. What is present in functions.php is:

function generatepress_child_enqueue_scripts() {
	if ( is_rtl() ) {
		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
	}
}
add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 ); 

[Leo]

Can’t quite picture what the perfect solution would be for this.

Are you able to describe or provide an example of what you’d like to achieve?

Let me know 🙂

[Oleksiy]

The idea was to apply center alignment for every row, if there are more than 1 row of links. Because of the first child has no left margin and all other have it, it will always be a 10px shift to right starting from 2nd row.

I’ve just fixed it by extending your code. Removed margins and replaced them with paddings. Looks ok at the moment.

Thanks for help 🙂

[Leo]

No problem 🙂

[Author]

Posts