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

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

Home Forums Support all buttons border radius; header 3 columns, footer 3 instead of 4 columns, …

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #928848
    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 πŸ™‚

    #928856
    Leo
    Staff
    Customer Support

    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

    #929944
    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 πŸ™‚

    #930048
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #930295
    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 πŸ™‚

    #930626
    David
    Staff
    Customer Support

    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.

    #930717
    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 πŸ™‚

    #930728
    David
    Staff
    Customer Support

    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;
    }
    #930753
    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. πŸ™‚

    #930788
    David
    Staff
    Customer Support

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

    #930834
    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.

    #930838
    David
    Staff
    Customer Support

    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">

    #930847
    Armin

    This is pretty amazing πŸ™‚

    Thank you for your late-night support, David!

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