Remove extra space

[dordnm]

I need to remove the extra space below the homepage photo so its centered and doesn’t scroll on the mobile site. Also, I need the white space below the products to be gone since theres no products down there yet. This has been killing me all day.

[namphan]

Hi @dordnm,

Please send the website link, I will check it for you

[dordnm]

www.dordor.us…………. This 20 character minimum thing is so dumb.

[Elitexclusivetech]

Hi! I can definitely help with that. I’ll adjust the homepage photo spacing so it’s centered on mobile and remove the extra white space below the products. I’ll get started right away and update you shortly.

[Small_Task_Help]

@dordnm

I need to remove the extra space below the homepage photo so its centered and doesn’t scroll on the mobile site. Also, I need the white space below the products to be gone since theres no products down there yet. This has been killing me all day.

Hi,

Hope this will help

• Add HERO CSS (replace .home-hero with your class). Test mobile.
  CSS example

/* HERO — mobile-friendly full-screen image (no scroll) */
.home-hero, .hero, .section-hero, .hero-section {
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* If hero uses an <img> tag */
.home-hero img, .hero img, .hero-section img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;    /* crops to fill without stretching */
  object-position: center center !important;
  display: block !important;
}

/* If hero uses CSS background-image instead */
.home-hero, .hero-section {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

• For empty products: implement Liquid conditional (recommended). If not possible, use JS fallback.

Code example

{% assign coll = collections[section.settings.collection] %}
{% if coll and coll.products_count > 0 %}
  <!-- BEGIN existing featured-collection HTML (leave this part as-is) -->
  <section class="featured-collection">
    <!-- existing code that outputs the grid of products -->
  </section>
  <!-- END existing featured-collection HTML -->
{% endif %}

[laddisahsi]

I can help you make this section’s image display full width without the side gaps.

Right now, the max-width: 72rem; in .multicolumn-list__item:only-child is restricting it.

Option 1 – If your theme customizer supports full width

Go to Online Store → Themes → Customize.

Find this section.

Check if there’s a “Full Width” or “Stretch” option and enable it.

Option 2 – Remove the max-width via CSS

Go to Online Store → Themes → Edit Code.

Open your main CSS file (base.css, theme.css, or section-multicolumn.css).

Search for:
.multicolumn-list__item:only-child {
max-width: 72rem;
}

Either remove that max-width line, or override it by adding this at the end of your CSS file:

.multicolumn-list__item:only-child {
max-width: 100% !important;
}

This will let the section expand to full width and remove the side spacing. See screenshot:- https://prnt.sc/ttEST3FQBdU8

If you share your store access, I can apply the change for you quickly.

[namphan]

Hi @dordnm,

Please go to Customize > Sections > Multicolumn > Custom CSS and add code:

@media screen and (max-width: 749px) {
.multicolumn-list__item.center .media--adapt {
    padding-bottom: 0 !important;
    height: calc(100vh - 110px);
}
}

If I helped you, then a Like would be truly appreciated.

[Bundler-Manuel]

Hello there @dordnm I think this article here How to Remove White Space in Shopify would help provide some useful direction for you

[dordnm]

I dont understand this at all

[dordnm]

Can you help with the space on the products page?

[namphan]

Hi @dordnm,

I tested and when you remove this, it won’t really show up well. I have 2 options for it, which one do you want?

• Option 1:

• Option 2:

Please let me know.