Tips for creating a responsive image gallery

After completing the development of my interactive Video Gallery using only HTML and CSS, I encountered an issue with responsiveness. Whenever I resize my browser, the images go out of the frame. I am looking for a solution to make the image gallery adjust the number of columns based on the browser width without compromising its features or hover effects.

If you can assist, it would be greatly appreciated. Here is the link to my project folder: https://drive.google.com/open?id=0Bx9r_Ov1lSfAYmxDcmJCSkY1MjA

javascriptcsshtmlresponsive-design

Answer №1

It is not recommended to include Bootstrap links in your project and remove any inline styles from your files. I have successfully resolved the error and everything is functioning perfectly. You can test this HTML file in your project directory and execute it.

<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="custom-styles/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="grid-wrap">
    <div class="col-lg-12 offset-top-40">
        <div data-grid-layout="fitRows" data-grid-group="gallery" class="grid grid--loaded" style="position: relative; height: 2300px;">
            <div class="row">
                <div data-filter="All" class="col-xs-12 col-sm-6 col-lg-4 grid-item">
                    <div class="inset-xl-left-30 inset-xl-right-30">
                        <a class="grid-classic" href="index.html" target="_blank">
                        <figure>
                                <img class="img-responsive" src="img/image1.jpg" alt="">
                                <figcaption class="grid-classic-caption text-center">
                                    <h4 class="grid-classic-title text-dark" style="font-family: 'Roboto', sans-serif; color: #333;text-transform: uppercase; text-align: center; font-weight: 400">Image 1</h4>
                                    <p class="grid-classic-desc text-regular veil reveal-xs-block" style="font-family: 'Roboto', sans-serif;text-transform: uppercase;font-weight: 400;text-align: center;">Description 1</p>
                                </figcaption>
                            </figure>
                        </a>
                    </div>
                </div>
                <div data-filter="All" class="col-xs-12 col-sm-6 col-lg-4 grid-item" >
                    <div class="inset-xl-left-30 inset-xl-right-30">
                        <a class="grid-classic" href="index.html" target="_blank">
                            <figure>
                                <img class="img-responsive" src="img/image2.jpg" alt="">
                                <figcaption class="grid-classic-caption text-center">
                                    <h4 class="grid-classic-title text-dark" style="font-family: 'Roboto', sans-serif; color: #333;text-transform: uppercase; text-align: center; font-weight: 400">Image 2</h4>
                                    <p class="grid-classic-desc text-regular veil reveal-xs-block" style="font-family: 'Roboto', sans-serif;text-transform: uppercase;font-weight: 400;text-align: center;">Description 2</p>
                                </figcaption>
                            </figure>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

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

The animation of a disappearing div with CSS is not stopping when hovering over it

Hello, I've been working on a snackbar feature that appears and disappears on a set timer but also needs to pause when hovered over. Unfortunately, the current setup with setTimeout and useState is causing issues with this functionality. I have looke ...

javascripthtmlcssreactjs

Avoid the sudden change in page content when using Router.Navigate

