I'm encountering some strange blank white space when I view my webpage on a phone or Safari. It seems to be affecting the CSS grid and flexbox of images

Currently, I am engaged in a 180-day challenge to create webpages on . For website number 9, the task at hand is to showcase 8 images in a grid layout. Surprisingly, this layout appears flawlessly on my Mac when using Chrome but encounters issues displaying white space underneath the images on both my phone and Safari browser on Mac. How can I go about fixing this perplexing problem? An attached image provides a visual representation of the hiccup that needs addressing. Any assistance in resolving this matter would be immensely appreciated.

In implementing my design, I have incorporated CSS grid techniques and employed flexbox for achieving the desired grid arrangement of images.

Here is how the grid displays on my iPhone

Highlighted below is a segment of my HTML code:

<! DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link href="taniaWebsite7.css" type="text/css" rel="stylesheet" />
  </head>
  <body class="mainpage8">
    <div class="containerr">
      <h1 class="heading">New Zealand 2018 <span> Image Gallery</span></h1>
      <div class="gallery">
        <div class="gallery-item"><img class="gallery-image" src="1.png" alt="one" /></div>
        <div class="gallery-item"><img class="gallery-image" src="2.png" alt="two" /></div>
        <div class="gallery-item"><img class="gallery-image" src="3.png" alt="three" /></div>
        <div class="gallery-item"><img class="gallery-image" src="4.png" alt="four" /></div>
        <div class="gallery-item"><img class="gallery-image" src="5.png" alt="five" /></div>
        <div class="gallery-item"><img class="gallery-image" src="6.png" alt="six" /></div>
        <div class="gallery-item"><img class="gallery-image" src="7.png" alt="seven" /></div>
        <div class="gallery-item"><img class="gallery-image" src="8.png" alt="eight" /></div>
      </div>
    </div>
  </body>
</html>

This snippet showcases the corresponding CSS styling utilized in alignment with the HTML structure:

.heading {
  font-family: oswald;
  font-size: 4rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  padding: 3.5rem 0;
  color:lightblue;
}

.heading span {
  display: block;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  /* Compensate for excess margin on outer gallery flex items */
  margin: -1rem -1rem;
}

.gallery-item {
  flex: 1 0 24rem;
  margin: 1rem;
  box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.gallery-image {
  display: block;
  width: 100%;
  height: 50%;
  object-fit: cover;
  transition: transform 400ms ease-out;
}

.gallery-image:hover {
  transform: scale(1.15);
}

@supports (display: grid) {
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    grid-gap: 2rem;
  }
  .gallery,
  .gallery-item {

  }
}

Answer №1

When you eliminate the height attribute from the .gallery-item housing the image, it will automatically adjust to the dimensions of the image within. Images naturally maintain their aspect ratio unless a specific height is set, which could potentially distort the image.

For more information on image ratios, check out this informative article:

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 could be the reason for the css problems being caused by my flash banner?

