What is the best way to eliminate excess space on the right side in Bootstrap 4 while in mobile view?

I'm struggling to understand why this layout is not responsive on mobile devices, triggering a bottom scroll bar at around 616px. I'm looking for a solution to hide the scroll bar at least until 414px for iPhones and other smartphones. I've tried reducing the amount of code, but can provide more context if needed.

// Custom JavaScript Code

$('#carouselExample').on('slide.bs.carousel', modCarousel);
$('#test').on('slide.bs.carousel', modCarousel);

function modCarousel (e) {

    var $e = $(e.relatedTarget),
        idx = $e.index(),
        itemsPerSlide = 3,
        $c = $e.closest('.carousel-inner'),
        totalItems = $('.carousel-item', $c).length;
    
    if (idx >= totalItems-(itemsPerSlide-1)) {
        var it = itemsPerSlide - (totalItems - idx);
        for (var i=0; i<it; i++) {
            // append slides to end
            if (e.direction=="left") {
                $('.carousel-item', $c).eq(i).appendTo($c);
            }
            else {
                $('.carousel-item', $c).eq(0).appendTo($c);
            }
        }
    }
};
@charset "utf-8";

#top-nav-row {
background-color: #173A4F;
}
#bottom-nav-row {
background-color: #242122;
}
body {
background-color: #242122;
font-family: 'Roboto', sans-serif;
color: #EEEEEE;
}

