FAQ on Brooklyn Theme: Blog Posts Featured Images Size List and White Space Issues

New Member
2 0 1

Standard Intro: Just getting started with Shopify, and having various issues with too much or too little white space. I've spent hours on this very informative and helpful community board, trying to find answers and apply theme.scss.liquid code alteration answers with mixed success. It's such a common issue across so many themes, with questions on this board going back years, I'm surprised there has never been a dedicated theme customizer option for setting white space to the user's exact specifications.

Here is where I have not been able to tighten things up:


PW:  lilyshop

1. The spacing between the header menu, the blog title, and the first featured image, is pretty ridiculous on a desktop monitor. On a smartphone, it's a bit better but still a lot of white space.

2. On a blog post that was created with the standard Shopify blog page creator, I managed to tighten up the gap between the date and the text (using an answer from dmwwebartisan) but the white space between the header menu and blog title is still considerable.

3. On a blog post that was created with Pagefly, I managed to reduce the gap by entering a negative 60px value in the Pagefly Styling Top Margin but there is still a padding gap even above that on the Shopify Brooklyn theme.

4. Finally, back to the size of the featured images for a blog posts list. Is there any way to customize the image sizes so that (on a desktop monitor) multiple blog post featured images with their blog titles could be viewed in the same space? What I mean is that currently on a desktop monitor, besides all the white space gapping, I can only see the top half of the featured image from the most recent blog post.
Even on a smartphone, only the image is viewable and not even the title for the post can be seen.

Cheers and thank you in advance for any assistance you might provide.


lotta white spacelotta white space

Shopify Partner
14255 1657 5136


1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.

.template-blog .main-content {
    padding-top: 0 !important;


If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
New Member
2 0 1

@KetanKumar Thank you for your reply!

The inclusion of that code you gave, certainly tightened up the gap between the header menu and the blog title.

However, there are still considerable gaps that I would like to be able to narrow:

A. Between the "Life Goals" blog title and the top of the first featured image on the first blog post.

B. The gap that still exists between the header area and the title of the actual blog post.

Finally, and I know I am touching on a different topic area than white space controls, but is there anyway to get those default feature picture sizes in the blog lists down to a more reasonable size to appear along with the individual post titles and snippets? Perhaps this is something best not to be done in css code, but using a different layout or blogging app function to customize the blog posts gallery?

New Member
5 0 0

HI Ketan!

I'd like to mirror the spacing of my products page to all pages found in my footer menu. There's just too much white spaces in the header of about, faqs, and contact page. Hope you could help me out thanks!

url: thequinoa.co, password:01