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 post
Share on other sites
  • 3 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...