#video-bg {
  position: relative;
  width: auto;
  min-width: 100%;
  height: auto;
  background: transparent url(video-bg.jpg) no-repeat;
  background-size: cover;
}
video {
  display: block;
}
.video-container {
  width: 100%;
  max-height: 500px;
  overflow: hidden;
  position: static;
  top: 0;
  right: 0;
  z-index: -100;
  padding-top: 50px;
}
.overlay-desc {
  background: rgba(0,0,0,0);
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-logo {
max-height: 27%;
width: 33%;

}
.main-top-nav {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
background-color: #173A4F;
}
.recent-pro-clip{
padding-top: 50px;
padding-left: 45px;
}
.recent-news{
padding-top: 50px;
}
.no-pad {
padding-left: 0px;
padding-right: 0px;
}
.navbar-toggler {
  border: none;
  outline: none;
}
.navbar-toggler-icon {
  border: none;
  outline: none;
}
.navbar-brand {
  padding-bottom: 13px;
}
.recent-news-desc {
font-size: 0.8rem;
text-align: center;
font-weight: lighter;
padding-bottom: 0px;
background-color: #333333;
padding-left: 0px;
margin-left: 14px;
margin-right: 14px;
margin-bottom: 20px;
}



@media (min-width: 768px) {

    /* show 3 items */
    .carousel-inner .active,
    .carousel-inner .active + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
    
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }
    
    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    
    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Font CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- MY CSS FILE-->
<link href="../css/main.css" rel="stylesheet">
<style type="text/css"></style>
</head>
<body>

<!-------------------------- START OF TOP RECENT EPISODES CAROUSELS CONTENT ----------------------------------->
<div class="container no-pad">
  <div class="row">
    <div class="col-md-9 no-pad">
      <div class="row">
        <div class="col-md-12 recent-pro-clip">
          <h3>Recent Projects</h3>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div id="carouselExample" class="carousel slide no-pad" data-ride="carousel" data-interval="9000">
            <div class="carousel-inner row w-100 mx-auto" role="listbox">
              <div class="carousel-item col-md-4 active">  <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=1" alt="slide 2"> </div>
              <div class="carousel-item col-md-4">  <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2"> </div>
              <div class="carousel-item col-md-4">  <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 2"> </div>
              <div class="carousel-item col-md-4">  <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 2"> </div>
              <div class="carousel-item col-md-4">  <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 2"> </div>
              </div>
            <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev"> <i class="fa fa-chevron-left fa-lg"></i> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next"> <i class="fa fa-chevron-right fa-lg"></i> <span class="sr-only">Next</span> </a> </div>
          
          <!--------------------- START OF TOP RECENT CLIPS CAROUSELS CONTENT --------------------> 
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 recent-pro-clip">
          <h3>Recent Clips</h3>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div id="test" class="carousel slide no-pad" data-ride="carousel" data-interval="9000">
            <div class="carousel-inner row w-100 mx-auto" role="listbox">
              <div class="carousel-item col-md-4 active">  <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=1" alt="slide 2"> </div>
              <div class="carousel-item col-md-4">  <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2"> </div>
              <div class="carousel-item col-md-4">  <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 2"> </div>
              <div class="carousel-item col-md-4">  <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 2"> </div>
              <div class="carousel-item col-md-4">  <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 2"> </div>
              </div>
            <a class="carousel-control-prev" href="#test" role="button" data-slide="prev"> <i class="fa fa-chevron-left fa-lg"></i> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next text-faded" href="#test" role="button" data-slide="next"> <i class="fa fa-chevron-right fa-lg"></i> <span class="sr-only">Next</span> </a> </div>
        </div>
        <!-- clips carsoel div --> 
      </div>
    </div>
    <!-- recent projects and clips carousel overall col -->
    <div class="col-md-3">
      <div class="row">
        <div class="col-md-12 recent-news">
          <h3>News</h3>
        </div>
      </div>
      <div class="row">
        <div class="col"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 2"> </div>
      </div>
      <div class="row">
        <div class="col"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 2"> <br/>
        </div>
      </div>
    </div>
    <!--overall news carousel col--> 
  </div>
  <!-- overall carousel row --> 
</div>
<!-- Container Div from Top --> 

<!-------------------------- FOOTER ----------------------------------->
<div id="footer-fluid" class="container-fluid">
  <div class="container">
    <div class="row">
      <div class="col"> test </div>
    </div>
  </div>
</div>
<!-- container fluid --> 

<!-------------------------- SCRIPTS -----------------------------------> 
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
<script src="../../js/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> 
<script src="../js/my_js_main.js" crossorigin="anonymous"></script>
</body>
</html>

javascripthtmlcssbootstrap-4

Answer №1

The issue is linked to the following guideline: 

.no-pad {
    padding-right: 0px;
}

To resolve this problem, eliminate the no-pad class and implement responsive Bootstrap spacing classes (e.g. px-md-0) for proper spacing.

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

Developing a bespoke React component library - encountering an issue with 'react module not found' during Jest testing, as well as using testing-library

I am in the process of creating a bespoke react component library to be shared across various applications. To build this library, I am utilizing rollup and referencing resources such as this blog post along with others: https://dev.to/alexeagleson/how-to- ...

javascriptreactjsjestjsreact-testing-libraryrollup

If the first dropdown menu has a sub-element, then the user should be able to select the same value in the second dropdown menu using jQuery

To trigger an alert, two HTML select option dropdowns must both have the value DIP EDU. My current code successfully accomplishes this, but there is a scenario where some options in the first dropdown may contain sub-elements. For example, selecting MBA wi ...

javascriptjqueryhtml

Tips for adjusting the time interval on an automatic slideshow when manual controls are in play

I'm having trouble with my slideshow. I want it to run automatically and also have manual controls, but there are some issues. When I try to manually control the slides, it takes me to the wrong slide and messes up the timing for the next few slides. ...

javascripthtmlcssslideshow

Increase the size of the Iframe tag to a larger scale

Can someone help me figure out how to make my iframe content fill the entire screen? Any assistance would be greatly appreciated. Photos: Current Output: Desired Output <!DOCTYPE html> <html lang="en"> ...

htmlcssiframe

Obtaining a fresh access token from a refresh token using the googleapis npm library

I've been searching everywhere for an explanation, but I can't seem to find one. The documentation I've read says that refresh tokens are used to obtain new access tokens, but it doesn't explain the mechanics behind it. Normally, I wou ...

javascriptnode.jsgoogle-api

Automatic width table design

I am trying to position the "User ID" label closer to its value by aligning it to the right side, as shown in the picture below. I have attempted using additional colspan's but haven't been successful. The User ID can contain anywhere from 1 to 9 ...

htmlcsshtml-table

Nested Angular click events triggering within each other

In my page layout, I have set up the following configuration. https://i.stack.imgur.com/t7Mx4.png When I select the main box of a division, it becomes highlighted, and the related department and teams are updated in the tabs on the right. However, I also ...

javascripthtmlangular

Error: An unidentified SyntaxError occurred with an unexpected token < within an anonymous function displayed on the console

In the process of developing an upload file application. The implementation involves AJAX and PHP. Everything functions smoothly on the localhost, but upon transferring it to the web server, a specific error is encountered: Uncaught SyntaxError: Unexpe ...

javascriptphpjqueryajax

Having issues with Tailwind classes not being applied properly on dynamically generated pages in Gatsby-node

Currently, I am working on building dynamic pages using gatsby-node. The templates for these pages are stored in the templates/ directory. However, I have run into an issue where I cannot utilize tailwind classes within these templates unless they are al ...

cssreactjstailwind-cssgatsbypostcss

Passing a table value to a PHP script using JQuery on click event

I am struggling with implementing functionality to filter a dataset based on the link that the user clicks on within a bootstrap modal. The modal contains a morris.js graph and I need to pass the clicked value (e.g. Cluster1 or Cluster2) to a data pull scr ...

javascriptphpjqueryajaxmorris.js

Background Patterns on Webpages

My website has a lovely gradient background on the html tag in css, while the body tag showcases a seamless pattern repeating on both the x and y axes. Everything was looking great until I checked the website on an iPad/iPhone in portrait mode, where the ...

javascriptjqueryhtmlcssweb

Navigating through a list of items using keyboard shortcuts in HTML

Similar Question: KeyBoard Navigation for menu using jquery I have developed a menu using unordered list items and display it when the user presses the Enter key in the textbox. While the user can navigate through the menu using the mouse to select it ...

jqueryhtmlcssnavigationcontextmenu

What is the best way to clear an arrayList when an error occurs in the ajax response?

Within my code, I have initialized an empty arrayList as var selection11Data = [];. Data is retrieved from an AJAX call as shown below: var selectionId=trData.selectionId; console.log("here"); $.ajax({ url : A_PAGE_ ...

javascriptjqueryhtmlajaxdatatable

Building unique CSS classes with Material UI v5 theme - A step-by-step guide

Incorporating Material UI v5 into my application has been a smooth process, except when it comes to using react-d3-tree for rendering SVG tree charts. This library allows for custom CSS class names to be added to the <path> elements that connect the ...

cssreactjsmaterial-ui

Updating the parent's data by modifying data in the child component in VueJS

When I use multiple components together for reusability, the main component performs an AJAX call to retrieve data. This data is then passed down through different components in a chain of events. <input-clone endpoint="/api/website/{{ $website->id ...

javascriptvue.js

An error occured when attempting to read the 'status' property of an undefined value in node.js, express.js, and mysql

I recently started working with node.js and encountered a challenge in fetching data from mysql and sending it to an API response. Below is my setup: db.js: var mysql = require('mysql2'); var util = require('util') const pool = mysql ...

javascriptmysqlnode.jsexpress

The async function in Jasmine is causing issues with expectedAsync functionality

Currently conducting the following examination: it("should receive rejection", async done => { class someTest { async run(){ return this.rejectFunc(); } async rejectFunc(){ return new Promise( ...

javascriptunit-testingjasmine

Exploring the powerful capabilities of utilizing state variables within styled components

I'm attempting to create a button that changes its state based on the value of a property within an object. Below is the styled component const Btn = styled.button` border-radius: ${props => props.theme.radius}; padding:5px 10px; backgroun ...

javascriptreactjsstyled-components

Canvas.js graph failing to refresh with updated data

I have encountered an issue while using CanvasJS to generate a line graph with data from Myo. The problem is that when new data is received, the graph fails to update. This may be due to the fact that I did not initially populate the graph with any data po ...

javascripthtmlgraphcanvasjsmyo

Importing models in SceneJS does not function properly with Internet Explorer

I've been exploring different webGL frameworks lately. While I like SceneJS, I've noticed some compatibility issues with Internet Explorer. For instance, in IE 11, importing OBJ files seems to cause the online examples to freeze up: Check out th ...

javascriptimportscenejs