Having issues with Bootstrap 4 on mobile - site stretches too wide and causes side-scrolling. Is it a possible syntax error?

Currently, I am working on a website that utilizes multiple backgrounds layered on top of each other using Sass and Bootstrap. However, I am encountering a problem in the mobile view where users can scroll horizontally, which is not desired. Additionally, the navbar layout is all messed up - the toggle button seems to be too high.

I have shared a JSFiddle link for reference: https://jsfiddle.net/4z5ty868/

I suspect the issue might be related to the navbar or possibly an incorrect number of <div> elements. To be honest, I am quite confused at this point and would appreciate any help or guidance from someone knowledgeable in this area.

Answer №1

The issue lies within the styling of your `btn` class. By including `white-space: nowrap;`, the buttons are not adjusting to the screen edges as intended. To fix this problem, simply remove that line or replace it with `white-space: normal;`. This adjustment will resolve the horizontal scrolling issue you are experiencing.

Before: https://i.sstatic.net/rDPe9.png

After: https://i.sstatic.net/FgVgQ.png

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

Handling Pop-up Windows in Python with Selenium

# Automation Setup from selenium import webdriver from selenium.webdriver.common.keys import Keys from selenium.common.exceptions import NoSuchAttributeException, NoAlertPresentException from selenium.webdriver.support.ui import WebDriverWait from seleniu ...

"Utilize Vue's model binding feature to assign a numerical value

I've encountered an issue while using v-model on an input box. I'm trying to bind the value as a number, but it doesn't seem to be working as expected. When I perform an operation like myModel += 25, instead of getting 125, I end up with 100 ...

Unable to perform dynamic query with $in operator in Mongoose find method

I am currently utilizing Node.js along with Mongoose version 5+ to create a dynamic query in my database. The variable filterField represents the field name, while filterValues is an array. Here is an example of how my code looks: if (req.currentUser.acti ...

How is it possible for me to retrieve data values directly from a sequelize model?

My question is straightforward - when doing a single select in sequelize, a model is returned. Inspecting this model reveals various options such as dataValues, _prevValues, _change, _options, isNewRecord, and more. What puzzles me is that you can also a ...

Tips for dimming a bootstrap modal while displaying a spinner

In the following example, you can open a modal, enter a message, and send it. The message will take 2 seconds to send. I have implemented a spinner to show while the message is sending, but I also want the background of the modal to be greyed-out during th ...

Having trouble with NPM install because of a node-gyp issue?

We're facing issues with running "npm install" on our project. The error message states that a specific file cannot be located: fatal error C1083: Cannot open include file: 'windows.h' This error seems to be originating from the node-gyp mo ...

Is there a way to switch an element across various pages within Ionic 3?

Is it possible to exchange information between two pages using logic? I have successfully implemented a checklist, but I am unsure how to add a success/error icon next to the Room name on the 'verifyplace.html' page after invoking the goToNextPa ...

Use TypeScript to cast the retrieved object from the local storage

const [savedHistory, setSavedHistory] = useState(localStorage.getItem('history') || {}); I'm facing an issue in TypeScript where it doesn't recognize the type of 'history' once I fetch it from localStorage. How can I reassign ...

Is there a way to disregard inherited styles without relying on the use of "!important"?

Is there a way to create a new class in CSS that ignores all inherited styles without needing to use !important for each one individually? This is my HTML code: <div class="text"> <h2>Title</h2> <span>Date</span> &l ...

Searching through a MySQL array with a deductive filter using either PHP or JavaScript

Looking for a way to filter an array using a four step process based on three conditions. Here is an example of the array pulled from the database: Array ( [0] => Array ( [playlist_id] => 199 [playlist_name] => Christmas [playlist_status] => ...

Storing Unique Characters in the Database

Currently, I am utilizing a combination of HTML and PHP for my website, but I have encountered an issue when saving content in a textarea. Whenever I incorporate a different font with special characters like ' and ", it saves as � (a black dia ...

`On mobile devices, the Bootstrap button no longer displays focus changes once clicked.`

When clicking a primary bootstrap button, it changes its background color to blue on mobile devices. https://i.sstatic.net/VNPDP.jpg For example, the first button appears normal and the second one turns blue after clicking. However, this background effec ...

What is the best way to ensure that the swf loads only after all the images and text have loaded completely

Is there a way to use jQuery to control the loading of SWF files on my CMS system? Sometimes when a video is included in the SWF file, it uses up bandwidth and makes the page non-responsive for a while. I would like the SWF files to load after the other co ...

Obtain the location information upon the loading of the webpage

I am currently in the process of developing a website using HTML, CSS, and JavaScript. My goal is to automatically retrieve the user's location when the page loads, without requiring them to click a button. I would greatly appreciate any assistance wi ...

Monitor changes in the select tag to display the updated value and output

I am new to using jQuery. While I have practiced using native PHP Ajax in the past, I now recognize the need to learn jQuery due to current technological advancements and demands. When the select tag changes, I send the "types" value via POST method to a ...

Enhancing the appearance of the MUI DatePicker

I'm currently using a DatePicker component from Mui Lab and I'm attempting to customize the appearance of the Calendar component by incorporating some border or background color. Although I've tried utilizing the PaperProps prop for DatePick ...

deleting an element from an array within ReactJS

I am struggling with React and I can't seem to find a solution to remove an item from an array without affecting the rest of the items. I have attempted different approaches but none of them seem to work as expected. Here is the code I have: App.js: ...

Check to see if the menu item exceeds the allotted space, and if so, display the mobile menu

Currently, I am in the process of creating a unique responsive menu for my website that I think will need some JavaScript implementation. My skills with JavaScript are not very strong, so I am looking for guidance, code examples, or resources that can assi ...

What is the best way to add border-radius to an image while incorporating padding?

I am facing an issue with images that have white padding at the top and bottom. Please refer to the attached image. Whenever I try to apply the border-radius property to these images, the edges appear distorted. Is there a way to resolve this problem wit ...

Triggering an input event in Internet Explorer 10 by changing a placeholder

Unusual Issue input event --calls--> update() --calls--> geoInput.receive() --triggers--> input event Explanation Encountered an interesting problem where my code seems to be stuck in an infinite loop. Here's the jQuery snippet causing the ...