Tips for eliminating the horizontal scroll bar on a responsive background image

I'm having an issue with a full-width div containing a background image on my responsive website. Everything looks fine on desktop, but when I switch to responsive mode using Chrome Dev Tools, a horizontal scroll bar appears that I can't remove with overflow-x: hidden, max-width: 100%, or min-width: 100%. I've already tried a solution from Stack Overflow without success. (Bootstrap 4 is being used)

Here's the code snippet:

/* CSS for Desktop */

.country-background-img {
  background: url('https://placeimg.com/1000/695/animals');
  background-repeat: no-repeat;
  background-size: cover;
  height: 695px;
  padding: 60px 30px 0 30px;
  margin-top: 50px;
}


/* Responsive CSS */

.country-background-img {
  height: auto;
  text-align: center;
  background-attachment: fixed;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="row">
  <div class="col-12 country-background-img img-fluid" id="countryBackgroundImg">
    <div class="col-lg-6 offset-lg-6 col-md-12 col-sm-12 col-12">
      <p class="about-country-title" id="aboutCountryTitle">About Brazil</p>
      <p class="about-country-text" id="aboutCountryText">Text 1</p>
      <p class="about-country-text">Text 2</p>
      <p class="about-country-text">Text 3</p>
    </div>
  </div>
</div>
htmlcssbootstrap-4

Answer №1

To eliminate the horizontal scrollbar and achieve the desired outcome, I have enclosed your divs within the container-fluid bootstrap class -

/* Styling for Desktop */

.country-background-img {
  background: url('https://placeimg.com/1000/695/animals');
  background-repeat: no-repeat;
  background-size: cover;
  height: 695px;
  padding: 60px 30px 0 30px;
  margin-top: 50px;
}


/* Responsive Styling */

.country-background-img {
  height: auto;
  text-align: center;
  background-attachment: fixed;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<div class='container-fluid'>
  <div class="row">
    <div class="col-12 country-background-img img-fluid" id="countryBackgroundImg">
      <div class="col-lg-6 offset-lg-6 col-md-12 col-sm-12 col-12">
        <p class="about-country-title" id="aboutCountryTitle">About Brazil</p>
        <p class="about-country-text" id="aboutCountryText">Text 1</p>
        <p class="about-country-text">Text 2</p>
        <p class="about-country-text">Text 3</p>
      </div>
    </div>
  </div>
</div>

Answer №2

To ensure the preservation of your HTML structure, consider adding overflow-x to the body of the document:

.country-background-img {
    background: url('https://placeimg.com/1000/695/animals');
    background-repeat: no-repeat;
    background-size: cover;
    height: 695px;
    padding: 60px 30px 0 30px;
    margin-top: 50px;
}


/* Responsive CSS */

.country-background-img {
    height: auto;
    text-align: center;
    background-attachment: fixed;
}

body {
    overflow-x: hidden;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


<div class="row">
    <div class="col-12 country-background-img img-fluid" id="countryBackgroundImg">
        <div class="col-lg-6 offset-lg-6 col-md-12 col-sm-12 col-12">
            <p class="about-country-title" id="aboutCountryTitle">About Brazil</p>
            <p class="about-country-text" id="aboutCountryText">Text 1</p>
            <p class="about-country-text">Text 2</p>
            <p class="about-country-text">Text 3</p>
        </div>
    </div>
</div>

Answer №3

include the following body { overflow-x:hidden; }

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

There is a gap found in the span element in Angular, but this gap is not seen in

Comparing two component templates, one in AngularJS and the other in modern Angular: <span ng-repeat="status in statusInformation.statusList | filter : whereFilter" class="show-on-hover"> <span class="app-icon ap ...

javascripthtmlangularangularjs

Switching out images in a responsive column grid on hover using JQuery

I'm currently troubleshooting my code and would appreciate any help with debugging. The main goal is to swap out the image within the ".col" element on mouseenter and revert back to the original image on mouseleave. Additionally, I'd like to prel ...

jqueryhtmlimagehoverimage-gallery

Adjust the size of the textarea to accommodate the number of lines of text

<script type="text/javascript"> function AutoGrowTextArea(textField) { if (textField.clientHeight < textField.scrollHeight) { textField.style.height = textField.scrollHeight + "px"; if (textField.clientHeight ...

javascripthtml

Enhancing the appearance of multiple images with CSS and Bootstrap styling

I am struggling to arrange multiple images in my booking system as they are all displaying in a single column rather than the desired layout https://i.sstatic.net/1E8jO.png What I had hoped for was a layout like this https://i.sstatic.net/v8K34.jpg Curre ...

csslaravel-8

Ways to adjust a specific div within an ng repeat using the value from JSON in AngularJS

When I select a different option from the dropdown menu, such as cities or states, the values are populated from a JSON file. My specific requirement is to hide a button only when the value 'No data' is populated upon changing the dropdown select ...

javascripthtmlangularjs

Setting up an i18n project in AngularJS

I just embarked on my angularjs journey yesterday with little to no prior knowledge about it. My initial goal is to centralize all the labels for my UI in a file (to facilitate swapping them out for i18n). As far as I know, this can be achieved by importi ...

javascripthtmlangularjs

Having difficulty passing a variable between two different PHP files

When attempting to modify data in the database for a specific user column, I encountered an issue. The code that I created only alters the data for the last user in the database, rather than the current user. For instance: Let's say I am logged in as ...

phphtmlmysqldatabase

Having difficulty accessing the verification button within an iframe using Selenium

I'm currently developing a program that allows users to login using Selenium and bypass verification. I have everything else in the program ready, but I've been facing an issue trying to click the verify button. I've tried different approach ...

pythonhtmlselenium-webdriveriframeautomation

Trigger a Bootstrap modal in React after making an HTTP request with Axios

After successfully making an HTTP call in react using Axios, I encountered an issue when trying to open a Bootstrap 4 modal. The error message 'modal is not a function' appeared despite multiple attempts to troubleshoot and resolve the issue. Due ...

reactjsreact-nativebootstrap-4axios

changing html numbered list to xml format

Looking to convert HTML ordered lists with different types into XML markup? <ol type=a> <li>This is list item a</li> <li>this is list item b</li> </ol> <ol type=i> <li>This is list item 1</ ...

htmlxmlxslt

Displaying recursively retrieved data from an AJAX call on an HTML page using AngularJS

I am currently working on a recursive AJAX call where I receive server data in chunks. My goal is to display each chunk of data one below another on the front end. How can I achieve this without replacing previously received data with new data? I hope this ...

htmlangularjsasynchronous

Displaying modal popups limited to one per session

Is there a way to display this Dialog Popup only once per session? I have looked into using cookies for configuration, but haven't been able to implement it in this scenario: $(document).ready(function() { ShowDialog(true); e. ...

jqueryhtmlcsspopupmodal-dialog

Having difficulties adjusting the margin for a JSX element directly within the code

I'm struggling with giving a margin style inline to a JSX element. Here's the code snippet that I'm having trouble with: <Nunito20 style={{color: frenchGray, margin: 20 0 3 0;}}>Full Name</Nunito20> Unfortunately, this is throw ...

cssreactjs

`Jump-start Your Development with jQuery Lightbox Centering`

Recently, I implemented a lightbox effect for images on my website. However, I encountered an issue where the lightbox was not centering properly in the window upon initial click. Instead, the lightbox would appear at the bottom of the page on the first cl ...

javascriptjqueryhtmlcssjquery-ui

Clicking on a hyperlink within an Angular Material button does not prompt the browser to navigate to the linked page

Currently, I am utilizing Angular Material with AngularJS v1. Encountering issues with a simplistic menu bar while utilizing angular material. Below is the piece of HTML code representing the menu bar: <md-toolbar layout="row" class="md-whiteframe-z3" ...

htmlangularjsbuttonangular-material

Personalized modify and remove elements on a row of the DataGrid material-ui version 5 component when hovered over

In my React Js app, I am utilizing Material UI components or MUI v5 as the UI library for my project. Within the DataGrid/DataGridPro component, I am implementing a custom edit and delete row feature. The requirement is to display edit and delete icons w ...

javascriptcssreactjsmaterial-ui

Issues with cascading style sheet navigation designs

Working on this project is new to me and I am encountering a challenge with two issues. My goal is to create a menu display similar to the image shown here: https://i.sstatic.net/FsHq5.png The problem lies in my inability to underline the selected optio ...

cssvue.js

Developing a security system that limits the number of times a code or password can be utilized

Introduction: I have a unique idea for a system where customers can purchase codes from my online store and redeem them on my PHP website. Each code purchased will have a limited number of uses, which decrease with each redemption until the code is no long ...

phphtmlmysqlweb

Manipulating DropDownList Attributes in ASP.NET using JavaScript

I am facing an issue with populating a Dropdownlist control on my ASCX page. <asp:DropDownList ID="demoddl" runat="server" onchange="apply(this.options[this.selectedIndex].value,event)" onclick="borderColorChange(this.id, 'Click')" onblur="bo ...

javascripthtmlasp.netajax

Differentiating font sizes for headings (h1-h6) based on Bootstrap breakpoints

Is there a way to utilize bootstrap's font size breakpoints (sm, md, lg, xl, etc.) for the various font sizes provided by bootstrap: <p class="fs-1">.fs-1 text</p> <p class="fs-2">.fs-2 text</p> <p class= ...

htmlcssbootstrap-5