1

The carousel is displaying fine on desktop and laptop viewports, but displays off-center to the right on mobile viewports. Nothing evident is sticking out and using Chrome developer tools the container appears to be aligned just fine, but for whatever reason the carousel positions itself visually shifted right. HTML and CSS snippets for reference.

HMTL

    <!-- Records -->

    <section class="dark-section" id="artists">

      <h1>Featured Artists</h1>

      <div id="records-carousel" class="carousel slide" data-interval="false">
        <ol class="carousel-indicators">
          <li data-target="#records-carousel" data-slide-to="0" class="active"></li>
          <li data-target="#records-carousel" data-slide-to="1"></li>
          <li data-target="#records-carousel" data-slide-to="2"></li>
          <li data-target="#records-carousel" data-slide-to="3"></li>
        </ol>

        <div class="carousel-inner">
          <div class="carousel-item active container-fluid">
            <img src="images/ali-handal.jpg" alt="ali-handal-img">
            <br>
            <br>
            <a href="https://shop.alihandal.com/collections/recorded-music-by-ali-handal"><h3>Ali Handal</h3></a>
          </div>
          <div class="carousel-item container-fluid">
            <img src="images/david-newbould.jpg" alt="david-newbould-img">
            <br>
            <br>
            <a href="http://davidnewbould.com/discography-for-david-newbould/"><h3>David Newbould</h3></a>
          </div>
          <div class="carousel-item container-fluid">
            <img src="images/debra-devi.jpg" alt="debra-devi-img">
            <br>
            <br>
            <a href="https://debradevi.com/store"><h3>Debra Devi</h3></a>
          </div>
          <div class="carousel-item container-fluid">
            <img src="images/neal-fox.jpg" alt="neal-fox-img">
            <br>
            <br>
            <a href="https://www.therealnealfox.com/shop/"><h3>Neal Fox</h3></a>
          </div>
          <div class="carousel-item container-fluid">
            <img src="images/sirsy.jpg" alt="sirsy-img">
            <br>
            <br>
            <a href="https://sirsy.com/shop/"><h3>Sirsy</h3></a>
          </div>
          <div class="carousel-item container-fluid">
            <img src="images/sirsy.jpg" alt="sirsy-img">
            <br>
            <br>
            <a href="https://sirsy.com/shop/"><h3>Sirsy</h3></a>
          </div>

        <a class="carousel-control-prev" href="#records-carousel" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        </a>
        <a class="carousel-control-next" href="#records-carousel" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
        </a>
      </div>

    </section>

CSS

a {
  color: inherit;
}
body {
  font-family: "Ropa Sans", sans-serif;
  text-align: center;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Ropa Sans", sans-serif;
}

/* Containers */

.container-fluid {
  padding: 2% 15%;
}

/* Headings */

.big-heading {
  font-size: 3.5rem;
  line-height: 1.5;
  padding-top: 5%;
}

/* Sections */

.dark-section {
  background-color: #121111;
  color: #fff;
}

.light-section {
  background-color: #F3F1F1;
  color: black;
}

/* Records-Carousel */

#artists {
  padding: 100px;
}
Pietro
  • 13
  • 3

1 Answers1

0

Even in desktop mode, if you reduce the size, you see the image going towards the right... the reason for that is the class container-fluid on div with class carousel-item... so we overwrite is using the following CSS:

.carousel-inner .container-fluid {
  padding: 0;
}
.carousel-item a {
    position: absolute; 
    top:50%;     
    justify-content: center;
    display: flex; 
    width: 100%;
}

UPDATE: on questioner's reqeust

working snippet below:

a {
  color: inherit;
}

body {
  font-family: "Ropa Sans", sans-serif;
  text-align: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Ropa Sans", sans-serif;
}


/* Containers */

.container-fluid {
  padding: 2% 15%;
}


/* Headings */

.big-heading {
  font-size: 3.5rem;
  line-height: 1.5;
  padding-top: 5%;
}


/* Sections */

.dark-section {
  background-color: #121111;
  color: #fff;
}

.light-section {
  background-color: #F3F1F1;
  color: black;
}


/* Records-Carousel */

#artists {
  padding: 100px;
}

.carousel-inner .container-fluid {
  padding: 0;
}

.carousel-item a {
  position: absolute;
  top: 50%;
  justify-content: center;
  display: flex;
  width: 100%;
  color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<!-- Records -->
<section class="dark-section" id="artists">
  <h1>Featured Artists</h1>
  <div id="records-carousel" class="carousel slide" data-interval="false">
    <ol class="carousel-indicators">
      <li data-target="#records-carousel" data-slide-to="0" class="active"></li>
      <li data-target="#records-carousel" data-slide-to="1"></li>
      <li data-target="#records-carousel" data-slide-to="2"></li>
      <li data-target="#records-carousel" data-slide-to="3"></li>
    </ol>

    <div class="carousel-inner">
      <div class="carousel-item active container-fluid">
        <img src="https://akberiqbal.com/Jumbo.jpg" alt="ali-handal-img">
        <br>
        <br>
        <a href="https://shop.alihandal.com/collections/recorded-music-by-ali-handal">
          <h3>Ali Handal</h3>
        </a>
      </div>
      <div class="carousel-item container-fluid">
        <img src="images/david-newbould.jpg" alt="david-newbould-img">
        <br>
        <br>
        <a href="http://davidnewbould.com/discography-for-david-newbould/">
          <h3>David Newbould</h3>
        </a>
      </div>
      <div class="carousel-item container-fluid">
        <img src="images/debra-devi.jpg" alt="debra-devi-img">
        <br>
        <br>
        <a href="https://debradevi.com/store">
          <h3>Debra Devi</h3>
        </a>
      </div>
      <div class="carousel-item container-fluid">
        <img src="images/neal-fox.jpg" alt="neal-fox-img">
        <br>
        <br>
        <a href="https://www.therealnealfox.com/shop/">
          <h3>Neal Fox</h3>
        </a>
      </div>
      <div class="carousel-item container-fluid">
        <img src="images/sirsy.jpg" alt="sirsy-img">
        <br>
        <br>
        <a href="https://sirsy.com/shop/">
          <h3>Sirsy</h3>
        </a>
      </div>
      <div class="carousel-item container-fluid">
        <img src="images/sirsy.jpg" alt="sirsy-img">
        <br>
        <br>
        <a href="https://sirsy.com/shop/">
          <h3>Sirsy</h3>
        </a>
      </div>

      <a class="carousel-control-prev" href="#records-carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      </a>
      <a class="carousel-control-next" href="#records-carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
      </a>
    </div>

</section>
Akber Iqbal
  • 14,487
  • 12
  • 48
  • 70
  • Thank you Akber! That did correct the off-centering issue, however, it also brings about a new one. After making the change the h3 text of the carousel items overlays the carousal indicators. – Pietro Jul 28 '20 at 17:19
  • Thanks again Akber, but still no dice :( The addition overlays the hyperlinked text on the center of the image which is not the desired result. Please refer to the original code for the intended relational display of the text, carousal indicators and items. – Pietro Jul 29 '20 at 15:25