Getting rid of space at top of pages - Brooklyn theme

Tourist
51 0 3

How do you get rid of all that white space under headings on pages in Brooklyn theme? Also, how do you justify the text? Everything I try is not working. 

Thanks. 

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
409 0 60

Hi Josie,

Britton here with the Shopify support team.

If you want to get rid of the space in between the header text and the homepage elements you should be able to add this to the bottom of theme.scss.liquid:

.section-header {
margin: 0;
}

As for justifying content, what things on your homepage are you wanting to change the justification of? It should be possible to do via CSS or editing the liquid of your theme's code if we can get which elements you want to change around.

Remember to back up your theme by duplicating before making any code customizations!

-Britton

Britton Shopify Guru
1 Like
Tourist
51 0 3

:O How did you do that?! I've been trying to do that for ages and nothing was working haha. Thanks! 

The justification, I'm actually trying to write a new page and having trouble with the html editor. I was trying to justify all the text and put an image in-line in one of the paragraphs. I tried wraparound text but there's always a part of the last sentence under the image, no matter what changes I make to the image or paragraph. I just want half the page width to be the image and half to be the paragraph (with a slight margin inbetween), both the same height. 

0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
409 0 60

Hi again Josie,

using the Rich Text Editor to design pages is always tough! It's not really powerful enough for fine detail.

Generally, you either need to code the page in html to get something like that, or you can try out the Shogun page Editor app.

If you wanted to try the coding option, you would need to first view your page as html. You do that using this button: https://screenshot.click/18-28-psz84_znaz2.jpg. I would recommend trying something like this:

<div class="half-width"><img src="IMAGE SOURCE GOES HERE"></div><div class="half-width"><p>YOUR text should go here</p></div>

<style>
.half-width {
width: 50%;
}
</style>

If you can replace the "half-width" class with the actual grid used in your theme that will be way better. As it stands, what I wrote up there is not going to be super mobile responsive (and could maybe not work at all depending on your theme). The Shogun app is a much easier way to go.

-Britton

Britton Shopify Guru
1 Like
Shopify Partner
241 0 18

Sorry I'm late to the party here. (and thanks for the referral)

As mentioned, if you want to play around with making changes on your own, you can import your existing Shopify pages into Shogun's Drag and Drop Page Builder, and start editing them, and building new pages for your store.

No coding required (drag and drop), and works with any theme.

Let me know if you have any questions.


support@getshogun.com

Nick Raushenbush | Co-founder, Shogun | nick@getshogun.com | Try Shogun Page Builder for Shopify for FREE!
0 Likes
Tourist
51 0 3

Hey Britton, 

I didn't get notified of your reply until now. Thanks for the help again. 

Somehow after leaving it overnight it sorted itself out. I know that can't happen, but that's how it seemed, maybe I needed to come out of the page editor and back in for those particular changes to save and show in the preview idk. 

I'll save what you said though for next time I have problems with this. 

0 Likes