Hi!
I hope someone can help me with reducing this white space in between the date and the body text in all my blog posts.
Thanks in advance!
Hi @LisanneH
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:
header.section-header.text-center {
margin-bottom: 0px;
}
-
And Save.
-
Result:
-
Let me know if you need more lesser space.
I hope it help.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
@LisanneH Please send me store url.
Hi @LisanneH To remove this space you have to add the below code in the theme.scss.css file Located in the asset folder in the theme code.
@media screen and (min-width: 591px){
#shopify-section-article-template .section-header {
margin-bottom: 0 !important;
}
}
.section-header .date:last-child {
margin-bottom: 0px !important;
}
Yes.! You have to add the important cause we are overring the default CSS. it’s Completely file to add important On CSS
Here’s a blog example: https://mydigitalpet.com/blogs/articles/astrological-guide
But someone posted the solution already. Thank you so much anyway!
It worked! Thank you so much!
Here’s a blog example: https://mydigitalpet.com/blogs/articles/astrological-guideBut someone posted the solution already. Thank you so much anyway!
The first reaction of @Made4uo-Ribe worked! Will this code turn out differently or the same?
Hey @LisanneH It’s more likely the same but my code is more accurate.
Hi, I dont like to interfer. But just to clarify it to you this code is for mobile screen. 