The min-width of 100vh is functioning properly on mobile devices, however, it is not working as expected on PCs when set to 100

When using 100vh, it only works on mobile or if you narrow the width of your web browser on a PC. If the window/width is set at 100%, the image may appear too tall and cause the div class "mars" to overflow the viewport.

Unfortunately, screenshots cannot be posted at this time.

Below is the code snippet:

<div class="mars">
                <img  class="mars" src="img/marshero.jpg">
                <div class="greet">
                    <a href="https://solarsystem.nasa.gov/planets/mars/overview/">
                        <p class="inf">Click here to learn more about Mars at solarsystem.nasa.gov</p>
                    </a>
                </div>
                <nav class="menu">
                    <ul class="inline">
                        <li class="inline"><a href="../index.html">▶About me</a></li>
                        <li class="inline"><a href="ProductDesign/index.html">Product design</a></li>
                        <li class="inline"><a href="Research/index.html">Research</a></li>
                        <li class="inline"><a href="ProductDevelopment/index.html">Product development</a></li>
                    </ul>
                </nav>
            </div>

div.mars {
    min-height: 100vh;
    overflow: auto;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

img.mars {
    flex: 1 0 auto;
    max-width: inherit;
    max-height: inherit;
    height: inherit;
    width: inherit;
    object-fit: cover;
}

/* nav */

nav.menu {
    background-color: #f9eae2;
    padding: 16px;
    @media only screen and (max-width: 1050px) {
        padding: 0px;
    }
    
}

ul.inline {
    text-align: center;
    @media only screen and (max-width: 1050px) {
        text-align: left;
    }
}

li.inline {
    display: inline;
    padding-left: 16px;
    @media only screen and (max-width: 1050px) {
        display:list-item;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

Answer №1

To address this issue and ensure that the image does not become too big, here is the revised CSS code snippet for your img.mars class:

 img.mars {
flex: 1 0 auto;
max-width: 100%; /* Set the maximum width to 100% of the container */
max-height: 100%; /* Set the maximum height to 100% of the container */
width: auto; /* Allow the image to adjust with the container width */
height: auto; /* Allow the image to adapt with the container height */
object-fit: cover;

}

Answer №2

If you are experiencing an issue with your image overflowing when the window width is set to 100%, here is a solution that you can implement by adjusting your CSS:

div.planet {
    min-height: 100vh;
    overflow: hidden; /* Modify from "auto" to "hidden" */

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Ensure the image covers the entire viewport */
img.planet {
    width: 100%; /* Utilize 100% width for optimal fit in viewport */
    height: auto; /* Maintain aspect ratio of the image */
    object-fit: cover;
}

/* Introduce a container for your content to prevent overflow */
.content-holder {
    padding: 16px; /* Adjust padding according to your requirements */
    box-sizing: border-box; /* Incorporate padding in the total width of the element */
}

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

capturing the selected value from a dropdown menu upon form submission

Take a look at this HTML form: <form id="form1"> <select name="date" class="form-control"> </select> <input type="submit" name="submit" id="submit" value="Save" onclick="SubmitForm('#form1', 'editcustomer_callu ...

A guide on verifying a phone number using just one character

I am looking to validate a phone number with only one character being allowed. For example, the format should be XXX-XXXXXXX where "-" is the only allowed character. Below is my validation function: function validatePhoneNumber() { if(addform.staff_m ...

Fetching JSON data cross-domain with the help of JavaScript or JQuery

I am currently attempting to retrieve JSON data from this specific url. However, I am encountering difficulties in making it function as intended. The goal is to seamlessly integrate the school's lunch menu utilizing NutriSlice. We are leveraging Ris ...

Tips for avoiding duplicate ids in dynamic divs

I have been working on dynamically creating divs, and while my method is functioning properly, I am encountering an issue with id duplication. Due to restrictions in this scenario, I am only allowed to create 4 additional divs. Below you can find the relev ...

The transparency feature is malfunctioning in IE9 when using a background

This is a demonstration of a lightbox feature. You can find the code here. When you click on the link "Show Panel," a form will pop out. It works correctly in Firefox but not in IE9. The HTML code is simple: <body> <a id="show-panel" href="#"&g ...

The subsequent menu selection will be based on the chosen menu value

I am attempting to accomplish the following: https://i.sstatic.net/JffUWC02.png Essentially, I need a select options menu with labels where selecting an option will display a corresponding value. These values should then become labels for a second selec ...

What are some ways I can decrease the background width and shrink the div width?

I am hoping to maintain the current box size and borders, but I want to add a touch of color. Specifically, I would like to have a red line running through the center of the box without coloring the entire background. Although I know one way to achieve thi ...

What is the method for switching the parent element following the adjustment of the selected child's opacity

I am trying to find a way to use CSS to adjust the parent element's opacity if it contains a child element with a specific class. Currently, I have only been able to achieve this on hover by adding a background color to the parent element's ::aft ...

Resolving Issues with Text Overlaid on an Image Hyperlink

Alright, so this problem might be a bit too complex for CSS/HTML to handle, but I'll give it a shot anyway. I have some images that are dynamically placed using the code from this website. What I want to do with these images is add a text overlay w ...

Using jQuery.dataTables to choose all rows except the final column

I'm utilizing a table with jQuery.dataTables. I have a requirement to input dates in the last column. However, when I click to input a date, the row becomes deselected. The following code is meant for selecting all rows: Displayed below is the DataT ...

Keeping datetimepicker current when a date is chosen - a guide

I am currently utilizing the datetimepicker plugin from xdsoft to enable users to select a booking date and time. Check out the documentation for more details. To manage bookings, I have set up a 'fechas' table in my database which stores inform ...

Is there a bug in Firefox concerning the accuracy of document.body.getBoundingClientRect().top?

When I access Firefox version 17.0.1 and request document.body.getBoundingClientRect().top; on a simple site with no CSS styling applied, it returns an incorrect value. Instead of the expected 8, which is the default for the browser, it shows 21.4. However ...

Exploring the POST method functionality in AJAX

I am having trouble creating a function that uses AJAX. When I try to send information using the POST method, the function does not work, but it works fine with the GET method. Here is the function: function ajaxFunction(page,metho ...

Is there a way to convert this JSON object into HTML table code?

I've been working on tweaking a code snippet I came across, but I'm struggling to get it to function the way I desire. Here is the current Javascript code: function JsonUtil() { /** * Given an object, * return its type as a string. ...

Encountered an error saying "Unable to locate property '0' of undefined" while trying to access an environment variable in MongoDB

I am attempting to access a variable that is defined in my JavaScript code. This variable holds data fetched from a MongoDB using a GET request. The entire database is stored under this variable and then read by the HTML for display. The output of the GET ...

What is the best way to add padding to both the TextField input and label components within Material UI?

Recently, I've integrated Material UI into my project and set up a TextField for a form field. However, I'm facing an issue where applying padding to the input field doesn't affect the label as well. <TextField sx={{ display: &q ...

What steps should I take to incorporate Google AdSense advertisements onto my website?

After developing a website using HTML and PHP, I attempted to incorporate Adsense ads. However, upon inserting the ad code between the body tags, the ads failed to display on the site. How can I resolve this issue? ...

Tips on presenting messages to users after clicking the submit button?

I am trying to extract data from a table. I am unsure if my current code is able to retrieve the value from the table. <script> function validateForm() { var x = document.forms["assessmentForm"]["perf_rating11"].value; var y = document.f ...

Real-time Email Validation: Instant feedback on email validity, shown at random intervals and does not persist

I am attempting to show the email entered in the email input field in a validation message. The input field also checks my database for registered emails and displays a message based on the outcome. I then included this code from a source. What happens is ...

When I use `console.log` with `req.body` in Node, the password is

Currently, I am utilizing NodeJs on the backend to console.log(req.body) data from a form that gathers usernames and passwords from users. I have noticed that this method exposes the collected username and password information. Should I be concerned abou ...