Images taking too long to load are causing significant blank spaces underneath - CSS height dilemma

I recently set up a Wordpress blog with the BJ Lazy Load plugin and the AVADA theme. However, I've noticed a significant gap under the images on my post grid blog items when scrolling past the page fold.

To address this issue, I implemented a fix by setting a forced height of:

.fusion-blog-layout-grid .fusion-post-wrapper .fusion-image-wrapper img {
    height: 230px; !important;
}

While this solution worked, I'm concerned about image stretching when resizing the page or viewing it on different devices. Is there a more effective alternative to forcing a height for each media query?

htmlcsswordpresslazy-loading

Answer №1

Avoid specifying the height for images and consider using the following code instead.

.fusion-blog-layout-grid .fusion-post-wrapper .fusion-image-wrapper img
{
    width: 100%;
    height:auto;
}

If necessary, you can also use media queries to define different heights based on screen sizes:

@media all and (max-width:1199px){
.fusion-blog-layout-grid .fusion-post-wrapper .fusion-image-wrapper img
    {
        height:;
    }
}

@media all and (max-width:991px){
.fusion-blog-layout-grid .fusion-post-wrapper .fusion-image-wrapper img
    {
        height:;
    }
}

@media all and (max-width:768px){
.fusion-blog-layout-grid .fusion-post-wrapper .fusion-image-wrapper img
    {
        height:;
    }
}

@media all and (max-width:480px){
.fusion-blog-layout-grid .fusion-post-wrapper .fusion-image-wrapper img
    {
        height:;
    }
}

@media all and (max-width:380px){
.fusion-blog-layout-grid .fusion-post-wrapper .fusion-image-wrapper img
    {
        height:;
    }
}

@media all and (max-width:320px){
.fusion-blog-layout-grid .fusion-post-wrapper .fusion-image-wrapper img
    {
        height:;
    }
}

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

Using Bootstrap to align a button and an input field on the same line within a form-control

Is there a way to ensure that the button remains on the same line as the input text in the previous forms-control? <div class="row"> <div class="form-group col-xs-6 col-md-5 "> <label for="">Name</label> <input class=" ...

htmlcssbootstrap-4

Tips for concealing boostrap spinners

Within the main component, I have an @Input() alkatreszList$!: Observable<any[]>; that gets passed into the child component input as @Input() item: any; using the item object: <div class="container-fluid"> <div class="row ...

cssangulartypescriptbootstrap-5

The hyperlink for making phone calls appears twice on an Android phone

