Bootstrap 4 Carousel Properly Aligned on Small Screens

I am facing an issue with the carousel display. It appears perfectly centered on desktop and laptop screens but shifts to the right on mobile devices. I checked using Chrome developer tools and everything seems aligned correctly within the container. Here are the HTML and CSS snippets for reference:

HTML

    <!-- 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>
          .... (additional carousel items)
          
        <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;
}

Answer №1

When viewing in desktop mode, resizing the image causes it to shift towards the right. This behavior is due to the presence of the container-fluid class on the carousel-item div. To correct this, we can override its styling 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: at the request of the questioner

Below is a functioning snippet:

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a custom route in Node.js using Express for posting content and adding it to a specific user's page

I am currently working on a node.js express project where I am developing a health app for a trainer to manage his clients. The main functionality of the app includes allowing the trainer to access individual client profiles and view their exercise list by ...

`Inconsistencies between navbar hide and show toggling on smaller and bigger screens`

I've been experimenting with making my navbar collapsible using Flexbox. Initially, I was able to toggle the navbar correctly when the screen size is smaller. However, I encountered an issue where the navigation items do not reappear when I hide them ...

Issues with CSS compatibility have been identified on Internet Explorer version 7

Currently, I am in the process of working on a website. You can access it through this link. The good news is that the site functions well on FireFox, Chrome, and IE 8. However, the bad news is that it does not display properly on IE 7. There are alignme ...

Is it possible to embed a Microsoft Teams meeting within an Iframe?

Is it possible for MS Teams to provide a URL of a video meeting that can be embedded in external locations, such as an iframe on my website? I attempted to add it like this: <iframe src="https://teams.microsoft.com/l/meetup-join/19%3ameeting_N2E3M ...

When a form contains a ViewChild element, changes to the ViewChild element do not automatically mark the

Let's set the stage: MainComponent.html <form #someForm > <input type="text" name="title" [(ngModel)]="mainVar" /> <child-component /> <input type="submit" [disabled]="someForm.form.pristine" /> </form> ChildComp ...

Creating a shadow effect within a CSS mask: A simple guide

Is it possible to create a shadow within an SVG mask cutout? Here is the code snippet I am currently using index.html <div class="content"> <section id="home-section"> </section> ... </div> styles. ...

Manipulating HTML content with Javascript Array

Is there a way to retain Javascript context from an array? Any suggestions for improving this code? SAMPLE: <html> <script type="text/javascript"> var rand = Math.floor(Math.random() * 6) + 1; var i = Math.floor(Math.random() * 6) + 1; var ...

What is the best way to position text messages at the bottom of a chat window?

I am currently working on a chat window, and while setting the height to 100% works perfectly, I am facing difficulty in making the messages appear at the bottom. HTML: <div class="d-flex justify-content-center"> <div class="container containe ...

Tips for getting a browser to clear the cache specifically for the .html files on your website

After making updates to a client's website, I'm encountering an issue where the browser is displaying a cached version of the site. The website consists of static .html files. Although clearing my browser's cache resolves the issue for me, I ...

What is the best way to dynamically swap out an image within an element?

Is there a way to dynamically replace this image without deleting the HTML SVG element and re-rendering it? xlink:href="http://missosology.info/forum/download/file.php?avatar=11666_1307312313.jpg" CODE: https://jsfiddle.net/bfv17f0e/ <svg class="clip ...

How to position an SVG image directly next to text

Here is my JSFiddle with an SVG positioned to the left of some text inside a button. I am looking for a way to align the SVG vertically with the text within the button. I've considered a couple of methods: Trying to adjust the line-height, but that ...

Guide to making a button in jQuery that triggers a function with arguments

I've been working on creating a button in jQuery with an onClick event that calls a function and passes some parameters. Here's what I have tried so far: let userArray = []; userArray['recipient_name'] = recipient_name.value; userArray[ ...

Using JavaScript to modify the width of an element

I have been struggling to increase the width of an element in my HTML using JS, but it's not working correctly. This is crucial for responsive design as the content should scroll when necessary. I attempted to achieve this with the following code, ...

Creating a Sticky Header and Footer with Responsive Design: Ensuring Content Div Expansion between Them

Greetings. I am working on creating a simple responsive HTML layout as described below: HTML: <div id="header"></div> <div id="content"></div> <div id="footer"></div> CSS: #header{ wi ...

optimal method for displaying HTML strings with components in Vue

My website is a Blog/News site featuring posts that contain HTML content stored in the database. In addition to posts, I also want to include elements like sliders which cannot be generated using v-html. I explored Vue's Render Functions to find a so ...

What is the best way to create a gallery using Bootstrap 4?

I'm currently working on a project for my homework that involves replicating a car brand page, but I've hit a roadblock at this particular section. https://i.stack.imgur.com/0Zfr5.jpg My goal is to recreate the gallery using a .container with n ...

Display a JSON file within an Angular application using HTML

I have a JSON (link to the JSON) that I want to display in an html file. JSON: { "recipes": { "FRYING": { "Anchovies": [ [ {"500": "thawing"} ], [ {"60": "nothing"} ] ], "Codfis ...

Deactivate the Autofill feature on Google Toolbar

Dealing with the Google Toolbar's autofill feature has been a constant frustration in my web development journey over the years. I have resorted to creating a timer control to monitor changes, as the developers overlooked firing change events on contr ...

Choosing an HTML element based on its specific class is a breeze with these simple steps

Looking to add some CSS styles to a tag that has a particular class? One example is selecting the article tag with the news class. <article class="news"> <div>some content</div> </article> ...

Encountering a DJANGO KeyError while utilizing request.session in conjunction with form.cleaned_data

I'm currently working on a project that involves two view functions. The first function is responsible for taking form data and storing it in the request session, while the second function retrieves this data to filter a search query. Additionally, I ...