Scaling overlay text on portfolio grid images

I have noticed that my overlay text on my portfolio project images does not scale to fit the image when viewed on smaller screens / platforms.

Is there a way to ensure the text is always contained within the constraints of the image it overlays?

Thank you

2 hours ago, lucyconochie said:

I have noticed that my overlay text on my portfolio project images does not scale to fit the image when viewed on smaller screens / platforms.

Is there a way to ensure the text is always contained within the constraints of the image it overlays?

 

Thank you

Can you share your URL so I can take a look?

Hi,

https://www.lucyconochiedesign.com/gardens

I want the text to respond to the size the image is, depending on what size screen / platform you're viewing it on.

2 hours ago, lucyconochie said:

Hi,

https://www.lucyconochiedesign.com/gardens

I want the text to respond to the size the image is, depending on what size screen / platform you're viewing it on.

Here is the Custom Css you can set to apply the size with 3 breakpoints

@media screen and (min-width: 1024px) {
  /*desktop view*/
  .portfolio-grid-overlay .portfolio-title {
    font-size: 24px;
  }
}

@media screen and (max-width:1023px) and (min-width: 768px) {
  /*Tablet view*/
  .portfolio-grid-overlay .portfolio-title {
    font-size: 22px;
  }
}
@media screen and (max-width: 767px) {
  /*Mobile view*/
  .portfolio-grid-overlay .portfolio-title {
    font-size: 10px;
  }
}

Support me by pressing 👍  or marking as solution if this useful for you

Thanks so much I'll give that a go right now.

Lucy

Hi, 

So I used the CSS and changed the mobile view option to 20px (10 was too tiny).

But I'm still having the issue that when the size of the project thumbnails is reduced, the text doesn't reduce with it, to stay within the image.  I get these scroll tabs when the title is longer.  I've attached a screenshot.