Reposition Text 'Image Poster' Block

Site URL: http://www.simpledwelling.net/test-stuff

I'm looking to style my images with a caption similar to the attached (or found here, https://thedesignfiles.net/2020/05/architecture-victorian-architecture-awards-2020/ or basically their entire site). I've found some code that works with 'Image Poster Block' that adds an overlay and background colour, but looking to now shift the text from the default centre to the top of the image, and ideally tweak some things like the width of the text, etc etc, but right now the focus is shifting the text up.

What kind of coding will I need to insert to achieve this site-wide? The page I've built where I'm testing this is www.simpledwelling.net/test-stuff

Any help would be greatly appreciated.

Add to Home > Design > Custom CSS

body#collection-5f0e429b6a7d2102963ec43e figcaption.image-card-wrapper {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding-left: 5%;
    padding-top: 5%;
}

2 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

body#collection-5f0e429b6a7d2102963ec43e figcaption.image-card-wrapper {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding-left: 5%;
    padding-top: 5%;
}

 

That worked perfectly! Thank you!

And now something a bit extra, how would I do it so the text only spans say 15% of the image (like in the screenshot of the original post where it was condensed in that corner)?

I tried adding something like;

padding-right: 50%

However, it doesn't take into account the difference between landscape and portrait images. Instead of calculating things from the right, it'd be good to set the rule of length from the left. If that makes sense?

2 hours ago, Anthony_Richardson said:

That worked perfectly! Thank you!

And now something a bit extra, how would I do it so the text only spans say 15% of the image (like in the screenshot of the original post where it was condensed in that corner)?

I tried adding something like;

padding-right: 50%

However, it doesn't take into account the difference between landscape and portrait images. Instead of calculating things from the right, it'd be good to set the rule of length from the left. If that makes sense?

@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1594772123173_4852 .image-card {
    width: 30%;
}
}

2 hours ago, tuanphan said:

@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1594772123173_4852 .image-card {
    width: 30%;
}
}

 

How might I apply this to full-site? I tried tweaking the supplied code but it ended up also reducing the background opacity (see attached)

.design-layout-poster {
figcaption.image-card-wrapper {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding-left: 5%;
    padding-top: 5%;
}
@media screen and (min-width:768px) {
.image-card {
    width: 30%;
}
}
} 

@tuanphan That code is very nice, but on mobile the text is pushed outside the image. I tried it on the Image Poster Block on this page: https://www.qwestsafety.ca/home (still work in progress) and it works on desktop, but on mobile it looks pretty bad.

I think it is the same issue as I emailed you about?

Have a great day and stay safe! 

On 12/2/2020 at 7:23 AM, RolandFuseHub said:

@tuanphan That code is very nice, but on mobile the text is pushed outside the image. I tried it on the Image Poster Block on this page: https://www.qwestsafety.ca/home (still work in progress) and it works on desktop, but on mobile it looks pretty bad.

I think it is the same issue as I emailed you about?

Have a great day and stay safe! 

I see fine here. Can you take screenshot posters?

I think we got it fixed via email @tuanphan