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

kansaifixer
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:

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 spacelotta white space

KetanKumar
Shopify Partner
15721 1751 5782

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

 

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
kansaifixer
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.
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?

0 Likes
lisaliboon
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

lisaliboon_0-1613754808480.png

 

 

lisaliboon_1-1613754808486.png

 

 

0 Likes
jack2804
New Member
2 0 2

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

Screen Shot 2021-03-18 at 9.55.28 AM (2).pngScreen Shot 2021-03-18 at 9.55.50 AM (2).png

KetanKumar
Shopify Partner
15721 1751 5782

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

 

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
0 Likes
jack2804
New Member
2 0 2

it works! thank you 

KetanKumar
Shopify Partner
15721 1751 5782

@jack2804 

it's my pleasure to help us

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
0 Likes