My flash banner ad is being displayed on a website as an advertisement at the bottom of the page. Whenever the banner ad is shown, the scroll bar disappears. The following CSS code appears when the flash banner is active: body {margin: 0; padding: 0; over ...

Position the li elements within the ul at the bottom

I am trying to align a li element at the bottom of a ul list. +------+ | li1 | | li2 | | li3 | | | | | | | | li4 | +------+ Any suggestions on how to achieve this? MY ATTEMPTED SOLUTION: li4 { position: fixed; bottom: 0; } W ...

Using HTML5, the <section> element can inherit styling from the

This is my first time building a website using HTML5 and I've come across a small problem. Here is the code snippet: <header></header> <section> <header></header> <article></article> <footer></foot ...

Unexpected background image slideshow appearance

I am encountering an issue with my slideshow where the last image briefly appears before the first image loads in a continuous loop. The offset of the initial image causes it to start at the middle of the window, and in Google Chrome and Safari, subsequent ...

Styling TD with CSS for bottom border

Is there a way to adjust the bottom border of a TD element in CSS? The image provided demonstrates the desired effect, but with a slight overhang. I need the border to align perfectly with the width of the blue cell above it. This is the code snippet I am ...

Analyze HTML while maintaining the integrity of the initial content

I am facing a challenge with my HTML files. I need to replace certain elements while leaving the rest of the content untouched. Specifically, I am looking to run this jQuery expression (or something similar to it): $('.header .title').text(&apos ...

stop an html page from opening a new window

When using my HTML-based application, there are instances when it needs to open another URL within an iframe. However, a problem arises when the third-party URL within the iframe also opens a new window with the same content and URL. How can I prevent th ...

How to use jQuery to disable td and ul elements

Has anyone successfully disabled a "td" or "ul" element using jQuery, similar to how we disable textboxes and other input types? I attempted to use the "prop" and "attr" functions in jQuery, but they did not seem to work. Is there a way to achieve this? ...

Issues with Carousel Plugin Functionality

**Hey everyone, I could really use some help. As a beginner coder, please forgive any errors in my code. I am currently working on a webpage where I need to incorporate a carousel plugin within a panel body to display the latest photos. The code provided ...

Adjust the parent container to match the height of the child container when it is being hovered

I have been searching for a solution to this issue, but none of the answers I found seem to work in my specific case. Currently, I have a "Mega Menu" with links on the left side that expand when hovered over, revealing hidden links with images on the righ ...

Learn how to dynamically add a class to an element when hovering, and ensure that the class remains even after the mouse has

I'm facing difficulty with this task - when hovering over elements, an active class should be added to them. However, when moving the mouse to another section, the active class should remain on the last element hovered. Additionally, the first block s ...

What are the specifications for the opacity, width, and height of the background image in Bootstrap's

My current project has specific requirements that I need assistance with: I need the background image of the jumbotron to fit the width of the page and have its height scaled proportionally. The opacity of the jumbotron's background image should be ...

Is there a way to automatically populate my second dynamic dropdown list on page load?

I am currently working on a dynamic drop down menu that consists of two lists. When the page initially loads, the second drop down list is empty. However, I would like both lists to be displayed by default. You can see an example of the issue I'm faci ...

Switching up the Label Colors in Chart.JS

It's been a while since my last question, so please bear with me if I'm not following the rules. I've attached my current code and a reference image of the chart. I am completely new to working with ChartJS. The situation is a bit unique: t ...

Determining the Number of Form Values Equal to 0 Using jQuery

$("#scorecard").change(function() { var total = 0; $("#scorecard :checked").each( function() { if(parseInt($(this).val()) === 0) { total += 1; } else { total += 0; ...

Retrieve Checkbox within a Span using Jquery

Trying to achieve the selection of a checkbox when a user clicks on a div using jQuery. The provided fiddle shows my attempt: http://jsfiddle.net/5PpsJ/ The code snippet I have written so far is as follows, but it doesn't seem to select the checkbox ...

checkbox toggling event triggering twice

I have been working on an application that allows users to register for university courses. They can select their registration type, course type, batch, and subjects. The subjects are displayed in a table based on the selected course type and batch. Users ...

How to Stop Element Flickering While Hovering in Selenium IE Webdriver

My code is functioning perfectly in Firefox, but when I try it on Internet Explorer, there is flickering. Here is my code: WebElement mouseOver= driver.findElement(By.linkText("abc")); //I'm locating the element by link text. Selenium finds the ...

Tips for maintaining the fixed positioning of the left and right flex elements (sidebars) as the middle element scrolls, with the scroll bar located on the right side

I am currently designing a webpage with three main elements: a left sidebar, a right sidebar, and a central feed that is 600px wide and scrolls. The scroll bar must be positioned on the right side of the screen, allowing users to scroll by simply using the ...

Guide on defining keyframes in a CSS animation based on a specific property value

In CSS animations, keyframes are defined using percentages to determine their position: @keyframes foo { 0% { ... } 50% { ... } 100% { ... } } I'm working on a basic animation where an object smoothly moves across the screen. However, I ...