removal of thick white lines (not padding) - Taste Theme

Store Design
, ,

Topic summary

A Shopify store owner using the Taste theme sought to remove thick white lines appearing between sections on their site. These lines were not caused by padding but by section margins.

Initial Solution (Desktop):
A CSS fix was provided targeting .section+.section with margin-top: 0 !important; for screens wider than 750px. This successfully removed the white lines on desktop.

Mobile Issue:
The user discovered the lines persisted on mobile. They self-resolved this by adjusting the min-width media query parameter.

Blog Page Problem:
Months later, similar white lines appeared at the top and bottom of blog posts. Investigation revealed the issue stemmed from element margins “protruding” from their containing sections.

Final Solution:
Adding overflow: auto; to .article-template resolved the blog page issue by containing child element margins. The fix can be applied via the section’s Custom CSS setting, theme settings, or stylesheet.

Status: Resolved through CSS modifications.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hi Team,

I have done a bunch of googling and tried a bunch of suggestions from previous similar threads but can’t seem to find a solution to this… I’m trying to remove the thick white lines (or make them black if that’s easier). They don’t appear to be padding, unless I’m missing something!

Theme is taste

Cheers

Screenshot 2025-02-02 102333.png
Screenshot 2025-02-02 102333.png2146×1586 508 KB

1 Like
2

Hi @TooSpicyNZ

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. 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 screen and (min-width: 750px) {
    .section+.section {
        margin-top: 0 !important;
    }
}

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

1 Like
3

Legend, thanks very much. Cheers

4

Hi again, just noticed that although this fixes the issue for desktop version they are still there for the mobile version, any ideas? Thanks

EDIT - Don’t worry i changed the min width (d’uh!) Cheers

1000037337.jpg
1000037337.jpg1440×3088 273 KB

5

Hi, you helped me a few months ago… i now have a similar problem on the blog page… both at the top and the bottom of the blog post… hope you can help! Thanks in advance!

image
image1920×1157 104 KB

6

Hello @TooSpicyNZ

I checked your website, and it seems to be working now. Perhaps the issue has already been resolved?

image
image1339×612 131 KB

7

Hi, sorry for late reply i didn’t see a notification for your reply!

The issue is specific to the blog page(s) which we haven’t used until now.

1 Like
8

This happen because an element inside your section has big top margin, but this margin kinda “protrudes” from the section.
There are several ways to combat the white lines:

  • Set the site background to the same dark color your section has;
  • Change from margin-top to padding-top for that element;
  • Easiest – make this element to contain their children elements, including their margins.

To do this, use this CSS code:

.article-template {
  overflow: auto;
}

You can paste it into this section’s “Custom CSS” setting (will prevent possible side-effects), Theme settings => “Custom CSS” or into your stylesheet asset (not recommended, as it will difficult to update your theme to newer version).

1 Like
9

perfect, that worked, thank you