Remove white space on blog post (read more) section

Site URL: https://www.donnalouisedesigns.co.uk/my-journey/largepaisley-n9tj5

Hi, could you please help me remove the extra white space at the bottom and eliminate the gaps between the content on my website page, its just on my blog pages when I click read more I have loads of space under it , as shown in the attached photo? I've tried various methods to fix this issue, and I want to ensure the design looks professional without those large gaps.

Thank you!

Hello @Donna1979, are you referring to this space? (see attached screenshot)

Hi Spark, yes, I am. It's just my blog post page; when I click "read more," I have too much space at the bottom.

Your plugin looks good! Would sorting out my website issue be easy with this plugin?

Hello @Donna1979, Thank you for confirming! To address your request, you'll need to use the following code. Also, I couldn’t find any "read more" button on your site, neither on desktop nor on mobile. Let me know if it’s located somewhere specific, and I’ll assist further:)

1. Navigate to Pages > Website Tools > Custom CSS.
2. Paste the code into the CSS editor.
3. Hit Save and you’re done

/* Removes bottom padding from blog items */
.blog-item-wrapper article.entry {
    padding-bottom: 0vw !important; /* Forces no padding */
}

/* Aligns pagination links and adds spacing */
.item-pagination--prev-next {
    display: flex; /* Horizontally aligns items */
    padding: 0vw 2vw 3vw !important; /* Adds padding for spacing */
}

@Donna1979, our plugin focuses more on customizations, you can learn more here.

On 11/21/2024 at 8:01 AM, Spark-Plugin said:

Hello @Donna1979, Thank you for confirming! To address your request, you'll need to use the following code. Also, I couldn’t find any "read more" button on your site, neither on desktop nor on mobile. Let me know if it’s located somewhere specific, and I’ll assist further:)

1. Navigate to Pages > Website Tools > Custom CSS.
2. Paste the code into the CSS editor.
3. Hit Save and you’re done

/* Removes bottom padding from blog items */
.blog-item-wrapper article.entry {
    padding-bottom: 0vw !important; /* Forces no padding */
}

/* Aligns pagination links and adds spacing */
.item-pagination--prev-next {
    display: flex; /* Horizontally aligns items */
    padding: 0vw 2vw 3vw !important; /* Adds padding for spacing */
}

Hi Spark,

Thank you so much for the code that removed some of the white space. I also removed my author name from my blog posts, which removed  even more space. When you mentioned you couldn't see my "Read More" button, I found some code to make it more noticeable. However, it’s too close to the excerpt, and I would like the button to be rounded. Can you help me with that? I have attached a screenshot for your reference.

I modified the "read more" button, but it's too close to the excerpt. I would like the button to be rounded, but I don't know how to change it.

• blog-more-link:after{display:none}
• blog-more-link {font-size:Orem!important}
• blog-more-link:before{content:"GET THE RECIPE →"; font-size: 1rem; border: 2px solid red; padding: .5rem; background-color:pink}
• blog-more-link:hover::before {background-color:redcolor:#FFF}

This link will direct you to the page I mean.

https://www.donnalouisedesigns.co.uk/my-journey

Hi again, @Donna1979, absolutely, here is the updated code, adjust as needed:)

1. Navigate to Pages > Website Tools > Custom CSS.
2. Paste the code into the CSS editor.
3. Hit Save and you’re done

 /* Read More Blog Link */
.blog-more-link {
    margin-top: 25px !important; /* Adds space above the link */
    padding: 10px 20px !important; /* Adds internal spacing for a better clickable area */
    border-radius: 30px !important; /* Creates a rounded button appearance */
    background: #ffc0cb !important; /* Sets the default background color to pink */
    color: black !important; /* Ensures the font color is always black */
    text-decoration: none !important; /* Removes underline for the link */
    display: inline-block !important; /* Makes the link behave like a button */
    font-weight: 500 !important; /* Adds emphasis to the text */
    transition: background 0.3s ease !important; /* Smooth transition for background color on hover */
}

.blog-more-link:hover {
    background: #9e9c98 !important; /* Changes the background to a neutral gray on hover */
    color: white !important; /* Changes font color to white for contrast */
    cursor: pointer !important; /* Ensures the pointer changes to indicate a clickable link */
}

Hi Spark, thank you very much for the code! With a few tweaks, I was able to customize it to my liking. I hope this code will be helpful for other Squarespace users as well. I'll be sure to reach out if I need more assistance! 🙂