Hi there! I need to remove empty space on this page: https://mathimaginefoundation.ca/pages/news
I think this means I need to overlap the text column section on top of the page heading image? Can anyone help?
Thanks!
Topic summary
A user needed to remove empty white space on their Shopify page by overlapping a text column section on top of a header image. Screenshots showed the spacing issue between the page heading image and content below.
Solution Provided:
- Add custom CSS to the theme’s stylesheet (base.css/theme.css/style.css/main.css/custom.css)
- The CSS code hides the default page content element and adjusts padding for specific page sections
- Uses negative top padding (150px) to create the overlap effect
Outcome:
The solution was successfully implemented and resolved the spacing issue. The discussion is marked as resolved.
Hi @VerbCreative ,
Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.
.news-page-width > .page-content {
display: none !important;
}
.page-width.multicolumn-news {
padding: 23px 30px !important;
}
.page-width.news-page-width {
padding: 150px 30px 0px 31px !important;
}
Hi @VerbCreative ,
Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.
.news-page-width > .page-content {
display: none !important;
}
.page-width.multicolumn-news {
padding: 23px 30px !important;
}
.page-width.news-page-width {
padding: 150px 30px 0px 31px !important;
}
1 Like
Excellent!! Thank you so much 
You’re welcome! @VerbCreative 