Adding an overlay on a background image causes horizontal scrollbars to appear

Currently, I am following a tutorial and working on creating the "Getting started" section as shown in the image below:

https://i.sstatic.net/KsOP6.jpg

I have noticed that once I add the CSS for the dark-overlay class, it triggers these unwanted horizontal scrollbars. By commenting out the dark-overlay css, I was able to make the scrollbars disappear.

Below is my code snippet:

<section id="home-heading" class="p-5">
    <div class="dark-overlay">
      <div class="row">
        <div class="col">
          <div class="container pt-5">
            <h1>Are You Ready To Get Started?</h1>
            <p class="d-none d-md-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est eaque magni sit dolores. Nisi, dolor nam modi perspiciatis
              consequatur soluta.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

and this is the included CSS section:

#home-heading {
  position: relative;
  height: 200px;
  background-image: url(../img/lights.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  text-align: center;
  color: #fff;
}

.dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

I am puzzled why the overlay css might be causing this issue, given that the parent element #home-heading is relatively positioned. Shouldn't the dark-overlay class adhere to its parent's position?

If anyone can shed some light on what could be happening here, I would greatly appreciate it.

Thank you, Sohaib

Answer №1

Consider eliminating the row and col divs. Using .row and .col can result in unnecessary padding.

Answer №2

After conducting some research, I have come to the conclusion that in certain scenarios, the Bootstrap .col and .row classes may add unnecessary padding.

In situations similar to the ones discussed here, a quick solution would be to eliminate the row and col classes from the HTML markup. Alternatively, you can consider the following methods:

1)

#home-heading .row, #home-heading .col{
margin:0;
padding:0;
}

This code explicitly removes the margins and paddings from these specific classes.

  1. Add the no-gutters class to the row, like so:
<section id="home-heading" class="p-5">
    <div class="dark-overlay">
      <div class="row no-gutters">
        <div class="col">
          <div class="container pt-5">
            <h1>Are You Ready To Get Started?</h1>
            <p class="d-none d-md-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est eaque magni sit dolores. Nisi, dolor nam modi perspiciatis
              consequatur soluta.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

By adding the "no-gutters" class to the row, you can remove the default spacing provided by the Bootstrap grid system. Sohaib

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

Utilizing jQuery for Dynamically Loading Child Elements

As users select choices from a side menu, a set of items is dynamically added. The more choices they make, the more items are displayed. Some items have a 'stats' div while others do not. I want to check if an item has a 'stats' div, a ...

From which location do browsers retrieve fonts?

Is the web browser able to access web fonts from sources other than the @font-face rule on the website itself? For example, can it retrieve fonts from the operating system's font collection? ...

Combine jQuery and CSS to create a scrollable and extended fixed header

I am experiencing an issue where the header is fixed when scrolled down, but when I scroll back up to the top, it detaches and becomes unfixed again. How can I make the header stay fixed for a prolonged period of time? Are there any specific adjustments I ...

Bootstrap fails to make Google Maps responsive

I am currently working with bootstrap and have incorporated Google Maps API 3 into my project. The issue I am facing is that the #map_canvas element does not adjust responsively; it has a fixed width. Additionally, when I try to use height: auto and widt ...

What are some ways to conceal database connection details for a basic HTML/CSS/JavaScript website hosted on GitHub Pages?

For my current school project, I am utilizing vanilla HTML, CSS, and JS. Once completed, the expectation is for the repository to work through GitHub Pages. Although it's beyond the assignment requirements, I am interested in integrating a Firebase Fi ...

Achieving the minimum width of a table column in Material-UI

Currently I am in the process of developing a React website with Material-UI. One query that has come up is whether it's feasible to adjust the column width of a table to perfectly fit the data, along with some extra padding on both ends? Outlined be ...

Issues with NgFor directive not functioning properly within a Bootstrap class in Angular 6

In my Angular project, I have successfully implemented a REST service. The film data is displayed as a JSON object below the image. However, I am facing an issue with printing the results inside the boxes using ngIf. Strangely, it works fine with ngFor exc ...

What is causing the border-bottom in these inline divs to not display when using a fractional height? (Specifically in Chrome)

Here is a jsfiddle I'd like to share with you: https://jsfiddle.net/ionescho/4d07k799/4/ The HTML code: <div class='container'> <div class="row"></div><div class="row"></div><div class="row"></div> ...

switch control navbar feature in Django

I am currently working on a project and I am attempting to manage the color change of the navbar logo. After visiting the "about" page on my application, I want the navbar to change color, with half of it turning yellow to better complement the purple back ...

"Troubleshooting TikTok Video Embedding in React App: Why is the Video not Display

Currently, I am in the process of embedding a TikTok video into a React application. My goal is to display the HTML code obtained from TikTok's API using an iframe as outlined here. The provided HTML code: <blockquote class=\"tiktok-embe ...

Height constraint disregarded by anchor

I am facing an issue with a large textual menu where the active link space is overlapping onto the other menu items. This is causing difficulty in accurately clicking on a link. For reference, you can check out this example: http://jsfiddle.net/dhyz48j3/1 ...

What is the best way to create a button with this functionality?

In the form that I have created, it is opened in a bootstrap modal style. This form contains a button that, when clicked, triggers an alert box to appear. The code snippet used for this functionality is as follows: echo "<script>"; echo "alert(&apos ...

Use HTML accept-charset to specify the character encoding for form fields

Curious if a form field could handle characters with accents like Ś or ý and display them as the raw letter (Ś or ý) instead of "random symbols" like percents upon submission. Is this achievable? ...

What is the best way to organize the size of multiple files into a single HTML card?

Is there a way to automatically arrange multiple items (photos/videos) within a single HTML card, similar to how it is done on Facebook or Instagram? I am looking for a library or JavaScript code that can help me achieve this without extending the size of ...

Conceal Primeng context menu based on a certain condition

I'm struggling to prevent the context menu from showing under certain conditions. Despite following the guidelines in this post, the context menu continues to appear. My goal is to implement a context menu on p-table where it should only show if there ...

Creating modern web applications using Angular and .Net Core with the power of Bootstrap 4

Has anyone experimented with developing an application using the following commands? dotnet new --install Microsoft.AspNetCore.SpaTemplates::* dotnet new angular You can find an example of this at this link. By default, the command creates an Angular + ...

Can you explain the distinction between angular input and native HTML attributes when used with HTML tags?

Take the input tag as an example, where you have two options to specify a maximum length: <input [maxLength]="20" type="text"> <input maxLength="20" type="text"> Are there any real-world distinctions between using one approach over the othe ...

Guide to dynamically loading separate components on a single page in Angular 9

Rendering all components or widgets on the page at once can slow down the application's loading time. I prefer to have app-sidebar1, app-body, and app-sidebar2 load onto the DOM sequentially based on priority, rather than waiting for all components t ...

"Troublesome issue with Bootstrap push and pull functionality not functioning correctly

I am currently experiencing issues with Bootstrap push and pull functionality. While the mobile view appears to be working correctly, the web view is shifted to the left. Any assistance on this matter would be greatly appreciated. Below is the code that i ...

Guide to adding Cookies in an HTML document

Can anyone assist me with inserting a cookie name and value for a specific site domain in a local HTML file? I would appreciate any methods or suggestions. ...