Mobile Devices Image Gallery Optimization

Just starting out with HTML, CSS, Bootstrap, and JavaScript and I've put together this gallery. It looks good, but I need to optimize it for mobile devices and smaller screens. Any suggestions on what I should change?

For items #myImg4, #myImg5, #myImg12, #myImg13, they are vertical images placed differently due to the design.

PC preview: https://i.sstatic.net/DLSwS.jpg

And this is how it looks on a smaller screen

By the way, I'm aware that the code is not the best, but I've only been coding for 4 days, so bear with me!

I really appreciate all responses!!!! CSS code for the gallery is:

.gallerycontent {
  margin: 10px 200px 40px 100px;
}

.galleryhr {
  border-top: 2px solid #FF0000;
  width: 100;
}
.galleryhr h1 {
  color: #000;
  text-align: center;

}

/* Style the Image Used to Trigger the Modal */
#myImg , #myImg2 , #myImg3 , #myImg6 , #myImg7 , #myImg8 , #myImg9 , #myImg10 , #myImg11 , #myImg14 , #myImg15 , #myImg16 {
  margin-left: 20px;
  max-height: 200px;
  height: 100%;
  margin-bottom: 10px;
  cursor: pointer;
  transition: 0.3s;

}

#myImg4 {
  max-height: 414px;
  height: 100%;
  position: absolute;
  top: 165px;
  right: 186px;
  cursor: pointer;
  transition: 0.3s;
}
#myImg5 {
  max-height: 414px;
  height: 100%;
  position: absolute;
  top: 165px;
  right: 511px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg12 {
  max-height: 414px;
  height: 100%;
  position: absolute;
  top: 590px;
  right: 511px;
  cursor: pointer;
  transition: 0.3s;
}
#myImg13 {
  max-height: 414px;
  height: 100%;
  position: absolute;
  top: 590px;
  right: 186px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}
#myImg2:hover {opacity: 0.7;}
#myImg3:hover {opacity: 0.7;}
#myImg4:hover {opacity: 0.7;}
#myImg5:hover {opacity: 0.7;}
#myImg6:hover {opacity: 0.7;}
#myImg7:hover {opacity: 0.7;}
#myImg8:hover {opacity: 0.7;}
#myImg9:hover {opacity: 0.7;}
#myImg10:hover {opacity: 0.7;}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 50%;
  max-width: 1000px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }

}

Answer №1

One solution could be utilizing the Bootstrap framework (https://getbootstrap.com/). You can implement a layout like the following in Bootstrap v3:

<div class='row'>
  <div class='col-lg-12'>
     <div class='col-lg-8'>
      <img class='img-responsive col-lg-4' src='image/path'/>
      <img class='img-responsive col-lg-4' src='image/path'/>
      <img class='img-responsive col-lg-4' src='image/path'/>
     </div>
     <div class='col-lg-4'>
      <img class='img-responsive col-lg-6' src='image/path'/>
      <img class='img-responsive col-lg-6' src='image/path'/>
     </div>
  </div>
</div>

By employing this structure, your layout should also be visually appealing on mobile devices.

Answer №2

The issue at hand is being overly precise with positioning. Absolute positioning doesn't allow items to adapt to their surroundings. They lack the awareness to adjust their size or flow to fit the layout.

It might be time to explore Responsive Web Design. There are several approaches you can take to achieve this.

Start with these options in sequence.

Enjoy the journey!

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

Guide to binding input type= 'email' in Knockout.js

My project utilizes KnockoutJS with MVC. I am seeking assistance on determining whether an emailId is valid or invalid. Based on this validation, I need to dynamically enable/disable a button and set an error title for the corresponding textbox. Below is ...

Limiting the data obtained from the API to extract only the desired values

Using an API, I am retrieving customer information and displaying it in the console. The code snippet used for this operation is: if (this.readyState === 4) { console.log('Body:', this.responseText); } }; This returns a JSON object with v ...

When using AngularJS $http to send an object as a JSON key to a Spring controller, the returned value

I am attempting to transmit a json object from javascript to the Spring controller. My method of choice is using angularJs $http post for this. The issue arises when I send the key as object, with the lastName showing up as null. Strangely, if I send the s ...

I'm curious, what is the optimal method for arranging a json object based on an index contained in each of its properties?

