[Resolved] row-wise number of buttons

Home Forums Support [Resolved] row-wise number of buttons

Home Forums Support row-wise number of buttons

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #2274366
    iamarghya

    after 1st hero, there is 6 button I designed them perfectly on mobile and tablet but for the desktop, I want to have 3 buttons in a row which means 6 buttons in 2 rows but I can’t do that from the settings, can u help me with it? but I need the 3 buttons to fill the full horizontal space also…

    #2274381
    Fernando
    Customer Support

    Hi Iamarghya,

    Here’s a CSS you may try:

    @media (min-width: 1025px) {
        .gb-button-wrapper.gb-button-wrapper-65bcedcc > * {
            width: 49.5%;
            margin: 2px 0;
            flex: unset;
        }
    
        .gb-button-wrapper.gb-button-wrapper-65bcedcc {
            justify-content: space-between;
        }
    }

    Hope this helps!

    #2274389
    iamarghya

    Check once I just set the width to 32 percent so 3 buttons can be seen.

    #2274394
    Fernando
    Customer Support

    That works as well. You can modify the values to your preference.

    #2274398
    iamarghya

    Nice Thank you again…

    #2274402
    Fernando
    Customer Support

    You’re welcome!

    #2274404
    iamarghya

    Don’t want to create a different topic just asking is it possible to add a search icon before the ‘Search Here’ Placeholder in my search bar.

    #2274418
    Fernando
    Customer Support
    #2274483
    iamarghya

    Couldn’t understand how to put it before the placeholder…

    #2274527
    Fernando
    Customer Support

    If you add the HTML code directly to the Placeholder in the Search Block, it would like this: https://share.getcloudapp.com/9ZuomZmB

    Another alternative it to add a Headline Block within the Container Block where the Search Block is. Then add an icon to it, and through custom CSS, set its position to absolute. Then position it accordingly.

    For instance, if your Headline Block has a class of my-search-icon, you can add this CSS:

    .gb-headline.my-search-icon {
        position: absolute;
        top: 50%;
        left: 10px;
        font-size: 30px;
        transform: translateY(-50%);
    }
    
    .gb-container.gb-container-f4961dca > .gb-inside-container {
        position: relative;
    }
    
    .gb-container.gb-container-f4961dca input#wp-block-search__input-1 {
        padding-left: 50px;
    }

    The result would be something like this: https://share.getcloudapp.com/L1uXR1bY

    Choose a search icon through the Block Settings.

    Hope this helps!

    #2274784
    iamarghya

    Perfect…Thanks

    #2275460
    Fernando
    Customer Support

    You’re welcome Iamarghya!

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.