Jump to content

W3Schools' CSS Slideshow scroll buttons warping on mobile?


Recommended Posts


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. 




Screen Shot 2019-09-12 at 3.55.21 PM.png

Link to comment
Share on other sites

  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...