Re: How to remove white space below title/date in blog posts? (Brooklyn Theme)

Solved

How to remove white space below title/date in blog posts? (Brooklyn Theme)

LisanneH
Tourist
9 0 4

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. 

test.png

 

Thanks in advance!

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
6999 1666 2058

This is an accepted solution.

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:
  • Ribe_Dagandara_0-1693260028156.png
  • 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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 11 (11)

code_with_adam
Shopify Partner
43 1 2

@LisanneH 
Kindly share the store url ?

Thanks

LisanneH
Tourist
9 0 4

Here's a blog example: https://mydigitalpet.com/blogs/articles/astrological-guide

But someone posted the solution already. Thank you so much anyway!

Made4uo-Ribe
Shopify Partner
6999 1666 2058

This is an accepted solution.

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:
  • Ribe_Dagandara_0-1693260028156.png
  • 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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
LisanneH
Tourist
9 0 4

It worked! Thank you so much!

DelightCart
Shopify Partner
1242 82 157

@LisanneH Please send me store url.

Delight Cart - It's time to turn your visitors into loyal shoppers! 

Delight Loyalty - Increase repeat sales quickly and build lifelong customers loyalty.
LisanneH
Tourist
9 0 4

Here's a blog example: https://mydigitalpet.com/blogs/articles/astrological-guideBut someone posted the solution already. Thank you so much anyway!

RockTechnolabs
Shopify Partner
251 36 59

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
banned
LisanneH
Tourist
9 0 4

The first reaction of @Made4uo-Ribe worked! Will this code turn out differently or the same?

RockTechnolabs
Shopify Partner
251 36 59

Hey @LisanneH  It's more likely the same but my code is more accurate.

 

banned
Made4uo-Ribe
Shopify Partner
6999 1666 2058

Hi, I dont like to interfer. But just to clarify it to you this code is for mobile screen. 😅

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
RockTechnolabs
Shopify Partner
251 36 59

@LisanneH just remove the  

@media screen and (min-width: 591px){}
and we are good to go
banned