Spacing on Collections Page - Empire theme

Store Design
,

Topic summary

Issue: Reduce excessive vertical space between sections on a Shopify Empire theme collection page (especially on mobile). A screenshot and live link were provided.

Solution (mobile): Edit the theme CSS file and add a media query (max-width: 719px) to: 1) hide the breadcrumbs (nav.breadcrumbs-container) and 2) remove top spacing on the main section (#shopify-section-template–…__main). “Media query” = CSS rules that apply only at certain screen sizes.

Further refinement: Also hide the image-with-text content wrapper (.pxs-image-with-text-content-wrapper…) and set padding-top on the main section to 20px (or reduce/remove it) to make the gap even smaller. The OP confirmed this produced the desired result.

Desktop tweak: Optional CSS provided to hide breadcrumbs and set a 20px top margin on desktop as well.

Artifacts: Before/after screenshots illustrate the spacing changes.

Outcome: Resolved. The spacing was successfully reduced on mobile (and optionally on desktop) via CSS edits; padding value can be adjusted to taste.

Summarized with AI on January 19. AI used: gpt-5.
1

How can I reduce the size of the space between the two sections? This is on a collections page on a mobile device.

See screenshot below and link here: https://propmoney.com/collections/realaged-products?_pos=1&_psq=Updated&_ss=e&_v=1.0

Thanks in advance.

IMG_5030.jpg
IMG_5030.jpg1289Ă—2226 193 KB

1 Like
2

Hi @thekenstar

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 719px){
nav.breadcrumbs-container {
    display: none !important;
}

div#shopify-section-template--20590908768532__main {
    margin-top: 0px !important;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

@Made4uo-Ribe Fantastic! It definitely lessened the space. Is that the limit of how small I can make the space?

1 Like
4

We can reduce more. Do you like to near?

Try this one same Instruction.

@media only screen and (max-width: 719px){
.pxs-image-with-text-content-wrapper.pxs-image-with-text-content-position-y-bottom.pxs-image-with-text-content-position-x-center {
    display: none;
}

div#shopify-section-template--20590908768532__main {
    padding-top: 20px;
}
}

And Save.

I just leave 20px for space. You can remove if you dont like.

Result:

Made4uoRibe_0-1694037662645.png
Made4uoRibe_0-1694037662645.png554Ă—286 29 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

@Made4uo-Ribe That worked great! Thank you so much.

1 Like
6

Try this one for desktop.

nav.breadcrumbs-container {
    display: none !important;
}

div#shopify-section-template--20590908768532__main {
    margin-top: 20px !important;
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

7

@Made4uo-Ribe Wow you are an expert. Thank you so much for your help!!

1 Like