The upper section of the pop-up modal is not fully visible when the screen size is decreased

My modal is experiencing an issue where the top part gets cut off when the screen is reduced, disappearing under the bookmarks and address bar. I attempted a solution mentioned in this resource by setting the top and bottom to 0, but it did not resolve the problem.

Below is my current CSS:

/* Modal Content/Box */
.modal-content {
padding: 20px;
border: 1px solid #888;
width: 50%;
position: absolute;
z-index: 9999;
top: 50%;
left: 50%;
width: 50%;
padding: 0px 20px 15px;
background: #fff;
-webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
     -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}

I would greatly appreciate any assistance with this issue.

Thank you, Mike

Answer №1

Perhaps your content is exceeding the window size? If so, try using max-height: 100vh; to ensure that the modal stays within the height of the window while still being centered according to your current code.

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

Creating a visually appealing multi-bar chart in AngularJS: Tips for effectively presenting data

Imagine that I have the JSON data below: [ { month: "Jan", cost: 80, energy: 90 }, { month: "Feb", cost: 50, energy: 80 }, { month: ...

Tips for aligning two canvases with different heights at the top in HTML5

My problem involves two canvases housed within a single <div>. Despite their different heights, they are currently aligned at the bottom. +-------+ + + +-------+ + + + + + + +-------+ +-------+ Is the ...

Disable location prompt feature when using AngularJS with Maps API

For my web application, I developed a feature that includes a map with custom markers using Angular loops: <map data-ng-model="mymap" zoom="4" center="[38.50, -95.00]" style="heigth:375px"> <div ng-repeat="item in list"> <marker pos ...

What are some ways to make the search bar on my website smaller in both length and width?

I have a WordPress website with the ivory search plugin installed for the search functionality. You can check out my website at www.osdoc.in. I am looking to make the search bar shorter and narrower as it is currently causing the menu icons to encroach on ...

Ways to receive notification during the user's selection of an option by hovering over it

Is there a way to receive an event when a user hovers over a select option? I thought that using the onMouseOver or onDragOver props on the option component would work, but it seems like they only trigger for the parent select component. Below is a simpli ...

Is it possible to embed HTML code within JavaScript strings?

Is my approach to inserting HTML into a JavaScript string correct? In particular, I want to insert an HTML link into a div tag using JavaScript. Here is the HTML: <div id="mydivtag"></div> And here is the JavaScript code: document.g ...

What is the best way to prioritize .py-md-6 over .p-3 in Bootstrap 4?

I have set the padding for the class .py-md-6 as follows: .py-md-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; } Despite this, there seems to be a conflict with the .p-3 class in my HAML element: #id.p-3.py-md-6 It appears th ...

Achieve a vertical fill effect within a parent container using CSS to occupy the remaining space

I have set my sights on a specific goal. https://i.sstatic.net/BqqTX.jpg This represents my current progress in achieving that goal. https://i.sstatic.net/unQY9.jpg On the left side, I have an image with a fixed height. The aqua color fills the left s ...

The sidebar vanishes when you move your cursor over the text contained within

My issue is that the side menu keeps closing when I hover over the text inside it. The "About" text functions correctly, but the other three don't seem to work as intended. Despite trying various solutions, I am unable to identify the root cause of th ...

The JavaScript file failed to load

My HTML code is having trouble loading all the files. The Javascript files UserController.js and RepoController.js are not being loaded, which means they are not displayed in the developer tools source tab. When I press F5 in the network tab, the files are ...

Adjust the placement of image when changing the size of the window

Is there a way to prevent an image with a fixed position from covering up page content when the browser window is resized? <div > <img id="img1" class="wrapperImage"></img> </div> <style type="text/css"> .wrapperImag ...

"Troubleshooting IE-specific problem: Loading dropdown options dynamically with AJAX on change

Struggling with a particular issue lately. I'm attempting to populate a second dropdown menu based on the selection made in the first one using jquery ajax. Surprisingly, it works flawlessly on all browsers except for IE 11. Below is the ajax functio ...

The CSS font-weight attribute can be set to bold or light

I've encountered a strange issue with the font-weight property when applied to a button element. When set to 400, everything functions as expected. However, attempting to set it to either 300 or 500 does not produce any noticeable changes. Interesting ...

I am interested in altering the font color

Hey there, I'm new to HTML and CSS and need some help changing the font color and size of my navbar. I've included my code below: HTML code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...

Tips for adjusting the width of Material UI TextField within a Table

I am utilizing a Material UI Table. This is how I construct it: tableValues.map((curRow, row) => { tableRows.push( <TableRow key={this.state.key + "_row_" + row}> {curRow.map((cellContent, col) => { let adHocProps ...

Transferring data from a table to another window

Currently, I am retrieving values from a database and displaying them in a table. I would like to add a button to each row that will allow users to view more details about that specific row. At the moment, only ThesisID, AuthorID, and Title are visible. ...

Exploring the combination of PHP and HTML through conceptual sessions

I am a beginner in the world of PHP, HTML, and website development, and I am currently trying to grasp the concept of Sessions. My goal is to implement a login/logout feature on a website using sessions, MySQL, and Slim framework. I am struggling with und ...

how to handle form submission using JavaScript's return method

As a developer, I have created a single page that fetches data from a registration page. On this page, each data row has an "add" and "unfriend" button, with the latter initially disabled. When a user clicks the "add" button, a prompt box appears asking ...

Only the initial value is being processed in the for loop using Javascript

I am having issues trying to sum the values within a for loop sourced from my Django database using JavaScript. Currently, when I iterate through the loop, only the first value in the array is returned. I need assistance in finding a solution that allows ...

Adjust the size of images using jQuery to perfectly fit the container dimensions

I am currently working on a script to automatically resize images that are too large for the container: $('img').each(function(i){ var parent_width = parseInt($(this).parent().width()), image_width = parseInt($(this).width()); ...