More tricky overlay help CSS!

HTML-CSS
1

I am trying to eliminate a space or bar that’s appearing in my “.slider-wrapper” div. The slider-wrapper is a div used as a target for the slider-wrapper:before overlay. The element should be the same size as the “slider,” but it is not.

The html is:

           <div class="slider-wrapper">  <!--334px; too big-->
                   <!--::slider-wrapper::before; also 334px -->
                    <div class="slider"> <!--290px; the correct size -->
                        <!--stuff-->
                    </div>
                </div>

I pretty much have got that, except a weird problem has popped up that I can’t figure out. There is a space above my image that I can’t get rid of.

Basically the “.slider” is the desired size and shape. The “.slider-wrapper” is a div that wraps the “.slider” and is mainly used as a target for the “.slider-wrapper::before” that is the overlay. For some reason the “.slider-wrapper” is larger than the “.slider”.

I have no margins or borders anywhere near these elements. I’m stumped!

code: https://github.com/CactusWren2020/marketing-site/blob/master/styles.css
deployment: https://dazzling-mcnulty-ee0625.netlify.app/

2

Well, give your .slider-wrapper a height of 290px and the h3 inside of your .slider this css

    position: relative;
    display: inline-block;
    font-size: 44px;
    text-transform: uppercase;
    left: 100px;
    top: 28%;

It will fix the issue.

1 Like
3

You just need to remove the margin on the h3. You will have to re-position it after that (adjust the top offset).

1 Like
4

Thanks, @lasjorg, that solved it nicely!