How do I get rid of this white space under a blog post? I’ve searched high and low for an answer online and have not gotten anything that works. I am using the Dawn Theme.
1 Like
Hi @360MW
Would you mind to share the preview? Thanks!
1 Like
Any updates??!
1 Like
Try this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.article-template__back:last-child {
margin-bottom: 0px !important;
}
-
And Save.
-
Result:
-
Do you like to add space on the back to blog and Related Articles section?If it is try this one.
a.article-template__link.link.animate-arrow {
padding-bottom: 3.5rem;
}
- And Save.
- Result:
1 Like
Thank you so much! You’re a life saver!
1 Like
Your welcome! 
Hello Made4uo-Ribe,
So this same issue coming up but from the mobile view side. How do I remove the white space from the mobile version as well?
Thank you!
1 Like
Oh you need to call it on the screen where this white space show. Would you mind to share your store URL? thanks!
I include the screen recording in the previous message. I am re-attaching it here below.
1 Like
Try this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.article-template__back:last-child {
margin-bottom: 0px !important;
}
- And Save.
- Result:
I’ve already added this code…it’s the MOBILE VERSION…that has the white space. Included the screen recording again for your review.
When you apply the code did you still see in the space on the mobile? Did you refresh? Cause im seeng both screen.
I have both of these codes added to base.css
.article-template__back:last-child {
margin-bottom: 0px !important;
}
a.article-template__link.link.animate-arrow {
padding-bottom: 3.5rem;
}
I have had these two codes posted for weeks and the mobile version still shows a white space. Do I need to remove one of these codes?
1 Like
Also, I think you may be viewing the mobile version within Shopify, I am looking at the mobile version on an actual mobile device and the white space is still there. Hence, the screen recording attached.
Sorry, Im confuse which page I can find this white space? Im looking to it and I forgot which page is it. Thanks!
If you open up my blog on your cell phone you will see the white space. I also keep attaching a screen recording below. Are you looking at that as well?
Please open this link on your cell phone and scroll to the bottom of the blog:
https://thesixfiguremind.com/blogs/budgeting/take-control-of-your-finances-today-in-4-steps
1 Like
Yes, Im looking in your attach file, but there is no specific code that it only show on mobile.
Would you mind to replace the code with this.
.article-template__back.element-margin-top.center {
margin-bottom: 0px !important;
}
Save and Refresh the browser.
Thanks.
1 Like
I replaced
.article-template__back:last-child {
margin-bottom: 0px !important;
}
With the new code and kept this code
a.article-template__link.link.animate-arrow {
padding-bottom: 3.5rem;
}
Unfortunately it did not work. Why is it just doing this on the mobile side?
It is good in desktop right, in your screen? when you add the code.
Im reading and checking the code you have I cant see any thing to stop showing the code that I provide in the mobile screen.
Try this one. Go to online store > themes > edit code > Assets > and find this folder section-blog-post.css and the last code make some comment sign
from this
to this
And Save.
Cause that is the code we are trying to take out.
1 Like