[Resolved] Move image and button to center

Home Forums Support [Resolved] Move image and button to center

Home Forums Support Move image and button to center

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2078756
    John

    Hello,

    I want to move image and button to the center. Currently, both of them are in left alignment.

    Screenshot https://prnt.sc/26d2zho

    How can I do this?

    Thanks

    #2078775
    Elvin
    Staff
    Customer Support

    Hi John,

    For the product images inside the content:

    add this CSS:

    figure.wp-block-image.size-full.ep_product_img_class {
        text-align: center;
    }

    For the buttons, consider adding centered-btn to the button block’s Additional CSS Class(es) text field.

    And then add this CSS:

    .wp-block-buttons.centered-btn {
        justify-content: center;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #2078803
    John

    Hey,

    It’s working. Thanks for the quick response.

    One more query, I want to create button here. Please check the screnshot

    https://prnt.sc/26d3uf8

    Could you please send me CSS?

    Thanks

    #2078942
    David
    Staff
    Customer Support

    Hi there,

    simplest way is to style the links to look like buttons with some CSS:

    .ep_product_table_btn {
        white-space: nowrap;
        text-decoration: none;
        font-weight: 600;    
        padding: 10px;
        background-color: #f0544f;
        color: #fff;
    }
    /* Set hover colors */
    .ep_product_table_btn:hover {
        background-color: #f0544f;
        color: #fff;
    }
    #2079045
    John

    Hey David,

    Awesome! It’s working.

    Thank you so much!

    Just noticed an issue.

    On the desktop, product buttons(not buttons in the table) are fine. Screenshot https://prnt.sc/26d6ufk

    But in mobile, looks messy. Screenshot https://prnt.sc/26d6t3y

    How can I fix it?

    Thanks again.

    #2079054
    David
    Staff
    Customer Support

    I see this CSS on your site:

    .wp-block-button.ep_product_item_btn a {
        border-radius: 0;
        margin-top: 1.5em;
        margin-bottom: 1.5em;
        background-color: #f0544f;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .1em;
        padding: 14px 22px;
        border-radius: 2px;
        margin-right: 30px;
        border-style: solid;
        border-width: 1px;
        border-color: rgba(0,0,0,0);
        text-transform: uppercase;
        transition: all .5s ease;
    }

    Do you know how its been added ?
    As you don’t require the margin-right: 30px; property its offsetting the positions button and causing the spacing issue on mobile.

    #2079064
    John

    Not really. I just pasted it.

    Removed margin-right: 30px;

    Here is the current look https://prnt.sc/26d71ko

    #2079081
    David
    Staff
    Customer Support

    Well that looks better 🙂

    If you want to keep the text on one line then add this CSS to reduce the buttons padding on real small devices:

    @media(max-width: 360px) {
        .wp-block-button.ep_product_item_btn .wp-block-button__link {
            padding: 10px 8px;
        }
    }
    #2079084
    John

    Awesome, Thank you.

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