Hello,
My theme is stiletto, how can I remove white space between sections in the homepage. And how can I remove the white space in the same section but between images like product images or grid images.
Topic summary
Removing white space in the Stiletto theme’s homepage sections and between product/grid images.
-
Access shared store link/password led to specific guidance. A reviewer recommended editing theme.css to adjust column spacing: reduce column-gap for .collection__products and .featured-collection-grid__products (the space between product columns) and tweak the value as needed.
-
A no-code option: in Theme Customizer, open each relevant section and set its padding to “None” to remove extra spacing per section.
-
A global CSS approach: add overrides at the bottom of main.css/base.css/style.css/theme.css to remove most spacing sitewide (e.g., .section { padding: 0; }, .featured-collection-grid__products { gap: 0; }, remove grid item paddings, mobile margin adjustments, and minor footer padding). This is broader and may affect multiple areas.
-
One suggestion referenced adding code in theme.liquid above , but the actual code snippet was missing, so its effectiveness is unclear.
-
Visual references (screenshots) are central for steps/results. No confirmation from the original poster; no marked solution. Discussion remains open.
1 Like
Hi @joysa ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.
the store link is shifabynajla.myshopify.com
the password is shifabynajla
I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!
Step 1: Go to Admin → Online store → Theme > Edit code:
Step 2: Search for the file theme.css. And add this code snippet to the end of the file.
.collection__products,.featured-collection-grid__products {
column-gap: 5px !important;
}
IN this step, you can change the value of column-gap smaller or higher as you want.
Step 3: Save and reload home page.
=>> The result:
Product page:
Home page:
I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.
Have a nice day sir!
1 Like
Hello @joysa , Go to Online Store → Open Theme customisation and open your any section where you want to remove spacing, and set padding as None to that.
In your section settings select padding to none option.
Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.
Hi @joysa
if you like to remove all white space,check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
.section {
max-width: 100%;
padding: 0;
}
.featured-collection-grid__products {
gap: 0;
}
.section.section--includes-product-items.section--vertical-padding-none {
padding-bottom: 0;
}
.grid.section.section--full-width {
padding: 0;
}
.grid-item.grid-item--width-50.grid-item--text-center {
padding-left: 0;
padding-right: 0;
}
@media (max-width: 959px) {
.grid-item+.grid-item {
margin-top: 0
}
.swiper-backface-hidden .swiper-slide {
margin-right: 0 !important;
}
.grid.section, .grid.section.section--full-width {
padding: 0;
}
}
.shopify-section.footer__parent {
padding: 0 20px;
}
And save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hi @joysa
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the
Hope this can help you solve the issue
Best regards,
Richard | PageFly