When you click on the number, it will be displayed twice in the phone screen like this... 12345678910,12345678910 ...instead of just once... 12345678910 Take a look at the code snippet below: {#if order.salesRep} <div class="info"> ...

androidhtmltemplateshyperlinkphone-number

Popovers in Bootstrap 4 not functioning properly within Wordpress Understrap theme

Currently, I am working with the Understrap child theme on Wordpress and I am facing issues getting popovers, tooltips, and vertical pills to function correctly. You can see an example of the problem on this live page: Sample Page It seems like Popper.js ...

javascriptjquerywordpressbootstrap-4

Resizing popups upon button activation

Hey there! I have a popup with a button that reveals random text containing between 0 to 32 words when clicked. The issue is, the popup keeps resizing based on the length of the text, causing the button to move around. Is there a way I can keep the button ...

javascripthtmlcssgoogle-chrome-extension

Modifying an HTML list item to become 'active' in a navigation bar

One way I've been implementing my navbar on each page is by using the following code at the bottom of the page within script tags: $("#navbar-partial").load("navbar.html). The code for the navbar list looks like this: <ul id="main-nav" class="nav ...

javascriptjqueryhtmlcsstwitter-bootstrap

Trimmed down vector graphic

My setup includes a simple display with an .svg image that is slightly clipped at the bottom. The arrow image I am using comes from fontawesome. Can anyone explain why this clipping is happening? <!DOCTYPE html> <html lang="en"> < ...

htmlcss

Need help modifying a UseStatus to target an axios post response efficiently?

Hey there, back again with a head-scratcher I've been dealing with all day. Almost done with a contact form, just stuck on an animation concept that involves three steps: 1. Prompting the user to contact 2. Making the waiting process user-friendly ...

javascriptcssreactjsaxiosuse-state

Obtain a pointer to the timestamp within a embedded Kibana chart on an HTML webpage

The image at the specified link shows a black box labeled @timestamp displaying date and time information. Unfortunately, viewing the image requires a reputation of 10. Link to image: https://www.elastic.co/assets/bltde09cbafb09b7f08/Screen-Shot-2014-09-3 ...

javascriptjqueryhtmlkibana-4

Is it possible for JavaScript to be cached when it is located within the body tag of an HTML document?

Currently, I am exploring the topic of How to optimize HTML rendering speed, and came across the idea that scripts in the HEAD tag can be cached. I'm curious, is it possible to cache JavaScript in the BODY tag? If not, I wonder why YUI suggests placi ...

javascripthtmlcachingprogressive-enhancement

Hiding the visibility of a table-cell will conceal the background color of its parent table row

In my coding project, I have implemented forms with a structure that utilizes display:table-row and display: table-cell. Previously, in Firefox 52, I was able to hide a cell element using visibility:hidden, effectively hiding the cell while maintaining the ...

jqueryhtmlcssfirefox

TailwindCSS in React.Js does not seem to accept randomly generated color codes

Check out my Messages component below: import randomColor from "random-color"; import React from "react"; import "../Chat.css"; function DisplayMessage({ username, message }) { const changeTextColor = randomColor(0.99, 0.99 ...

cssreactjsnpmtailwind-css

The positioning of a div element is not functioning as expected

I am currently updating my portfolio project. The page I am working on includes an image with a specific date displayed on it. I want to add text below the image, but I am encountering some issues: The text I want to include is meant to be a link, like th ...

htmlcss

Extract solely the content from a span element that meets specific width requirements

Currently, I am facing an issue with a dynamically filled span that gets content added to it. Once the content reaches the width of 500px, I need to be able to read only the content within the first 300px. This content can consist of either one line or mul ...

javascriptjquerycsshtml

How can I maintain an element in the open position in jQuery slideUp/slideDown function if it has a certain

I am working on a menu that includes both parent and child elements. When you hover over a parent item with children, the submenu smoothly slides down, and when you hover off, it slides back up. However, I am facing a challenge. How can I modify this jque ...

jquerycssjquery-ui-slider

Retrieve data from a function in PHP while being outside of it

Embarking on this new journey of creating a plugin in wordpress, I find myself faced with the task of integrating jQuery code into my footer. The function at the beginning of my document serves this purpose, and here is a simplified version: function slug ...

phpjquerywordpressglobalshortcode

Materialize CSS dropdown select arrow out of position

Here is a snapshot of the Materialize CSS, which can be viewed at: However, I am encountering an issue where the dropdown arrow appears below the list instead of on the side. I am currently using Django 3. How can I resolve this? https://i.sstatic.net/d ...

cssdjangomaterialize

Dynamically setting CSS values with jQuery to center an image within a div

I'm trying to center an image in a div according to the width of the image after I scale it to have a height of 250px. For example, if I had an image with dimensions 625x450 and, in my CSS file, set the height of the image to be 250px, then the width ...

jqueryhtmlcss

Tips for resolving an issue with an overflowing Uber React-Vis multicolor bar chart

I am trying to create a multi-colored bar chart using Uber's react-vis library. However, I am encountering an issue where the leftmost bar of the chart is overflowing below the YAxis instead of remaining contained to the right of it. You can view the ...

javascriptcssreactjsreact-vis

The appearance of the React user interface in my app does not match what is displayed in the inspect element tool

Strange issue at hand. The progress bar in question appears like this: 1 export default function PercentageBar(props) { 2 return ( 3 <div className="w-full h-1 my-1 bg-stone-200"> 4 <div className={`h-1 bg-orange- ...

javascripthtmlcssreactjstailwind-css