How to centre stack image collage

Site URL: https://www.charliefollows.com

Hi, 

I'm trying to centre stack the image collage so that the text box is in the centre at the bottom of the image instead of being at the side. Is this something I can do with css? 

I've attached a photo of what it looks like now and a photo of what I'd like the layout to be. Any help is greatly appreciated.

Hi. What is password?

floopy8sn3ma0

It's the first photo on the blog page.

17 hours ago, Carfol said:

floopy8sn3ma0

It's the first photo on the blog page.

Hi. For all posts or first post only?

Just the first post please

Try adding to Design > Custom CSS > Then save & reload the site

/* stacked title-image */
div#block-14e216feecb17d21c313 {
.summary-item:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* image width */
.summary-item:first-child .summary-thumbnail-outer-container {
    margin: 0 auto;
    width: 100% !important;
}
.summary-item:first-child .summary-content {
    margin: 0 auto;
    width: 70% !important;
    position: relative;
    top: -100px;
    background: white;
    padding: 10px;
    border-radius: 10px;
}
}

Thank you that is perfect 🙂

On 5/24/2021 at 5:22 PM, Carfol said:

Thank you that is perfect 🙂

Do you need to solve these?

Site URL: https://www.charliefollows.com/

1. (Tablet-Homepage) Add a space on left of screen?

2. (Tablet-Header) Increase logo size?

3. (Tablet-Blog posts) Increase content width?

I have solved the margin issues and mobile logo but please could you help me adjust the content width for tablet.

17 hours ago, Carfol said:

I have solved the margin issues and mobile logo but please could you help me adjust the content width for tablet.

Add to Design > Custom CSS

/* Tablet-blog post width */
@media screen and (max-width:991px) and (min-width:768px) {
.tweak-blog-item-width-narrow .blog-item-wrapper .blog-item-inner-wrapper {
    width: 90%;
}
}