Excessive Blank Space Issue on Mobile Devices with MDBootstrap

I have been working on creating a replica of Watch2Gether, and it looks great on medium and large screens. However, when viewed on a phone, everything seems perfect until you scroll to the left and notice a large white space on the right side. I've experimented with changing margins and paddings on some elements to improve the user interface, but there remains a significant white space when scrolling that diminishes the overall look. Any suggestions on how to address this issue?

https://i.sstatic.net/sXfFz.png

HTML:

   <!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.4/qs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<script src="client.js"></script>
<script src="users.js"></script>



<%- include('partials/footer') %>

CSS:

    ...

Answer №1

I encountered a similar issue and found that adding this meta tag was helpful:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />

Alternatively,

Although the row class is causing the problem, it should always be placed within a container element.

According to http://getbootstrap.com/css/:

Rows need to be contained within either a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

The container typically has a -15px padding on both sides while the row class has 15px padding on each side, balancing each other out. If one of them is missing, extra space may appear.

Source: Twitter bootstrap white gap on right side of page

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

What do the different colored highlights in Sublime Text 2 indicate?

I am facing an issue with the code in a particular file: background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); Interestingly, Sublime Text 2 appears to highlight the background of indigo and violet with a light blue color: ...

The image will remain hidden until it is fully loaded and ready to be displayed

I am currently working on a script that involves displaying a loading icon until an image is fully loaded, at which point the loading icon should disappear and the image should be shown. Unfortunately, my current code is not working as intended. Here is a ...

What is the best way to make a block fill 100% of a container-fluid?

Here is a block: <div class="container-fluid"> <div class="content_wrapper"> </div> </div> What's the best way to display the .content_wrapper block with 100% content width and margins from the body borders? ...

Is it possible to incorporate a foreach loop while also implementing unique adjustments at specific locations within the code?

I have been searching for a solution to this problem on various forums, but I couldn't find one that fits my needs. My challenge is to create a foreach loop for 12 elements, with 3 of them having a different class applied to them. This is the code I ...

Basic HTML and JavaScript shell game concept

After spending several days working on this project, I am struggling to understand why the winning or losing message is not being displayed. The project involves a simple shell game created using HTML, JavaScript, and CSS. I have tried reworking the JavaSc ...

Divide the canvas into 100 separate sections using Javascript

Help! I'm trying to divide a canvas into 100 squares that are 50x50px each, but my current code is becoming too lengthy with multiple for loops. Is there a more efficient way to achieve this with just one for loop? https://i.sstatic.net/0UD0s.png Bel ...

Finding the correct closing tag in HTML can be accomplished using an algorithm

Currently working on my custom HTML parser in JAVA and have completed the lexer. Now diving into coding the parser to create a DOM tree and ensure the proper construction of my HTML. For example, understanding that an img tag is considered a void tag as p ...

Sending data between two HTML templates in Django

Currently working on a web project with Django, still learning the ropes of Django. I'm facing an issue that has me stumped: I need to retrieve user input from one HTML search box and show it on another HTML page. This is the code for my initial ...

Using Next.js in conjunction with Tailwind CSS and the shadcn/ui library to tackle the issue of preventing overscroll from creating

As I delve into a Next.js project, my goal is to use Tailwind CSS to craft an interface featuring a sidebar on the left, a header at the top, and a main content area. However, an issue has surfaced where users can over-scroll, leading to a blank space appe ...

How to create a scrollable table using HTML and CSS

I created a Dashboard, but I'm having trouble making my mailPage scrollable. If you have some time to spare, could you please take a look at my website and help me with this issue? Here is my code: window.addEventListener("load", function () { ...

The submit button is not reading the JavaScript file for validation and instead goes directly to my PHP file

**Hello, I'm new to Stack Overflow. My submit button is not reading the JavaScript file I created; instead, it goes straight to the PHP file without validating the input fields first in the JavaScript file. I've been stuck here for hours and can& ...

how to toggle visibility of bootstrap accordion panel using jQuery

I have a bootstrap accordion that I want to customize. Specifically, I only want to enable a panel under specific conditions. The idea is for the second panel to be collapsible only when the first panel is valid. <div class="panel-group" id="accordion" ...

Retrieve the JSON response from the server and store it in variables using jQuery's AJAX function with the `done

I am trying to retrieve a JSON response from the server upon clicking a button and then parse it into a div. However, I am struggling with how to accomplish this. <button type="submit" id="btPay" name="btPay"> Go for Pay ...

Highlight particular terms (key phrases) within text contained in a <td> tag

I am currently working on a project and facing a challenge that I am unfamiliar with. My task is to highlight specific keywords within text located inside a <td> element. I cannot manually highlight the keywords as the texts are dynamic, originating ...

Dynamic background image changes when checkbox is selected

Greetings! I am a newcomer to the stackoverflow community and I am facing an issue with dynamically changing the background image of my webpage when a checkbox is checked. Here is the HTML code snippet: <ul> <li><label for="Lines">A ...

How can you create an accordion menu that expands when a button is clicked?

Is there a way to make an accordion menu open when the 'More' button is clicked? I've tried, but it always starts in its expanded state and collapses when the button is clicked. What I really want is for the accordion to be closed initially ...

Differences in functionality across various browsers when dealing with complex subgrid structures

After nesting a subgrid inside a padded subgrid within a grid, I noticed varying behavior across different web browsers. Chrome/Edge (Windows) Firefox (Windows) Safari MacOS https://i.stack.imgur.com/uHlto.png https://i.stack.imgur.com/SGxuC.png ht ...

Strategies for avoiding text wrapping in Bootstrap labels on Firefox

Within my panel and panel-body, there are multiple span elements that display dynamically. These spans behave perfectly in Safari and Chrome, wrapping to the next line when needed. However, in Firefox, they overflow strangely. Here are the comparisons: Ch ...

Utilizing Compass SCSS with Blueprint for Optimal Overflow Settings

I've been working with blueprint through Compass, but I'm facing an issue where longer pages don't have scroll bars. It seems like the default setting for overflow is 'hidden'. Since this appears to be the standard, I assume there ...

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</ ...