[Resolved] Shadow behind featured image and buttons

[Manpreet]

Hi there,
I want to add rounded corners and shadow to the featured image and buttons. Provide me with the CSS code for it.

[David]

Hi there,

please provide us with a link to a post / page on your site where you want this to be applied. And we will be pleased to provide you with some CSS code for it.

thank you.

[Manpreet]

https://animefirm.com/

[Manpreet]

Also, how can I increase the gap between the image and the paragraph on a blog post?
https://animefirm.com/top-5-isekai-anime-in-january-2023/

[Fernando]

Hi Manpreet,

Try adding this through Appearance > Customize > Additional CSS:

.content-area .inside-article .post-image img {
    border-radius: 24px;
    box-shadow: 10px 5px 5px #444;
}

.content-area .inside-article .read-more-container a {
    border-radius: 16px;
    box-shadow: 10px 5px 5px #444;
}

.single-post .wp-block-image {
    margin-bottom: 16px;
}

Change the values to your preference.

[Manpreet]

Can you also provide me CSS code for the shadow from all sides behind the featured image and button?

[Fernando]

I updated the code above. You can refer to this for assistance with regards to box-shadows: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

[Manpreet]

Using the above code, the shadow is shown from two sides (right and bottom). I want to show from all sides of image and button.

[Fernando]

Try this one:

.content-area .inside-article .post-image img {
    border-radius: 24px;
    box-shadow: 0px 0px 16px #444;
}

.content-area .inside-article .read-more-container a {
    border-radius: 16px;
    box-shadow: 0px 0px 16px #444;
}

.single-post .wp-block-image {
    margin-bottom: 16px;
}

Alter the values to your liking.

[Author]

Posts