Move image and button to center

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;
}

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

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;
}

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.

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.

Not really. I just pasted it.

Removed margin-right: 30px;

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

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;
    }
}

Awesome, Thank you.

You're welcome