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

[kansaifixer]

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:

https://dreamlifejp.com/blogs/life-goals

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.
https://dreamlifejp.com/blogs/life-goals/nutritional_immunology

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.
https://dreamlifejp.com/blogs/life-goals/first-blog-post

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.

Bob

lotta white space

[KetanKumar]

@kansaifixer 

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;
}

[kansaifixer]

@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.
https://dreamlifejp.com/blogs/life-goals

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.
https://dreamlifejp.com/blogs/life-goals/nutritional_immunology

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?

[lisaliboon]

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

[jack2804]

hi im having the same issue but when I pasted the code you gave to the bottom of the timber.scss.liquid nothing happens I still have a big white space under my heading, my website is moderndayessential.com can you please help me out! thank you

[KetanKumar]

@jack2804 

sorry for this issue can you please try this code

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

#shopify-section-161378426160ccff9e, .index-sections .shopify-section:first-child:not(.shopify-section--full-width) {
    margin-top: 0;
}

[jack2804]

it works! thank you 

[KetanKumar]

@jack2804 

it's my pleasure to help us