Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #16371
Closed
Open
Issue created Apr 26, 2015 by Administrator@rootContributor

Carousel control is vertically off center for small screens

Created by: rlindner81

Try any carousel control and reduce the screen width below 768px and you will see the glyphicon-chevron left and right jump below the vertical center.

Fortunately the fix is easy. In less/carousel.less after line 132 add the fix line

  // Toggles
  .icon-prev,
  .icon-next,
  .glyphicon-chevron-left,
  .glyphicon-chevron-right {
    position: absolute;
    top: 50%;
    margin-top: -10px; /* fix */
    z-index: 5;
    display: inline-block;
  }

As pointed out by @peterblazejewicz, the correct margin-top styling already exists for the .icon-* classes. So this line, could be removed after the change above. In less/carousel.less line 150

  .icon-prev,
  .icon-next {
    width:  20px;
    height: 20px;
    /* margin-top: -10px; remove */
    line-height: 1;
    font-family: serif;
  }
Assignee
Assign to
Time tracking