Issue with Nivo Lightbox: image not properly centered or resizing correctly

Whenever an image is clicked, it opens in the Nivo lightbox. This feature used to work flawlessly, but recently, it seems to be experiencing issues. The image should be centered and resize responsively to stay in the center. (For example, it worked correctly here: )

All of a sudden, this functionality is not working as expected. I upgraded from v1.0 to v1.2 of the .js library for the lightbox, but even reverting back did not resolve the issue. It appears that there may be some CSS or theme changes causing the problem with the lightbox?

I have also noticed scrollbars appearing when the screen is resized to a smaller size, which should not be happening.

I came across a rule that, when hidden, seemed to affect the alignment of the images, but I'm struggling to find a solution to fix all the issues I am encountering:

.nivo-lightbox-effect-slideLeft.nivo-lightbox-open .nivo-lightbox-wrap, 
.nivo-lightbox-effect-slideRight.nivo-lightbox-open .nivo-lightbox-wrap {
    transform: translateX(0px);
}
cssresponsive-designlightboxnivo-slider

Answer №1

originating from the nivo-lightbox.css file, I made a modification (set a fixed width) to the following

.nivo-lightbox-content {
margin-left:auto;
margin-right:auto;
width: 800px;
height: 100%;
}

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

Scrolling with animation

While exploring the Snapwiz website, I came across a captivating scroll effect that I would love to implement on my own site. The background picture changes seamlessly as you scroll, with the front image sliding elegantly into view. A similar type of scro ...

javascriptjquerycsshtmljquery-ui

Is there a way to have my MUI Typography component display a unique image cursor when hovered over?

After some testing, I found that setting the cursor to cursor: pointer works perfectly fine. However, my goal is to use a custom image as a cursor. The image is saved in both my src and public folders, but I seem to be struggling with the syntax when using ...

javascriptcssreactjsmaterial-ui

Angular Markdown Styling: A Guide

Currently, I am using Angular and Scully. I would like to add style to the image in a markdown file within Angular, but I am unsure of how to accomplish this task. The image is currently displaying too large. Can anyone provide me with useful advice on how ...

cssangularsassmarkdownscullyio

Issue with nextElementSibling not applying CSS style

My current issue revolves around a button that is designed to open or close a collapsible div. The HTML structure of this element looks like the following: <div class='outer-collapsible'> <button type='button' class='col ...

javascripthtmlcss

Transition effects should be applied solely to the foreground text color, not to the background image

Is there a way to specifically apply the css3 transition effect only to the text color? Imagine having a readmore class with a transition effect defined like this: .readmore { colour: red; -webkit-transition: all .3s ease-out; -moz-transition ...

htmlcss

Isotope animation glitches causing malfunction

I've been experimenting with CSS3 transitions on isotope items, but I'm encountering some strange behavior. My goal is to achieve a fading effect on the items, similar to this example: . Thank you in advance! Here's what I have so far: http ...

javascriptjquerycss

CSS Grid: Dividing items equally based on the number of items present

Currently, I am delving into grid layouts in CSS and experimenting with code to divide a row. Here is the snippet I am playing around with: .grid-sample { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: 4rem; padding: 0 5rem ...

csscss-grid

Transition not influencing the scale property when activating a class

My modal is not scaling in and out properly when I toggle the 'active' class. It either fully scales out or scales in without any transition. Example: const openPopupButtons = document.querySelectorAll('[data-popup-target]'); const ...

javascripthtmlcssfrontend

Attempting to design a customized tooltip for an SVG element embedded within the HTML code

Recently, I've delved into Js with the goal of creating an interactive pronunciation guide using inline svg. If you're curious to see what I've done so far, check it out here. My current focus is on incorporating basic styled tooltips that ...

javascriptcsssvghovertooltip

Exploring the possibilities of CSS grids within the Wordpress platform

After successfully building my website, I am now in the process of converting it into a customizable wordpress theme. One challenge I am facing is integrating a dynamic gallery using CSS grid. The goal is to upload photos, videos, and gifs in Wordpress and ...

phpwordpresscsscss-grid

What is the best way to display an icon and text side by side in the header of a Phonegap app

____________________________________________________________ | logo_image page_Title | ------------------------------------------------------------ I am looking to create a header for my PhoneGap app similar to the one sh ...

htmlcsscordova

What is the best method to make a hyperlink within an IFrame open in a new window?

Let me share the code I've been working on: <!DOCTYPE html> <html> <head> <base target="_blank"> </head> <body> <div style="border: 2px solid #D5CC5A; overflow: hidden; margin: 15px auto; max-width: 800px; ...

javascriptjqueryhtmlcssiframe

Could you please advise me on where I should apply line-height in order for it to work properly?

My div is structured like this: https://i.sstatic.net/3fUNs.png I am trying to decrease the spacing between the lines. I attempted adding a line-height attribute to both the parent div and one of the label elements like this: <div class="row" ...

htmlcsswhitespaceline-height

Center the span in CSS by setting its position to absolute

I am trying to create a span element positioned as absolute inside a div. The div has top and left values set. When the user inputs text, the span expands with the given text towards the right to contain it. However, I would like it to grow symmetrically o ...

javascripthtmlcss

Ways to avoid Bootstrap from collapsing every submenu when selecting just one submenu

Having just started learning HTML and CSS, I wanted to create a vertical navigation bar with sub-sub menus. After some research, I found a code snippet that I modified to suit my needs. Below is the updated code: #main-menu { background-color: #2E30 ...

htmlcssbootstrap-4

Utilizing the Flex property on the parent div ensures that all child elements receive an equal width

I am currently working on a messaging application and I want the layout to be similar to Twitter or Whatsapp. Specifically, I want the messages from the person the user is chatting with to appear on the left side, while the user's own messages should ...

javascripthtmlcssuser-interfaceflexbox

What is required to create a basic application that can function offline while featuring an HTML/CSS user interface?

Newbie inquiry: I am interested in creating a small application that can run offline on a desktop computer. The amount of data to be saved is minimal, so I have the option to use a file or some type of database. However, my main question is: What languag ...

javascripthtmlcss

ways to change the font color style of a header element using css

Below is the HTML code that I need to work with: <h5 class="post-title">Welcome To The Site</h5> I am attempting to change the font color to red using this CSS: .post-title{ color:red ! important; } However, my attempt was unsuccessful ...

htmlcss

What is the best way to add margins to the elements in a row without disrupting the row layout?

I'm trying to figure out how to add margin between elements in my code snippet without breaking the row. You can view the fiddle here. Although a similar question has been asked on Stack Overflow here, I wasn't able to find a solution that works ...

cssbootstrap-4

Create a custom CSS style to replace the default jQuery hide() function

HTML <div class="adm-input" <?php if(!empty($admin_fee) || $admin_fee != "") echo "style='display:block'"; ?> id="fees-input"> <label>Admission Fees(<i class="fa fa-inr"></i>)</label> <div class="in ...

javascriptjqueryhtmlcss