So, i'm trying - and failing - to fix the right chevron (red arrow) on my virtual Google map popup. I'll try to document all the relevant code but i'm not sure it'll be reproducible without a Google map.

Basically, I want the right chevron to elegantly match the left chevron and stay in position at all breakpoints/resolutions.

.glyphicon {
  color: var(--rct-red);
}

.glyphicon-chevron-right {
  position: fixed !important;
  top: 63% !important;
  right: 21% !important;
}

.carousel-control.right {
  right: 0;
  left: auto;
  background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
  background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
  background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
  background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
  background-repeat: repeat-x;
}

.carousel-control {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15%;
  font-size: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgb(0 0 0 / 60%);
  background-color: rgba(0,0,0,0);
  filter: alpha(opacity=50);
  opacity: .5;
}

.panel   h4, div, a {
  text-align: center;
  font-size: large;
}

a {
  color: #337ab7;
  text-decoration: none;
}

a {
  background-color: transparent;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- Left and right controls -->
<a  href="#myCarousel" data-slide="prev">
  <span ></span>
  <span >Previous</span>
</a>

<a  href="#myCarousel" data-slide="next">
  <span ></span>
  <span >Next</span>
</a>

I'm not sure if that's enough to reproduce or not guys. The actual code is on a Google map at... https://staging.rebelcitytour.com/rebel-city-tour-of-cork/

So far, I've tried adjusting the chevron at various breakpoints to account for the layout shift as the resolution changes.

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
  .glyphicon-chevron-right {
    top: 63% !important;
    right: 21% !important;
  }
} 

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
  .glyphicon-chevron-right {
    top: 58% !important;
    right: 21% !important;
  }
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
  .glyphicon-chevron-right {
    top: 53% !important;
    right: 35% !important;
  }
}

I'm looking for a more elegant solution though.

CodePudding user response：

Position: fixed to any element will be positioned relative to the viewport. Please use position: absolute with added position : relative to its parent element to make it work relative to the parent element.

*.glyphicon-chevron-right {
  position: fixed !important;
  top: 63% !important;
  right: 21% !important;
}*

Refer this for a very Good Explanation about CSS Positions