The void on the right side of the Safari browser

I am seeking assistance as I have encountered a problem on my website built using bootstrap 4.1. You can find my website at . The site functions correctly in chrome, firefox, opera, and IE, but when viewed on Safari, there is an unexpected white space on the right side, causing a side scrolling effect that is not intended.

I meticulously inspected the code line by line to ensure there was no overflowing element causing the issue. Additionally, I attempted to rectify it by adding the following:

 html, body {
   width:100%;
   overflow-x:hidden;
 }

While this solution resolved the white space problem, it had the unintended consequence of disabling the navbar scroll functionality on those browsers and also completely disabled mobile navigation. Unfortunately, due to its length, I cannot provide the entire code here. If this issue has been addressed before, I apologize, but I could not locate a relevant solution.

htmlcsssafaribootstrap-4mobile-safari

Answer №1

If you're working with bootstrap.css, locate line #571:

#devDiv1, #devDiv2, #devDiv3 {
    margin-top: 85px;
    margin-bottom: -24px;
    position: relative;
    height: inherit;
    perspective: 150px;
    perspective-origin: 0 50%;
    cursor:pointer;
}

Insert overflow: hidden; at that location.

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

Is it achievable to selectively target a particular class without resorting to utilizing an ID within DOM manipulation?

Is there a way to apply a function to a specific class without requiring an id? For example, in CSS hover effects, where multiple elements share the same class but only the one being hovered over is affected. function toggleHeight(elementId, arrowId) { ...

javascriptcss

Tips for emphasizing a chosen hyperlink within a jQuery Mobile panel

I am currently working on a jquery mobile page that includes a navigation menu in a sliding panel. While the functionality is good, I am looking to enhance the user experience by highlighting the selected link in the navigation. Typically, I would utilize ...

jquerycssjquery-mobileselecteditem

Creating spacious gaps between list items

I have been working on creating a scrollable horizontal list using iscroll. Although the list functions properly, I am encountering an issue with spacing between each li item. Despite trying various solutions, I have been unable to remove the space betwe ...

cssiscroll

Dynamic WordPress Website Designs

Seeking recommendations for responsive WordPress themes that offer extensive CSS and structural customization options. The goal is to retain all of WordPress's built-in features, such as blogging capabilities, while having the freedom to completely co ...

wordpresscsswordpress-theming

What is the best way to design versatile div containers that combine the float property with fluid dimensions?

I am attempting to achieve a specific layout where the width of the content_container extends up to the right side of the screen and dynamically adjusts based on whether the expandable pane is collapsed or expanded. Applying width: 100% to .content_contain ...

javascripthtmljquerycss

Highlighter for HTML - Prism

I have been using Prism for styling CSS and it's working well: <pre><code class="language-css">p { color: red }</code></pre> However, I am facing issues with highlighting HTML code: <pre><code class="language-html"& ...

htmlsyntax-highlightingprism.js

Is there a way to verticially center text and images across columns using Bootstrap 5?

My text is not aligned properly due to excessive padding, causing it to shift to the top right. I attempted to use Bootstrap to adjust alignment and justification but am still struggling to identify the cause of this issue. Unfortunately, I cannot provide ...

htmlcssbootstrap-5

What steps can I take to prompt this function to modify the value of my input?

After recently delving into the world of JavaScript, I decided to create a background color generator that randomly changes when a button is clicked. This simple project involves two input fields (color1 & color2) which receive random values upon clicking ...

javascripthtmlcss

Aligning HTML Headings Vertically with CSS Baseline

I am looking to align two columns of headings to the baseline, with each having a different font size. Additionally, I want one column on the left side and the other on the right side. To achieve this, using display: inline-block will ensure that they are ...

htmlcssvertical-alignment

Picture will not be included in the SQL database

When users fill out a HTML form to register for a competition, everything successfully enters into the database except for the Photo Name and Photo. Any ideas on why this might be happening? HTML Form: <form method="post" action="addboat.php"> &l ...

phphtmlmysqlforms

Tips for determining what elements are being updated in terms of style

I need assistance with modifying the functionality of a webpage's dropdown menu. Currently, it displays when the mouse hovers over it, but I want to change it to appear on click using my own JavaScript. Despite setting the onmouseout and onmouseover e ...

javascripthtmlcssicefaces

Loading SVG images in advance

I am in possession of around one hundred simple SVG images, distributed among five different image folders. These images are currently retrieved on demand when they need to be displayed, which generally works well but occasionally results in flickering tha ...

javascriptphphtmlcsssvg

Optimal banner image dimensions for responsive mobile display on various devices

What is the best way to ensure a banner image looks good on small and medium mobile devices, as well as tablets? ...

htmlcssresponsive-designmedia-queries

Struggling to find a way to showcase API data on a HTML site

Is there a way to dynamically show the live prices of crypto currencies on my website? I wrote a script that successfully displays the current price, but I'm struggling with implementing auto-refresh using setInterval. Here's the code I have so f ...

javascripthtmljsonapi

Tips for configuring the tooltip feature in Bootstrap Select plugin

I've been struggling to set the tooltip for a bootstrap select control, but I haven't been able to figure it out yet. In my situation, I have a select control without a label (due to the design of the page). So, when a user hovers over a selecte ...

javascriptjqueryhtmlcsstwitter-bootstrap

Verification of user input in open-text fields

After conducting extensive research on form validation in PHP, I realized that most tutorials focus on validating specific fields such as names, emails, or dates using regex. However, I am facing a challenge when it comes to validating free-form fields lik ...

phphtmlvalidationsecurityhtmlspecialchars

Disable audio playback on tab unfocus using Javascript/HTML

Is there a way to automatically mute a tab or video when it is not in focus? As a beginner, I am unsure how to accomplish this task. The audio source is currently a webm file embedded within a <video> tag. ...

javascripthtmlhtml5-videohtml5-audio

Ways to efficiently update styles dynamically using css and/or javascript

I am trying to update the styles of a button when it is clicked. I initially set the style for the first element on page load, but now I need to remove those styles from the first element and apply them to the clicked button instead. I am having trouble fi ...

javascripthtmlcssknockout.js

Minimize the size of the MUI date selector widget

I've been incorporating the MUI date picker into a data list, but I'm looking to decrease the height of the input field and adjust the positioning of the close date and calendar icons. They're currently taking up too much space between them ...

htmlcssreactjswebmaterial-ui

The hover effect and image opacity adjustment seem to be malfunctioning in my HTML/CSS code

Currently, I am in the midst of a web project and my goal is to implement a hover effect on the first card containing an image. The desired outcome is for the card to move upwards upon hovering, allowing the image to become fully visible with an opacity se ...

javascripthtmlcsshovertailwind-css