I'm working with an array of objects, looking like this myArray = [ { id: 3, data: foo }, { id: 7, data: bar } ] However, I would like to transform it into the following structure transformedArray = { 3: ...

Can Javascript (PWA) be used to detect fake GPS or mock GPS in applications?

Looking for a solution to prevent users from using Fake Location tools in my PWA application that gathers absence location data. Is there a method or package in JavaScript to detect the presence of Fake GPS installed on the device? ...

What is the procedure to incorporate login credentials into the source of an iframe?

Is there a way to pass user auto login in the src URL? <iframe src="https://secure.aws.XXX.com/app/share/28228b0ccf0a987" width="1060px" height="1100px"></iframe> I attempted to achieve this, but it still shows the login screen <ifr ...

Encountering difficulties in fetching data with formData in nextJS

Exploring the realm of NextJS and delving into server side actions. I'm facing a challenge with this specific request. import { revalidatePath } from "next/cache"; export async function submitIPCR(prevState: any, formData: FormData) { / ...

Eliminate any properties with values that exceed the specified number in size

:) I'm trying to create a function that removes properties with values greater than a specified number. I've searched through multiple resources like this question on how to remove properties from a JavaScript object and this one on removing pro ...

Python script for extracting content from web pages that are loaded dynamically

I am facing an issue with extracting content from a webpage on my website. Despite trying to use selenium and clicking buttons, I have not been successful. #!/usr/bin/env python from contextlib import closing from selenium.webdriver import Firefox import ...

Can the lazy load script dependent on jQuery be utilized before the jquery.js script tag in the footer?

After receiving HTML from an AJAX callback, I noticed that there is a script tag for loading code that uses jQuery. However, I consistently encounter the error of jQuery being undefined. All scripts are connected before the closing </body> tag. Is ...

Having trouble with Angular minification not properly updating templates?

As a newcomer to angular development, I am currently working on creating components for AEM 6.2 using angular and utilizing gulp to minify the js files for all the components. In my gulpfile, I have set up the following configuration: var uglify = require ...

Dynamically align text in the center of an image, vertically

I'm trying to create a hover effect where an image and text are displayed in the center of the image when someone hovers over it. Here is how the HTML looks: <article> <div class="entry-content"> <a href="http://www.linktopost.com"> ...

Navigating rows in a Kendo Grid using buttons (Starting, Previous, Next, Ending)

Looking for help with navigating rows on a Kendo-Grid. I have four Buttons - First, Previous, Next, and Last. The goal is to highlight the selected record on the grid when a button is clicked. However, I'm struggling with making the Kendo-Grid highlig ...

The image will remain hidden until it is fully loaded and ready to be displayed

I am currently working on a script that involves displaying a loading icon until an image is fully loaded, at which point the loading icon should disappear and the image should be shown. Unfortunately, my current code is not working as intended. Here is a ...

Is there a different method I can utilize to create a conditional statement for assigning a value in JavaScript?

I have this code snippet that seems a bit unclear to me: if (!app.config.admin.examStatusId) { app.config.admin.examStatusId = exam.examStatus.dataPlus[0].id; } Do you have any suggestions on how I could rewrite this more clearly without using an if s ...

Spacing applied to content within a fresh Vue application

Having been assigned the task of developing a Vue page for my team, I am facing an issue with a persistent white border surrounding the entire page. <script setup lang="ts"> </script> <template> <body> <div>&l ...

A guide to mastering the art of descending using three distinct class types

My script is functioning properly for a single class, but it fails to work for multiple classes with the same purpose. I attempted to transfer from div (#panel) to class (.panel) as I am using several classes. However, this adjustment did not resolve the i ...

Generating PNG images with text using Node.js

I am currently working on generating a PNG file to be sent to clients through HTTP as an image/png response type. This new file will be created by combining 3 base PNG files and inserting custom text in the center of the image. Unfortunately, I have not ...

Failure to override prototype method

Why isn't the code `foo` displayed in the console? I expected the `foo` method in the child class to override the parent class. Why did that not happen? function parent(){ } parent.prototype.foo = function(){ console.log('foobar'); }; ...

Conditionally displaying an input model in Vue.js using v-if

Just starting to learn vue.js and I'm looking to display table data. My idea is that when the table is in display mode, it should only show the data. However, when I click on the edit button of a table row, I want that specific row to switch to edit m ...