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

Home Forums Support Problems with styling in the footer bar and ninja forms

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1188851
    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?

    #1188962
    Leo
    Staff
    Customer Support

    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.

    #1189901
    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/

    #1190104
    Leo
    Staff
    Customer Support

    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.

    #1190156
    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 ); 
    #1190188
    Leo
    Staff
    Customer Support

    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 🙂

    #1190511
    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 🙂

    #1191028
    Leo
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.