Hi, I’m having trouble removing blank spacing in between sections on my webiste, miaava.com. Can anyone help?
Topic summary
Unwanted blank space appears between sections on a Shopify Dawn theme site (miaava.com), notably below the announcement bar, above the “crafted with utmost…” text, and below the collapsible content.
Proposed fixes included: adding custom CSS in theme.liquid (Shopify’s main theme layout file) under the tag; and cropping excess whitespace from the logo and banner images to reduce header height.
Further guidance suggested adjusting spacing via theme settings and reducing CSS padding-bottom values, with the option to set pixel values (e.g., 15px/20px/5px/10px) to 0px if needed, noting it may overly compress the layout.
Findings from screenshots: middle gap was resolved after cropping the banner; the announcement bar gap persists despite cropping the logo; the third gap appears to be a shadow behind the collapsible (quick links) menu likely controlled by CSS.
Images and screenshots are central to diagnosing the exact spacing issues.
Status: partially resolved. Remaining gaps (below announcement bar and collapsible menu shadow) are still open; no confirmed final CSS fix yet.
Hey @lamar45mills ,
Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.
Screenshot is for reference only, the correct code to paste is the one shown above.
You should also crop out all this unnecessary whitespace in the logo because they increase the height of your header
Hey there Lamar45mills
You can adjust the gap between theme from the theme settings as shown in the screenshot below
If you still need any further assistance feel free to contact me, and if helped you a bit please give upvote.
I added the code, but unfortunately, the gap still exists. I appreciate your efforts.
Thank you or the insight. Unfortunately, the gaps still exists. I appreciate your efforts.
Could you maybe screenshot and show which gaps you are exactly talking about. Because I suspect the code is applying on gaps that I saw, not the ones that you want to remove.
If you need further assistance we can connect on live call and I will help you fix that issue you are facing.
I’ve attached screenshots.. 3 areas… one below the announcement bar. Another above the text “crafted with utmost…”. An additional one below the collapsable content.
Hello there,
I inspected your screen shot and found out the gap in the header is causing by logo white space in the image and this is the same case with the banner below and the third gap is causing by padding bottom css.
Maybe try cropping the images white spaces… there still are white spaces apart from this let me know after fixing these first
Thank you. I was able to solve the gap for the image in the center of the page. However, gap after the announcement bar still exists despite cropping the white space around the logo.
After a closer look at the 3rd gap by the quick links section, it appears to be a shadow behind the collapsable menu. Not sure how to remove this but will keep trying.
Hey @lamar45mills ,
I mentioned earlier to remove the whitespace on the logo, I assumed you had done that.
Such is the case for the other image as well. Please cut out the whitespace, this step is compulsory. You can cut out only top and bottom if you feel like cutting the sides would stretch it too much.
For the rest, please follow these instructions
Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.
If you still think there’s too much space, you can change all the 15px, 20px, 5px, 10px values to 0px, but then I feel like it’ll cramp everything together.
Screenshot is for reference only, the correct code to paste is the one shown above.