When the link below is clicked, the current page jumps to the top before proceeding to the next page. <a href="javascript:void(0);" (click)="goToTicket(x.refNo, $event)">{{x.ticketTitle}}</a> component.ts goToTicket(refNo, e) { e.prev ...

javascriptnode.jsangulartypescriptecmascript-6

Can Node.js Utilize AJAX, and if So, How?

Coming from a background in browser-based JavaScript, I am looking to dive into learning about node.js. From my current understanding, node.js utilizes the V8 engine as its foundation and offers server-side JavaScript capabilities along with pre-installed ...

javascriptajaxnode.js

Tips on Implementing a CSS Variable in a React Component

Is there a way to use content variable with in-line styles in React? I am unsure of how to accomplish this. CSS3 .right::after, button::after { content: var(--content); display: block; position: absolute; white-space: nowrap; padding: 40px 40p ...

cssreactjsmaterial-ui

Unable to fix position: sticky issue following Angular 15 update

Following the angular material update to version 15, many of us experienced issues with CSS changes breaking. This also affected legacy code that included sticky headers. <div class="row"> <div class="col-12"> <di ...

htmlcssangularangular-material

JavaScript method to prevent users from entering numbers as the first two characters, with all subsequent characters being numbers only

I need a specific requirement for my form. The textbox field in my form is labeled "DEA License number", and I want it to only allow the user to enter alphabetic characters for the first two characters, followed by numbers afterward. I am looking to impl ...

javascriptasp.net

Transferring data between pages using HTML5 and jQuery

I'm currently developing Windows Phone 8 apps using HTML5 and jQuery. My project involves two HTML pages - the first page consists of input boxes and a button, while the second page contains controls to display the data entered on the first page. Upon ...

jqueryhtmlwindows-phone-8

What is causing the data to be altered outside of the directive scope?

I am having trouble understanding why the data is changing outside the directive in the external div. I expected it to behave the same as in the controller because the external Div is not wrapped in a directive or controller. Therefore, it should remain un ...

javascriptangularjs

The function did not execute properly, resulting in the express route returning no value

Encountering some issues with Express routes that are behaving inconsistently despite having identical code execution. The goal is to have a client application make API calls like this: async search(){ const query = this.$refs.searchInput.value; ...

javascripthtmlmongodbvue.jsexpress

How can I refresh the node server during runtime?

In my Express server, I am currently working on defining an endpoint that triggers a restart of the server automatically during runtime. Here is a snippet showcasing how this could be implemented: var express = require('express') var app = expre ...

javascriptnode.jsexpresshapi.js

The Vue EventBus does not support passing object attributes

Looking for assistance with integrating two Vue single page components. The 'Searchbar' component features a dialog box where users input data. This data is required in the 'ResultList' component for further processing. To achieve this ...

javascriptvue.jsevent-buselement-ui

Conceal the current component prior to displaying the component associated with Navlink in React Router

Currently, I am in the process of developing a single-page web application using React routing. My goal is to hide the current component before rendering the next component when a NavLink is clicked, similar to how <a href="someLink"> works in HTML. ...

javascriptreactjsreact-routerrender

Utilize Bootstrap cards to display images across the full width of the page

I am using the Bootstrap card component https://getbootstrap.com/docs/4.0/components/card/ to display an image. The issue I'm facing is that on the Bootstrap template, it adds a margin around the image. I would like the image to take up the full width ...

htmlcsstwitter-bootstrapbootstrap-4

Showing tags with varying sizes

https://i.sstatic.net/oo3MP.png Is there a better way to organize and display my content? I have an array of elements that I want to display like the example above. I attempted using lists, but it didn't work out as expected. Here's what I&apo ...

htmlcsstwitter-bootstrap-3

Gleaming R: Warning prompt or modal box input: invalid

In the process of developing a basic application, I am seeking to implement a pop-up notification for invalid inputs. By referencing the suggestion provided in #1656, I have come up with an example that introduces a visually appealing background color when ...

htmlcssrvalidationshiny

Remove an item from Firebase using React with ES6 syntax

[HELP NEEDED]Seeking solution below Encountering an issue with deleting an object from the Firebase database. I have experience with this, but for some reason it's not functioning as expected: Action: export const firebase_db = firebase.database(). ...

javascriptreactjsfirebasereact-nativefirebase-realtime-database

Can the mDNS string received through webRTC be decoded to retrieve a user's IP address?

After doing some thorough research, I came across this insightful response from a different Stack Overflow question. The problem at hand involves retrieving an mDNS string, which looks like this: abcd1234-1e1e-1e1e-1e1e-abcd1a2bc3de.local I have a genuin ...

javascriptipwebrtc

Issue with Checkbox Filtering Function [ReactJS]

I'm working on setting up a checkbox filtering feature in React. Here's what I want to achieve: User goes to the products page where all products are displayed initially. User checks a checkbox and only filtered products should be shown. If use ...

javascriptreactjs

Position a variable-height block to the bottom right corner of another element with a dynamic height

Can a block of text with an unknown height be aligned to the bottom right of a parent element with an unknown height, using only CSS? I have tried using flexbox, float, and absolute positioning, but haven't been able to find a solution. There is an a ...

htmlcss

Center JQuery within the current screen

My implementation of Jquery dialog is as follows: <body> <div id="comments_dialog"> Insert a comment <form> <input type="text" id="search" name="q"> </form> </div> .... </body> dialog = $( "#com ...

javascriptjqueryhtmlcss