[Support request] all buttons border radius; header 3 columns, footer 3 instead of 4 columns, …

[Armin]

Dear Coders 🙂

I want to achieve the following results with GP premium 1.8.2:

1. all buttons with border radius;

2. header with 3 columns filled with 3 different logos all centered horizontal and vertical (pictures with links to external URL’s), 1 left, 1 center, 1 right, in a fixed header height;

3. footer 3 instead of 4 columns on one sub-page;

4. NavMenu entry with 2 Text-Lines;

5. Auto Vertical Listing of 3 Logos in the Header in Mobile View instead of resizing the Header.

Any solutions, especially without additional coding, very welcome 🙂

[Leo]

Hi there,

1. This CSS should work:

button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited, .woocommerce a.button {
    border-radius: 3px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

2. Something like this should help:
https://docs.generatepress.com/article/split-header-three-sections/

3. This should help:
https://docs.generatepress.com/article/footer-widgets/#change-the-number-of-footer-widgets-on-individual-pages-posts

4. Try this:
https://generatepress.com/forums/topic/css-line-break-menu/#post-202661

[Armin]

Thank you Leo for your Support.

1. It works 😉

2. Your example seems to work with your example text. But I can’t get to insert a widget (like a picture) into one of the columns. It also does not seem to work with the “Widget Shortcode” Plugin, as suggested in your manual. Any other ideas?

3. Works managed through “Elements” type “Layout”.

4. Excellent, it works 🙂

[Tom]

Hi there,

Did you check the “Execute Shortcodes” checkbox in the Hook Element? It should work with the Widget Shortcode plugin as long as that option is checked.

Let me know 🙂

[Armin]

Hi Tom,

I finally figured it out. I have to use the shortcode in the Hook instead of another widget. 🙂

At least, these 3 pictures should be automatically listed vertically (according to the screen-width).

Actually, they are being resized and stay horizontal aligned, no matter what the screen size is.

The size of these Logo’s should not change – they should be shown as a “list” in Tablet / Mobile View or if the screen resolution is too low.

Any way to achieve that?

Thank you very much 🙂

[David]

Hi there,

could you link us to the site so we can take a look and advise.
You can edit your original topic and use the Site URL field to share the link privately.

[Armin]

Hi David,

Done. Added point 5. in the first post of the topic.

The Site should remain in Maintenance Mode asap. Any way to send you Credentials for Backend-Admin?

Thanks for your help 🙂

[David]

So this CSS to stack the columns on smaller screens:

@media (max-width: 768px) {
    .header-section {
        flex-direction: column;
    }
    .header-section > div {
        flex: 1;
        width: 100%;
    }
}

5. Update your CSS Rule to include the additional 3 properties i added below to center align logos vertically and horizontally:

.header-section > div {
    width: 33.33333%;
    padding: 8px;
    border: 1px solid orange;
    /* Add the following properties */
    display: flex;
    justify-content: center;
    align-items: center;
}

[Armin]

Thank you very much, David.

I added your CSS but the items are still being resized. 🙂

Also, it would be nice if the logo’s keep centered.

Any help appreciated. 🙂

[David]

Maybe i am not getting what you mean. Do you want the three columns to remain the same width as the page content?

[Armin]

Yes, I would have asked for that later. But only in Desktop-Mode.

Tablet or Mobile they should be listed downward and centered horizontally, remaining the same size. We are not allowed to change the Size of the Logos, and they need to be clearly visible (in the header) on every Page.

With

display: flex;

the Logos become too small in Tablet / Mobile view.

[David]

So i adjusted the first CSS here:

https://generatepress.com/forums/topic/all-buttons-border-radius-header-3-columns-footer-3-instead-of-4-columns/#post-930728

It will force the columns to become fullwidth when the screen size reduced to 768px ( the mobile/table breakpoint ) – you may want to increase the 768px to a higher number so it breaks to columns sooner and stops the columns from getting ‘squeezed’.

To restrict the three columns to the width of the container edit your markup and add the grid-container class to the opening DIV eg.

<div class="header-section grid-container">

[Armin]

This is pretty amazing 🙂

Thank you for your late-night support, David!

[David]

Glad to be of help

[Author]

Posts