What can be done to repair the gallery on this webpage?

Currently, I am experimenting with the Aria template, a free Bootstrap-based template. My goal is to utilize the gallery feature without any accompanying text. However, even after removing the text from the lightbox, the white background persists. What I simply desire is to display the image along with a close button, sans any text.

https://i.sstatic.net/C5OAL.png

Let's take a look at the code snippet for the gallery:

  <div class="element-item development">
          <a class="popup-with-move-anim" href="#project-1">
            <div class="element-item-overlay"><span></span></div>
            <img src="images/project-1.jpg" alt="alternative">
          </a>
        </div>

If you wish to see the theme in action, feel free to click here.

jquerycssbootstrap-4gallery

Answer №1

To make the necessary changes, you will need to delete the entire col-lg-4 tag and replace col-lg-8 with col-lg-12. Additionally, update the class from img-fluid to w-100.

Please refer to this link for further details.

<div class="row">
            <button title="Close (Esc)" type="button" class="mfp-close x-button">×</button>
            <div class="col-lg-12">
                <img class="w-100" src="images/project-1.jpg" alt="alternative">
            </div> <!-- end of col -->
           
        </div>

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

Communication between Python and the front-end

I am currently working on a web application that utilizes jQuery for ajax requests to communicate with PHP, which in turn interacts with a MySQL database. I now have the need to implement some machine learning functionalities using Python, specifically for ...

phpjquerypython-3.xajax

Implementing a CSS codepen within a React Material-UI component

I'm struggling to implement this effect on my material ui card component using react and makeStyles. I am having difficulty translating this effect to the cards, could someone assist me in simplifying it into a CSS code that can be used in MakeStyles? ...

cssreactjsmaterial-uicodepen

Enhance Your Data Visualization with jqplot Bar Chart Hover Feature

I am looking to add a tooltip div directly above the value of my bar chart. For example, if the bar values are around 90 and 80, on mouse-over the [value box] should appear right above the value of the current bar in the chart. Is there a way to position ...

jqueryjqplot

Callback Method Ajaxify

Just started using Ajaxify and so far it's been a great experience. However, I'm wondering if there is a callback function available that doesn't require any specific inputs in the script. I've searched around but haven't found wh ...

javascriptjqueryajaxcallback

Tips on displaying a confirmation box when the page is refreshed or closed

I need to implement a confirmation box for users who try to close the window without saving the content of a textarea within a form. Here is the code I currently have: var myEvent = window.attachEvent || window.addEventListener; var chkevent = window.att ...

javascriptjqueryhtml

Master the art of JQuery alongside building CakePHP projects with this essential guide

Currently diving into the world of CakePHP and I'm excited to incorporate JQuery for various UI functions such as forms. Seeking recommendations on the top JQuery book that will help me learn and effectively implement it with CakePHP. I've atte ...

jquerycakephp

What are some creative methods to apply CSS styling to material-table in React?

I've spent several days searching for a solution without any luck. My project involves using material-table in React, and I am struggling to apply CSS styles to the headers (columns) and content (such as changing font size, adjusting width, and creati ...

cssreactjsmaterial-uimaterial-table

On successful completion of the $.post request, hide a group of div elements with a fade-out

I need help fading out a set of div elements based on the response received from an ajax call. The current code I have doesn't seem to be doing what I intended. Can someone point out where I might be going wrong? $('.view_result').click(fu ...

jqueryajaxfade

The rectangular shape extending beyond the boundaries of the canvas

I'm currently working on creating a rectangle within a canvas element. I've set the width of the div to match the width of the rectangle, but unfortunately, the rectangle is extending beyond the left side of the canvas container. My goal is to co ...

javascripthtmlcssreactjscanvas

Are there any plugins available for creating a progress bar using jQuery?

Looking for a Progress Bar jQuery Plugin Is there a jQuery plugin available that can dynamically adjust the length of a progress bar depending on a number input? Ideally, as the number decreases, the progress bar should also become shorter and vice versa. ...

jqueryprogress-bar

maximum number of results in google custom search limit

I'm trying to retrieve the top 40 results from the Google API, but when I limit the result using the code below, it doesn't seem to work. How can I achieve getting the top 40 results with the Google API? <script> (function() { ...

javascriptjquerygoogle-custom-search

Exploring the jSignature feature in jQuery and Laravel models

I'm looking to retrieve the model (Offer) signature using jQuery. When I alert only the model, everything works fine. alert( JSON.stringify(<?php echo $offer; ?>) ); However, when trying to access just the $offer->signature like this alert( ...

jquerylaravel

Differences in SVG rendering between Chrome and Firefox

I am eager to create a diagram on my website using SVG. To ensure the diagram is displayed in full screen, I am utilizing availHeight and availWidth to determine the client screen's height and width, then adjust the scaling accordingly. My current sc ...

javascripthtmlcssgoogle-chromesvg

Creating an external JavaScript and CSS file for date picker in Eclipse can be done by following a few simple steps. By creating separate files for the

I am using the following javascript and css styles: <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" /> <script src="http://ajax.googleapis.com/ajax/libs/jq ...

javascriptjqueryhtmlcsseclipse

Add Content to Textbox by Clicking

In my current setup, I have a variety of buttons that, when clicked, should add the text from the button to a text box. Each time a button is clicked, I want the text to be appended to whatever is already in the input field. Current Approach $('#js- ...

javascriptjqueryjquery-ui

Utilizing Javascript to Extract Data from Twitter Json Files

Can someone provide assistance with parsing JSON feed text retrieved from Twitter? I am looking to access and apply style tags to elements like the link, created date, and other information. Any tips on how I can achieve this task successfully would be g ...

jquerycssjsontwitter

Is there an issue with the jQuery ajax function when it comes to sending the RegistrationId to our server?

Beginning to work with the pushNotification service for my Android app, I successfully received a registration ID from the GCM server and attempted to send this ID to our server using a jQuery AJAX function. My intention was to send this ID after the user ...

javascriptjqueryajaxpush-notification

How to Ensure the Final Column in an Angular Bootstrap Row Occupies the Remaining Available Space

Within my Angular5 application, there is a container component used to display a row with multiple components arranged in n columns, as shown below: <div class="row mx-5 my-5 h-75 w-80"> <div class="col-md-4 col-lg-4 m-0 p-0" *ngIf="advanc ...

cssangulartwitter-bootstrap-3responsive-designbootstrap-4

Display updated text on hover over button panel

Is it possible to achieve the following using only CSS without any JavaScript? The desired outcome is a div containing two font awesome icons aligned to the right side. Specifically, I am looking for: - Icon of a pen that reacts on mouse hover - Icon o ...

htmlcssbuttonhover

The most effective way to code overlapping html buttons

Can you help me figure out how to make clickable areas on my HTML5 web page without them overlapping? Here's what I'm trying to do: I want the red, blue, and green areas to be clickable links, but not overlap. For example, when clicking on the f ...

javascriptjqueryhtmlcsssvg