Jump to content

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

Recommended Posts

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! 🙂 

Snímka obrazovky 2024-05-12 o 10.06.29.png

Snímka obrazovky 2024-05-12 o 10.07.16.png

Link to comment
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! 🙂 

Snímka obrazovky 2024-05-12 o 10.06.29.png

Snímka obrazovky 2024-05-12 o 10.07.16.png

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

image.thumb.png.b4da6bd3a7121f0331483dbe223f4932.png

Let me know how it works on your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

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

×
×
  • 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.