hairynervous

bump tbh

www.thomascallahan.pw

I used this tutorial to create the slideshows on my portfolio website. The problem is only on mobile (and doesn't show up with resizing the desktop window/inspector tool on Chrome), where the left scroll button's width is stretching across the whole image. I can't figure out what is causing this in W3School's stylesheet, which I copied into my own stylesheet.

The relevant HTML is:

<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>

and relevant CSS (I think) is:

.w3-button {
    border: none;
    display: inline-block;
    position: relative;
    right: 0;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: black;
    background-color: white;
    text-align: center;
    cursor: pointer;
    white-space: nowrap
}

.w3-display-left {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%)
}

There are a few more .w3-buttons in the stylesheet though. I just really don't know where to begin.