Jump to content

Reposition Text 'Image Poster' Block

Recommended Posts

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

Link to comment
  • Replies 8
  • Views 2.5k
  • Created
  • Last Reply

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Link to comment
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%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
.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%;
}
}
} 

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...

@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 run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10.

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.