The challenge of responsivity in my custom lightbox design

Web Design

<div class="image-gallery">
  <img>
</div>

<div class="dark" id="photo-gallery">
  <div class="container">
    <h1>Photo Gallery</h1>

    <div class="images">
      <a href="#" data-image=""></a>
      <a href="#" data-image=""></a>
    </div>
  </div>
</div>

CSS

.image-gallery {
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  height: 100%;
  justify-content: center;
  left: 0;
  padding: 1.25rem;
  position: fixed;
  top: 0;
  width: 100%;
}

.image-gallery img {
  box-shadow: 0 0 1.25rem;
  max-height: 100%;
  max-width: 100%;
}

CodePen Link - http://codepen.io/marekkobida/pen/RaxwPR

Safari Browser (no issues)

https://i.sstatic.net/M2iFz.jpg

Mozilla Firefox Issues

https://i.sstatic.net/DL0nj.jpg

Google Chrome and Opera Challenges

https://i.sstatic.net/3TZC6.png

htmlcss

Answer №1

.image-container img {
  box-shadow: 0 0 1.25rem;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
}

Set dimensions to automatically adjust.

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 JQuery chosen dropdown experiences a visual issue when placed inside a scrollbar, appearing to be "cut

Good day, I've been using the jQuery "chosen" plugin for a dropdown menu, but I encountered an issue with it being located in a scrollable area. The problem is that the dropdown items are getting cut off by the outer div element. I have provided a si ...

javascriptjqueryhtmlcss

Building custom components in Vue.js/NuxtJS can be a breeze when using a default design that can be easily customized through a JSON configuration

Currently, I am in the process of developing a NuxtJS website where the pages and components can either have a generic design by default or be customizable based on client specifications provided in the URL. The URL structure is as follows: http://localh ...

javascriptcssjsonvue.jsnuxt.js

Exploring the ways to retrieve the returned Dynamic scope in AngularJS

There's a specific need I have - I require a single AngularJS function that can dynamically return the scope variable based on an input parameter. When it comes to controller functions, I've come across examples of how to achieve this dynamic sco ...

htmlangularjsdynamic-scope

Adjusting Bootstrap CSS Styles

After recently installing bootstrap 3.0 on my website and experimenting with it, I have a few questions. I am looking to customize certain aspects of the jumbotron (and other classes) in my personal .css file named "mycss.css". Here is the code I have add ...

htmlcsstwitter-bootstrap

Transform a cropped portrait image into a resized landscape cover using CSS

Is there a way to crop the middle part of an image and turn it into a landscape cover background using HTML and CSS? The goal is to achieve a responsive background like the one shown below: pic The background should be 100% width and about 400-500px in h ...

htmlcssbackground-image

Is it possible to eliminate the default placeholder text from Safari browser?

My goal is to design a form that includes date and time input fields. The placeholder text should move up by X pixels when the user clicks on the field. While the form appears fine in Chrome, there seems to be an issue with overlapping form fields in Safa ...

javascripthtmlcsssafaribootstrap-5

Struggling to understand the Bootstrap col-xs-8 grid system

I am trying to customize my sign-in box to only occupy 8 columns out of the available Bootstrap grid. Here's the code snippet I have so far: <div class="shadow bg-white rounded col-lg-5 col-md-5 col-sm-6 col-xs-8 tile"> However, the output is ...

htmlbootstrap-4

Incorporating RFID reader functionality into a website

I am currently facing an issue with integrating an RFID card reader into a web page. After some research, it seems that the solution involves creating an ActiveX component and using JavaScript. My question is, how can we go about building an ActiveX compo ...

javascriptactivexhtmlsmartcardrfid

Filter a div based on multiple conditions using JavaScript/jQuery

In my filtering system, I have two sections: place and attraction. When I select a place, the corresponding div is displayed according to the selected place. Similarly, when I select an attraction, only the attractions are filtered accordingly. <ul clas ...

javascripthtmljquery

Struggling to include a CSS link to the file, but encountering failure due to a space within the path

The path to the stylesheet is located at C:\Users\abc xyz\Downloads\link-to-a-stylesheet\css. The editor highlights the section after abc in green, but unfortunately, it is not functioning as expected. ...

htmlcss

Determine the size of a file in either megabytes or kiloby

I need to determine the size of a file in either megabytes if the value is greater than 1024 or kilobytes if less than 1024. $(document).ready(function() { $('input[type="file"]').change(function(event) { var _size = this.files[0].si ...

javascriptjqueryhtml

The row in the table is not reaching its maximum height

Trying to design a layout with a topbar followed by a split layout has posed some challenges. The main issue I encountered was the need for the width and height to adjust automatically based on the browser size. To address this, I attempted to use a table ...

htmlcss

Having trouble scrolling to the top in Flickr Search using AngularJS, the results are restricting my movement

I recently followed a tutorial on creating a Flickr Search App with AngularJS (https://www.youtube.com/watch?v=lvGAgul5QT4). I managed to show the search results on my page, but encountered an issue: I couldn't scroll all the way back up to the search ...

javascripthtmlcssangularjsflickr

The colgroup tag is present in the code, but strangely absent from the view source or debugger tool

In a curious twist from this question Why does Firebug add <tbody> to <table>?, I have encountered a similar issue that may lead to the same answer, but I am seeking confirmation. Within my code, there is a colgroup element that mysteriously d ...

c#htmlhtml-tablecolgroup

Is it possible to use JavaScript to extract data associated with a specific h2 class on a webpage and then present that information?

Just curious if it's feasible, not looking for actual code. For instance, say I have an h2 class called "stock-number" with a value of #NC123456. Is it possible for JavaScript to access each instance of that class, retrieve data from a different datab ...

javascriptphphtml

Can an image be inserted at the top left corner of a div's border by cropping the border?

I'm struggling to replicate a specific image design where the border cuts off within a certain distance. Despite my best efforts, I can't seem to achieve the desired cut-off effect for the border. Below is the HTML code for the quote and image: ...

htmlcss

Undefined variable 'site' error encountered in Codeigniter views

Query: I encountered an issue while running the program: undefined variable "site" in the views. The code snippet is as follows: <ul class="nav nav-pills"> <li><a href="<?php echo $site ?>/CI_timeline/index"& ...

phphtmlcsscodeigniterundefined

How can I use HTML/CSS to make text and images larger with the link tag, <a>?

I'm looking to add a feature on my website where users can hover over a picture or text that contains a link, and have the text or picture enlarge and become bigger. When the user stops hovering, I'd like the text or image to return to its origin ...

htmlcsshover

Error Found in Angular2 Console Inspection

So, when I check the webpage inspection console, I see this error: Uncaught SyntaxError: Unexpected token { at Object.<anonymous> (main.bundle.js:3885) at __webpack_require__ (polyfills.bundle.js:51) at eval (eval at <anonymous> (m ...

javascripthtmlangular

Placing SPAN elements side by side WITHOUT using the float property

Is there a way to make three spans sit side by side instead of wrapping to the next line in CSS without using float? I want all three elements to be displayed next to each other. Any alternative methods to achieve this goal would be appreciated! Thanks! ...

csshtml