Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Reposition Text 'Image Poster' Block


Anthony_Richardson

Question

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.

597528795_ScreenShot2020-05-15at10_55_40am.png.4c57c7e6331e1a360a9168279e4e8e54.png

Edited by Anthony_Richardson
New approach
Link to post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

I see fine here. Can you take screenshot posters?

Posted Images

8 answers to this question

Recommended Posts

  • 0

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

 

Link to post
  • 0
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?

Edited by Anthony_Richardson
Link to post
  • 0
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%;
}
}

 

Link to post
  • 0
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)

Screen Shot 2020-07-15 at 8.12.54 pm.png

Link to post
  • 0
.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%;
}
}
} 

 

Link to post
  • 0
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?

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...