Creating a responsive Gallery CSS slider from GitHub is a seamless process

I came across a pure CSS slider on GitHub that caught my eye, but unfortunately it is not responsive. I attempted to modify the .gallery .item with a width of 100%, however, it seems that the height must be specified in pixels as using % doesn't yield the desired result - without a defined height, the slides become barely visible.

If you'd like to see the slider in action, check out this demo:

You can find the source code on GitHub here:

When resizing the browser window, you'll notice that the slider's height remains constant. Is there any way to make this slider responsive?

htmlcssgithubslider

Answer №1

The responsiveness of the hero/slider is already in place. Adjusting the browser height and width results in the hero/slider adapting accordingly without any issues.

UPDATE:: Consider removing the js-autoheight hook class from the hero section.

<section style="min-height: /*some value*/px;" class="js-autoheight gallery items-/*Some value*/">

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

Normal version with background image and mobile version with background color

Seeking advice on how to optimize my website for mobile devices. I have two separate CSS files - one for the mobile version and one for the desktop version. Combining them in the head of my HTML file is causing issues, as the background style from the desk ...

htmlcssmobile

Picture with predetermined size to occupy entire container

Seeking assistance! I am looking to pixelate an image after a jQuery event without using plugins like pixelate.js as they are not suitable for my project. Is it possible, through CSS or JavaScript, to automatically change the image to a smaller version wi ...

javascriptjquerycsspixelate

Utilizing Angular Material Table with a distinct header row for every table row

Looking for help with creating an Angular Material table that includes a header for every other row. Here is a basic sketch to illustrate: https://i.sstatic.net/kpptk.png Using separate tables seems like the best approach, but it may lead to a messy layo ...

htmlangulartypescriptangular-materialangular-material-table

Replace all existing content on the webpage with an exciting Unity game upon clicking

In an interesting experiment, I am trying to hide a secret href that, once clicked, has the power to wipe out everything on the page, leaving it temporarily blank before replacing it with a captivating Unity game that takes over the entire page. Let me sh ...

javascripthtmljqueryfunctionunity-game-engine

Converting nested lists into Miller Columns: a step-by-step guide

I am interested in creating a series of interactive nested lists using Miller Columns design. The idea is that when you click on a parent item, it expands to reveal the next level of the list. While I have come across solutions that involve parsing data a ...

jqueryhtmlcss

What is the best way to prioritize running an ajax process before initializing a slider on a Vue component?

Here is the structure of my Vue top league component: <template> <div class="row"> <div class="col-md-3" v-for="item in items"> <div class="panel panel-default"> <div class="panel-image"& ...

vue.jsslidervuejs2vue-componentvuex

Using JQuery to search for and remove the id number that has been clicked from a specific value

I am in need of assistance with deleting the clicked id number from an input value using jQuery. I am unsure of how to proceed with this task and would appreciate some guidance. To simplify my request, let me explain what I am trying to accomplish. Take ...

javascriptjqueryhtml

Transmit data from the Windows Communication Foundation to JavaScript

Looking to invoke the WCF service through JavaScript, utilizing AJAX? Check out this resource: Calling WCF Services using jQuery Here's my query: Is there a method to retain some JavaScript-related data after making a request, and then transmit inf ...

javascriptajaxhtmlwcfservice

Discovering the Keys of a Multidimensional Array in JSON with AngularJS

I'm attempting to create a form using a JSON array. I want to display the keys in the HTML. Check out this example array: { "Fred": { "description": "A dude" }, "Tomas": { "description": "Another Dude", "Work": { "Current" ...

htmlarraysangularjsjson

Getting the Innertext of a Web Element Using Dynamic Path in Selenium

Currently, I have a VBA macro running in Excel 2016 that retrieves information from the internet using Chrome and Selenium WebDriver. The macro navigates through various webpages, each with slightly different content structures. This variation leads to cha ...

htmlexcelvbaselenium-webdriverweb-scraping

Find the total number of divs with a specific class using jQuery, and then retrieve the id strings of the inner

How can I count the total number of divs by their class name and extract specific parts from their inner div IDs? Here is a sample code snippet: <div class=”my_block1”> <div class=”my_block2”> <div id=”my-style-35-area ...

javascriptjqueryhtml

Pass an array from a script file in JavaScript to index.js within the Express framework

I've encountered a challenge in sending an array (or JSON object) from script.js to index.js, my express server file. I've explored various solutions such as passing the variable through an HTML file and then to another JavaScript file, utilizing ...

javascripthtmlnode.jsarraysexpress

How to identify the position of an element while scrolling using JavaScript/jQuery

Trying to determine the distance between an element and the top of the window document. After initial value is retrieved during scroll event, it remains unchanged. How can this value be continuously tracked as the page scrolls? JS: $(function() { $(wi ...

javascriptjqueryhtmloffset

Utilizing pjax to open internal pages in a new tab

I have incorporated pjax into one of my projects, but I am facing a challenge when trying to open a page in a new tab or window. It appears that pjax opens all links in the same window except for those that lead to external websites. Below is the snippet ...

javascriptjqueryhtmlajaxpjax

How to display a specific HTML section to a select group of individuals using PHP

I have created a section in HTML that I only want to be visible to individuals whose if($Admin >= 1) condition is met based on my database. However, I am uncertain about how to implement this. This is the current state of my HTML code. !-- ADM SECTIO ...

phphtmlcss

Trouble with the query waypoints extension in a simple demonstration

Can anyone help me figure out why the basic example from the waypoints plugin isn't working for me? Here's a link to the jsfiddle I created: http://jsfiddle.net/ZA8bd/2/ CSS .block1 { margin-top:30px; width: 400px; background: red; ...

javascriptjqueryhtmlcssjquery-waypoints

Struggling with sending mail using javascript and ajax?

Having trouble sending emails through my website using AJAX. It seems like the data is not being utilized or sent properly. I managed to get it working some time ago, but haven't checked on it since and now it has stopped functioning for some unknown ...

javascriptphpjqueryhtmlajax

Tips for showcasing mistakes when submitting a form

I am curious about how to show the error message from my model in the validate() function if the submit is not valid, returning "invalid username or password" index.scala.html @(myForm: Form[models.profile.MUser]) @import helper._ @import helper.twitter ...

htmlformsvalidationscalaplayframework-2.0

Sliding the content in React

My current project involves creating a content slider in React. While I have made some progress, I am facing a challenge in making the content move horizontally instead of vertically. Currently, all the items are stacked on top of each other, preventing th ...

cssreactjsanimationslider

Arrange the placement of a box outside of the primary DIV while maintaining a connection to it

I've encountered a hurdle that's hindering my progress. I'm attempting to shift a small box containing various options (like report, like, dislike, etc.) out from the main DIV while keeping it securely attached from the outside. Let me illus ...

javascriptjqueryhtmlcsstwitter-bootstrap