How to adjust the position of blog title on the blog basic grid?

Hello,
could you please help me to adjust the box for title of the blog post. 

I would like to achieve, that it would be placed 5 px from the left, bottom and right side of the image. Currently the text is adjust only from left and bottom side. Basically from what I have now I would need to just move the right border of the title text component inside of the image (on the first screenshot you can see the border is out of the image). And my goal is displayed on the second image.

This is my current code injected:
// DESKTOP - Blog List - Title always at the bottom left
.blog-basic-grid--text {
    position: absolute;
    bottom: 0;    // Position at the bottom of the container
    left: 0;      // Align text to the left side of the container
    text-align: left; // Ensure text aligns to the left
    transform: translateY(0%); // Adjust transformation
    padding-left: 10px; // Add padding for better visibility
    padding-bottom: 5px;
    opacity: 1;    // Text always visible
    transition: all 0.5s;
  }

// MOBILE - Blog List - Title always at the bottom left
@media only screen and (max-width: 767px)
{
.blog-basic-grid--text {
    position: absolute;
    bottom: 0;    // Position at the bottom of the container
    left: 0;      // Align text to the left side of the container
    text-align: left; // Ensure text aligns to the left
    transform: translateY(0%); // Adjust transformation
    padding-left: 10px; // Add padding for better visibility
    padding-bottom: 16px;
    opacity: 1;    // Text always visible
    transition: all 0.5s;
  }
}


URL: https://www.slovakspots.com/magazine
Password: Ulicajekrasnydom

Thank you in advance! 🙂 

On 5/12/2024 at 3:40 PM, GregOvens said:

Hello,
could you please help me to adjust the box for title of the blog post. 

I would like to achieve, that it would be placed 5 px from the left, bottom and right side of the image. Currently the text is adjust only from left and bottom side. Basically from what I have now I would need to just move the right border of the title text component inside of the image (on the first screenshot you can see the border is out of the image). And my goal is displayed on the second image.

This is my current code injected:
// DESKTOP - Blog List - Title always at the bottom left
.blog-basic-grid--text {
    position: absolute;
    bottom: 0;    // Position at the bottom of the container
    left: 0;      // Align text to the left side of the container
    text-align: left; // Ensure text aligns to the left
    transform: translateY(0%); // Adjust transformation
    padding-left: 10px; // Add padding for better visibility
    padding-bottom: 5px;
    opacity: 1;    // Text always visible
    transition: all 0.5s;
  }

// MOBILE - Blog List - Title always at the bottom left
@media only screen and (max-width: 767px)
{
.blog-basic-grid--text {
    position: absolute;
    bottom: 0;    // Position at the bottom of the container
    left: 0;      // Align text to the left side of the container
    text-align: left; // Ensure text aligns to the left
    transform: translateY(0%); // Adjust transformation
    padding-left: 10px; // Add padding for better visibility
    padding-bottom: 16px;
    opacity: 1;    // Text always visible
    transition: all 0.5s;
  }
}


URL: https://www.slovakspots.com/magazine
Password: Ulicajekrasnydom

Thank you in advance! 🙂 

Try the following Custom Css

.blog-basic-grid--text {
  padding-left: 0;
}
.blog-item .blog-title {
  padding: 0 5px 5px 5px;
  margin-bottom: 0;
  display: block;
  box-sizing: border-box;
  line-height: 1;
  text-align: justify
}

.blog-basic-grid .blog-article-spacer {
  height: unset
}

My testing demo

Let me know how it works on your site

@Beyondspace thank you for your help! Unfortunately this code didn't helped to fix my issue. But I believe it might be helpful for somebody else.

Currently @Web_Solutions was able to fix my issue.

Which the best!