Flexslider doesn't adjust the height of the viewport when displaying a shorter image in the slideshow

Is Flexslider not resizing its viewport height according to the current image on your site? The fixed height seems to be causing blank white space under shorter images. Are you inadvertently overriding Flexslider's responsive height function? Is there a solution for this issue?

Check out the live draft here:

HTML:


    <div class="flexslider">
        <div class="arrows">
            <img src="../img/arrow-left.png" class="arrow-left pull-left">
            <img src="../img/arrow-right.png" class="arrow-right pull-right">
        </div>
        <ul class="slides" id="slideshow" ondragstart="return false;">
            <li>
                <img src="../img/residential/project-01/img-01.jpg" />
                <div class="flex-caption right hidden-xs">
                    <div class="caption-content">
                        <p><span class="hcaption">PROJECT <span class="sm-spaced">1</span></span><br /></p>
                        ...
                    </div>
                </div>
            </li>
            ...
        </ul>
    </div>

CSS:


.flexslider {
    background:none !important;
    border:none !important;
    box-shadow:none !important;
}
...
htmlcssflexslider

Answer №1

If you want to enable smooth height adjustment in flexslider using JavaScript, use the following property:

smoothHeight: true

See example below:

$('.flexslider').flexslider({
    animation: "slide",
    smoothHeight: true
});

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

How to target the following sibling element (not a child) with CSS

I am working with the following HTML structure: <div class="col-sm-12"> <input id="my_id"> <div class="col-sm-1 col-3-box" style="position:absolute; margin-left:340px;"> </div> </div> How can I target and change ...

htmlcss

Struggling to incorporate a three-strike mechanism into my JavaScript game

I need to implement a feature where the user can make up to 2 mistakes before losing the game. Here's what I need to do: - Set up a global variable to keep track of the number of mistakes - Initialize this variable during the startGame function - M ...

javascripthtmljquerycss

Arranging text within a td cell

This is what I currently have: <tr> <td colspan="4" style="font-size:7pt; font-color:red; font-weight: bold;"> PLEASE NOTE: SPECIFY THE ARTICLE IN AS MUCH DETAIL AS POSSIBLE </td> </tr> However, the text does not a ...

htmlcss

Convert the provided text into a clickable button

I've been attempting to mirror this function: and: I'm currently utilizing JS and Vue to develop my web application. Any advice on navigating through the current dilemma I find myself in would be greatly appreciated. So far, I have successfully ...

javascripthtmlvue.js

Checkbox in Angular FormGroup not triggering touched state

There seems to be an issue with the Angular form when checking if the form is touched, especially in relation to a checkbox element. Despite the value of the checkbox changing on click, I am seeing !newDeviceGroup.touched = true. I'm not quite sure wh ...

javascripthtmlangulartypescriptangular-reactive-forms

Flex children do not adhere to max-height and max-width properties

There seems to be an issue with setting the max-width and height for flex children. The div is getting squished down to fit its children exactly, possibly due to the styling associated with div .content. It's not clear why this is happening. The divi ...

htmlcssflexbox

I am experimenting with showcasing a series of Bootstrap div elements, each containing a dynamic carousel of images sourced from a database along with additional information

My image display is working fine, but the other divs are appearing within the first div and the additional information like title and description are not showing. I'm aiming to have six rows, each with two columns, displaying a carousel of images and ...

phphtmlcarouselbootstrap-5

Click to make the arrow come to life through animation!

I am brand new to coding and this is my inaugural code snippet: .container_menu { position: relative; top: 0px; left: 0px; width: 25px; height: 25px; } .container_menu .line-1 { background-color: black; width: 59%; height: 2px; positio ...

cssanimation

Simply drag your files onto the form for quick and easy uploading upon submission

Would like to know how to enable drag-and-drop file selection for uploading files synchronously upon form submission. Understanding the basics of file uploading using HTML and PHP, I am seeking a way to process these files in PHP along with those in the $_ ...

phpjqueryhtmluploaddrag-and-drop

Discover how to access and manipulate JSON files in an Angular application using

Currently, I am diving into learning TypeScript with Angular and I'm interested in reading a JSON file. The structure of my JSON file is as follows: { "nb": "7", "extport": "1176",, "REQ_EMAIL": ...

htmljsonangulartypescript

React's Material-UI AppBar is failing to register click events

I'm experimenting with React, incorporating the AppBar and Drawer components from v0 Material-UI as functional components. I've defined the handleDrawerClick function within the class and passed it as a prop to be used as a click event in the fun ...

javascripthtmlcssreactjsmaterial-ui

Struggling to eliminate margins in a React web application

Can anyone assist me with removing the large white margins on my react project? Here are some solutions I have attempted. * { margin: 0; padding: 0; } /-/-/-/ body { max-width: 2040px; margin: 0 auto; padding: 0 5%; clear: both; } I've exp ...

cssreactjsreact-redux

Increased spacing HTML

Trying to create a footer in HTML, but each time I attempt it ends up with an extra margin on the left side. Here is my current footer code: <div id="footer"> Tester </div> #footer { background-image: url(images/backgroundrpatternf ...

htmlcssmargin

Should I create CSS rules for different screen sizes or should I dynamically render components based on the screen size?

As I delve into learning React, I find myself unsure about the most effective approach to make websites responsive. Currently, I am utilizing Semantic UI React as my CSS Library. While everything displays perfectly on desktop, I encounter some issues when ...

cssreactjssemantic-ui

Elements not being styled by CSS properties

I am facing an issue with a CSS file designed to theme a page in white on black, as opposed to the usual black on white. body { background-color: black; } h1 h2 h3 h4 h5 h6 p { color: white; } However, the color: white; property is not being applied ...

htmlcsstwitter-bootstrap

Creating a toggle link with 5 different states in coding

I have an HTML table where certain TDs contain inline styles, title tags, and links. I am looking to implement a feature where users can hide these elements by clicking the same icon multiple times. For example, on the first click, only styles are removed, ...

jqueryhtmlcss

Exploring search capabilities within D3 graph nodes

After creating a JSON file with four tiers and utilizing D3.js's collapsing box format to visualize it (source: https://bl.ocks.org/swayvil/b86f8d4941bdfcbfff8f69619cd2f460), I've run into an issue. The problem stems from the sheer size of the J ...

javascripthtmljsond3.js

Ways to deselect checkboxes and eliminate validation requirements

Below is the HTML code snippet that I am working with: <div class="form-group"> <div class="input-group"> <label for="daterange-vacancy" class="input-group-addon">Van</label> ...

javascriptjqueryhtmlcheckboxcalendar

Is there a way to make a sass file universally accessible without having to import it into every file and causing an increase in bundle size?

Question How can I efficiently import variables.scss globally without the need to duplicate them in every file and reference them in my build instead of importing? Setup I am using Vue2 with laravel-mix, where I have imported index.scss in my main.js ...

cssvue.jswebpacksasslaravel-mix

flexbox with equal width and height

I have two questions regarding flexboxes but I am unable to find the answers. How can I create 4 boxes with equal width and height, without using the viewport? For instance, if I create a box with 50% width, I want the height to be equal to the width. ...

htmlcss