I used to have a static website with I built with Bulma. I’ve now migrated to Ghost and I’m using the Headline Theme for the new site. I’m migrating the old articles one by one. I wanted to be able to split my content into columns so some parts of the post content could be two columns, three columns or single columns.
My solution was to take Bulma Sass and take only the layout parts of it - columns, section etc. That CSS file is then injected into the site header. So now in the editor, I could insert an HTML block, put my column structure:
<div class="columns"
<div class="column is-half">
and then start writing my content in the editor as normal, and then once that’s done for that section, add another HTML block and close out the divs. The issue is that if I just do this, the normal content width is already small, so then splitting it in two columns inside of that makes it tinier. So I added the following CSS change, to make the content full width:
.gh-content {
grid-template-columns: [full-start] minmax(var(--container-gap), 1fr) [main-start] min(100%, 100% - var(--container-gap) * 2) [main-end] minmax(var(--container-gap), 1fr) [full-end] !important;
}
I then noticed extra margins being added to my divs because of this existing CSS:
.gh-content * + * {
margin-bottom:0;
margin-top:calc(28px*var(--content-spacing-factor, 1))
}
So I modified it to:
.gh-content *:not(div) + * {
margin-bottom:0;
margin-top:calc(28px*var(--content-spacing-factor, 1))
}
But now there are other elements that keep getting the top margin so I have to add new rules giving them margin-top:0.
So my question is this:
Is there a simpler way for me to make the content full width, and is there an easier way to modify the margin-top rule so it’s added correctly to paragraph tags and all but not to my other code? Any help is welcome and appreciated. Thank you!