How To Remove Padding Between Sections?

Store Design
, , , , , ,

Topic summary

A user seeks to remove excessive padding from their Shopify password page, sharing a URL and screenshots showing the spacing issues.

Initial Solutions Provided:

  • Multiple community members offered CSS code snippets to be added to theme.liquid or theme.css files
  • Code targets elements like .gta-banner, .password--password-center, and .section with padding: 0 and height: fit-content properties

Current Status:

  • The original poster reports partial success: padding was removed successfully
  • New Issue: Newsletter text width is now too narrow and needs to be increased
  • Additional CSS solutions were provided targeting .text-center and .gta-content__container elements

Technical Note: Some code snippets in the thread appear corrupted or reversed (text displayed backwards), which may affect implementation. The discussion remains ongoing as the user works to achieve the desired newsletter text width while maintaining the padding fixes.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

i wanna remove large paddings from my password page..

URL: https://zappdrink.myshopify.com/password

Pass; Zapp

Screenshot 2024-11-27 125249.png
Screenshot 2024-11-27 125249.png1893×972 59.3 KB

Screenshot 2024-11-27 125302.png
Screenshot 2024-11-27 125302.png1899×974 25.4 KB

2

Hi @Emiway1

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
Step 2: Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
Step 3: Add the following code at the bottom of the file above tag

Here is the code for Step 3:

{% if template.nam == "password" %}
.gta-banner__content-wrap {
    height: fit-content !important;
}
.gta-banner__overlay {
    display: none !important;
}
.gta-banner {
    height: fit-content !important;
}
.gta-banner.gsc_countdown_timer_countdown_jFkJjr::before {
    display: none;
}
.password.password--center {
    height: fit-content !important;
    min-height: unset !important;
    padding: 0 !important;
}
.section.section-blends.section-full {
    padding-bottom: 0 !important;
}
{% endif %}

image (1).png
image (1).png1884×878 52.7 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

3

Not Working

4

i put this code in theme.css at bottom and it working perfectly, but there is only one problem is want that newsletter text broad, i think width is so small.. wanna increse that

Screenshot 2024-11-27 132908.png
Screenshot 2024-11-27 132908.png1892×885 45.7 KB

5

Hello @Emiway1

Try this Code.

{% if template.name == "password" %}
.gta-banner__content-wrap {
    height: fit-content !important;
}
.gta-banner__overlay {
    display: none !important;
}
.gta-banner {
    height: fit-content !important;
}
.gta-banner.gsc_countdown_timer_countdown_jFkJjr::before {
    display: none;
}
.password.password--center {
    height: fit-content !important;
    min-height: unset !important;
    padding: 0 !important;
}
.section.section-blends.section-full {
    padding-bottom: 0 !important;
}
6

Hello, @Emiway1

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
.text-center {
    text-align: center;
    padding: 14px !important;
}

.gta-content__container.gsc_countdown_timer_countdown_jFkJjr {
    display: flex;
    overflow: hidden;
    padding: 0px !important;
    border: initial;
    border-radius: 16px;
}

.section.section-blends.section-full {
    padding: 0px !important;
}

Thanks!