Optimizing Spacing in Bootstrap 4.2.1 for Mobile Devices

There seems to be some odd spacing issues in the mobile version. Here are some images for reference:

Here's how it appears on desktop:

Desktop #01

Desktop #02

And now, the mobile version:

Mobile #01 - showing extra spacing on the right side

Mobile #02 - possibly caused by the "h3" class called display-4?

The provided HTML code is as follows:

<!-- The beginning of html -->
<!DOCTYPE HTML>

<html lang="PL-pl">
<head>
  <title>The page is being rebuilt...</title>
  <meta charset="utf-8">
  <!-- versioning can often help (href="css/style.css?ver=2.0") -->
  <!-- BOOTSTRAP 4 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <link rel="stylesheet" href="https://reportsquestionsznaczki65.000webhostapp.com/css/restyled.css">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>

<body>
<main>
    <div class="jumbotron jumbotron-fluid text-white text-center bg-info nomarginbottom">
        <div class="container">
            <h3 class="display-2">This site is being finally rebuilt!</h3>
            <p class="lead">It will have more features soon.</p>
        </div>
    </div>

    <!-- Rest of the HTML code goes here -->

</main>

<noscript>
    <meta http-equiv="refresh" content="0; URL=https://reportsquestionsznaczki65.000webhostapp.com/noscript.html"/>
</noscript>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

</body>
</html>

The CSS (restyled.css) used for styling is as follows:

/* Relevant CSS styles go here */

You can visit the website here. To view the source code and stylesheet, you can use the following links:

View Source Code

CSS Stylesheet

Any assistance would be greatly appreciated. Thank you.

htmlcssbootstrap-4spacing

Answer №1

In the mobile layout, the font size of "wszyscy.html" appears larger than the screen size, causing it to exceed the boundaries. Adjusting the font size will eliminate this issue and ensure a proper fit within the screen.

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

Click to dynamically toggle classes with jQuery

I am trying to apply a class called 'select' when I click on a paragraph tag. However, the code I have written doesn't seem to be working. Can someone please provide some suggestions? Here is the code: <style type="text/css"> #el ...

javascriptjquerycss

What is the best way to navigate down a page using the <a> tag?

I'm working on creating a mini wiki page on my website that will have a table of contents at the top. Users can click on a link in the table of contents and it will automatically scroll down to the relevant section of the page. I know this involves us ...

htmlcss

`How can I use JavaScript filter to refine element searches?`

Struggling to get this filter function to work correctly. I configured it to filter and display only the desired items based on the card's classname (landing-pages-list). Unfortunately, the function is not functioning as expected. How can I make it w ...

javascripthtmlsearch-form

The inline $Emit function is not generating the correct random number when using Math.random()

I've been diving into the concept of $emit event in Vue and came across this tutorial: . I tried implementing something similar using Vue2.js, but every time I click the button, it gives me a rounded number instead of a random number like in the guide ...

javascripthtmlfunctionvue.jsemit

Is it possible to display a React Component code within a <code> tag?

I am in the process of creating a tester page that allows users to interact with a library component and document how it is being used. Here is the library component: render = () => { let component = ( <Slider onSlid ...

javascripthtmlcssreactjs

Removing tag styles in HTML can be accomplished by using the most appropriate CSS

Is there a way to strip the style="" attribute from the HTML content stored in the data variable? function printCalendar($scope) { $scope.print = function(){ var data = $('.fc-content').html(); var mywindow = window.open(&apo ...

javascriptjqueryhtml

Converting date formats in HTML with the help of JavaScript

I am completely new to JavaScript and would greatly appreciate any assistance. Within my HTML code, I have dates extracted from a form that need to be displayed. <body> Test Date<br> <span id="test">{{TestDate|"dd/MM/yy"}}</span> ...

javascripthtmldateformat

Interested in compressing CSS and JavaScript using PHP, but uncertain about the impact on performance and the best methods to implement it?

My current approach involves using PHP to combine multiple css (or js) files into a single file, while also compressing the content using GZIP. For example, the HTML page makes calls to resources like this... <link rel="stylesheet" href="Concat.php?fi ...

phpjavascriptcsscompressionserver-side

Creating CSS-in-JS Components in React JS without External Stylesheet interference

import React, { Component } from "react"; import './navbar.css' class NavBar extends Component { render() { return ( <div> navbar content </div> ); } } export default NavBar; If I were to ...

cssreactjs

The use of HTML 5 Autofocus causes interference with CSS loading

Whenever I apply the autofocus="autofocus" attribute to an input element, it causes a brief glitch in Firefox. The content briefly appears without the CSS styling applied, resulting in elements not centered and headings rendered in default fonts. If I tak ...

csshtmlfirefoxautofocus

Adjust the background color of the panel heading when it is toggled in a Bootstrap collapsible panel group

I'm currently working on a collapsible panel group design using Bootstrap. I want the panel heading to have a different background color when the panel group is expanded versus when it is collapsed. I initially attempted to use the :active selector, b ...

htmlcssbootstrap-4collapsable

Is the phrase "This site was built with Wix" visible on the website?

Recently, I've begun using Wix to build a website. I'm curious - does the message 'This website is created using Wix' appear at the top and bottom of the page when it's published? 'This website is created using Wix' I ...

html

Gatsby utilized the background-image CSS style within the Emotion library for CSS-in-JS implementation

The background image is not visible with the current setup. To troubleshoot, I attempted to set the background to pink within const background and it worked. This confirms that Emotion is functioning correctly. Upon inspecting with the React Dev Tools ext ...

javascriptcssreactjsgatsbyemotion

Encountered a problem while executing CSS in Shiny R

I am attempting to incorporate my css file into Shiny R. I have been able to run the application without any issues before adding the style.css file. Below are the steps I have taken: library(shiny) library(tidyverse) library(leaflet) library(leaflet.extra ...

cssrshiny

The JQuery toggle functionality may experience limitations on certain mobile browsers, such as Moto E

My code works perfectly on Windows browsers, but I'm experiencing some issues on certain mobile devices like Moto E. Can anyone offer some advice on how to resolve this? Jquery $(".child-row .child-head").on("click", function () { $(this).nex ...

jqueryhtml

Tips for incorporating Javascript in an innerHTML inline css situation

I'm just starting to learn about html5 and php. I'm curious about how to incorporate javascript into my existing code. Currently, I have data from a database displayed in an HTML table. My goal is to align the output of the last cell more toward ...

javascriptphphtmlcss

Ways to customize background color for a particular date?

I have been using the fullcalendar npm package to display a calendar on my website. I am trying to figure out how to set a background color for a specific selected date. I tried looking into this issue on GitHub at this link. However, it seems that dayRe ...

javascripthtmlcssangularfullcalendar

How to implement multiple conditions with ng-if in HTML

I need to implement a button that is visible only for specific index numbers: <tbody data-ng-repeat="(wholesalerIndex, wholesaler) in wholesalers"> <tr> <td> <but ...

javascriptangularjshtml

Bootstrap-4 modal not appearing when activated within a dropdown menu

When I tried to use a dropdown feature in my application, I encountered an issue where one of the dropdown items was supposed to open a modal but it wasn't showing up. However, the modal worked perfectly fine when I accessed it using a normal button i ...

htmlcssdrop-down-menubootstrap-4modal-dialog

How to extract text from outside a tag using Selenium in Python3 with Chrome?

I am having trouble extracting text from outside of a tag. Currently, I am working with Python3.7 and I have experimented with both Selenium and BeautifulSoup4. Below is the HTML snippet I am dealing with: <br> <span class="label">Max. Allo ...

htmlpython-3.xselenium