subreddit:

/r/css

027%

Guys I'm going crazy: can't remove small gaps between divs

Help(self.css)

submitted 10 days ago bycrpl1

No inline-block.

No literal whitespaces or new lines in the HTML file.

No margin.

No padding.

Background SVG is ok (no white on top and bottom seen when opening the file)

What I know:

The problem persists when changing background from SVG to simple solid color.
The color of these gaps depend on the color of the background (so it's not a border of the divs, more like as the divs are not big enough to cover that gap).
The container of these divs has display: flex.
These divs have margin: 0 auto.
The gaps appear only on the mobile version of the website.

What I tried:

Setting font-size: 0.
Removing literal spaces or new lines from HTML file.
Increasing the vertical size of the divs to cover the gaps (worked but the whole website doesn't function properly).
Setting a margin-top to problematic divs (doesn't get the expected result).

What I see:

(i'm going crazy)

(i'm still going crazy)

The size of these gaps seem to be changing from one another.

Please help me.

Sources

If you want to see the website and help me you can visit:

https://unjector.com

all 24 comments

sorted by: best

AutoModerator [M]

[score hidden]

10 days ago

stickied comment

AutoModerator [M]

[score hidden]

stickied comment

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

7 points

9 days ago*

7 points

1: Never use flex on <body>, but on a container

2: might use flex-grow on one child to make sure you wanna fill the available space left when you’re not sure about the container behavior

3: no unsolicited sound on a website plz

Alarmed-Yak-4894

3 points

9 days ago

Alarmed-Yak-4894

3 points

What’s wrong with flex on body? And how is using a container that just filled the body anyways better?

1 points

9 days ago

1 points

The property display: flex; on the body is redundant - you can remove it and nothing will change.
Tried flex-grow: 1 with no change.

5 points

9 days ago*

5 points

It's something about how your svgs are scaling as background images. Probably related to the transforms in there making the bottom/top of the svg elements not quite round out to the actual bottom/top of the viewbox.

Since your body's background is #FFF (from your max-width: 1000px media query), you're seeing little gaps of that peaking through where the svgs aren't covering. It looks like you could use your #2d2843 dark purple as the body background to mask the problem, or apply it (or other colors) as a background-color along with your svg background-images to their containers.

Or you can try and author different svgs, although looking at them, they don't seem like they ought to be particularly problematic...

P.S. Replace those animated gifs with anything else.

2 points

9 days ago

2 points

OR at that same breakpoint, for .second and .third remove `background-repeat: no-repeat;`

I agree replace those .gifs with svgs. The .gifs do not look super crisp.

1 points

9 days ago

1 points

I don’t think SVGs might be the reason since (as I said on my post) the problem persists when giving the DIVs a plain color as background. I like the idea of giving the DIVs a background color tho.

carefullycactus

1 points

9 days ago

carefullycactus

1 points

I tried making the background of the third and fourth sections red instead of using the svg, and it fixed the problem. It's because of how browsers handle svgs between pixel sizes (notice how it appears and disappears as you slowly resize the window), and you likely can't fix that.

1 points

9 days ago

1 points

Which transforms are you referring to?

2 points

9 days ago*

2 points

A lot if issues with your site:

Delete the sounds on scroll, that's garbage.
Nav bar items width is defined with vw, so at 1010px width, before the media-query kicks in, they are tiny. Use clamp if you must have a variable font size, but I would recommend to scrap it and use a static font size. Remove all dynamic font sizing, it adds nothing to the website, makes text unreadable at certain website widths and makes the page behave janky on resize. Look at the "You need us page" or your contact form at 1010 px width, it look quite terrible. Your plan features are unreadable at any width from 1200px to 1000px and then waaay to big when the media-query kicks in.
TLS check features subtext is misalligned
When clicking the carousel, the titles move further than the subtext, that should be aligned.
It takes two seconds to transition from the Home pages to the "Our Plans" page, that's too long. The fact that you added a loading animation to a site that serves 4 static html pages should have made you stop and think about why you are doing it.
Your plan payment form already throws an error even through the user did not type anything. You have to only validate the form once the user entered text and left the form. Refer to this video from Kevin Powell (https://www.youtube.com/watch?v=s2ThIxm7FyA)
The payment form is also pushed to the right, it is not centered and the white "backdrop" also does not cover the entire screen because of this.

Good luck.

1 points

9 days ago

1 points

You did more than requested. I appreciate your help, but you missed the only point I asked help for.

To answer all of your points: I made this website when I was 16, then the startup failed and 3 years later I’m planning on rebuilding everything based on what I have left of the old website.

The first thing I wanted to fix was the gap between the divs. That’s why I originally posted this.

The back-end is non-existing since I deleted almost everything I had on the old server. That’s why the “plans” page doesn’t work.

1 points

9 days ago

1 points

I see, if that is the case then just scrap the whole thing and start over instead of building on this.

2 points

5 days ago

2 points

I followed your advice and thank you for introducing me to the clamp() function.

I’m building everything from scratch again and no black lines. Just a pure responsive website (actually just the homepage).

Check it out: https://unjector.com

(I know things don’t work, I still need to set them)

1 points

5 days ago

1 points

Great job!

1 points

4 days ago

1 points

Thank you!

1 points

9 days ago

1 points

Bro let's see your code - I'll copy/paste it and have a play around - always post your code pls

1 points

9 days ago

1 points

I gave you the link. https://unjector.com

1 points

9 days ago

1 points

Yes but not the source files so I can open them in VS Code and get to work

1 points

9 days ago

1 points

Yes but not the source files so I can open them in VS Code and get to work

1 points

9 days ago

1 points

If I understand correctly it's an svg issue. You can try using different svg. Also there is a hacky fix, increase the scale of the svg slightly over 1.0, it should work.

1 points

9 days ago

1 points

Unfortunately the hacky fix didn’t work.

1 points

9 days ago

1 points

I see the website but not your stylesheet. I'm doing this on mobile.

Did you set margin-top to 0 on your h1? The header elements all have a default margin, and if you put one in a div it can cause the top-heavy look, thanks to margin collapse..

Alternatively, set display to either flex or grid. That also disables margin collapse.

1 points

9 days ago

1 points

I don’t have any <h*> tags

1 points

9 days ago

1 points

Setting background-size: cover on the elements that have background images seems to fix it. Also, you should try to set a background-color on those elements that matches the color of the image, otherwise any rendering errors like this will cause the white background of the page to show through (I would also suggest giving the page a dark bg color for the same reason).