Reposition Text 'Image Poster' Block

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