What is the best way to ensure my images are centered when transitioning to full screen mode?

While working on my site with a grid of images, I noticed that the h1 element centers itself when I go into full screen mode, but the grid of images does not. It seems like the grid is not responsive. How can I ensure that the grid of photos stays centered when going into full screen mode? Any help is appreciated.

Here is the code I am currently using

<!DOCTYPE HTML>

<html>
<head>
<title>*****club</title>

<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div id="banner" align="center" height="50">
<h1>*****CLUB<span>.urmom</span></h1>
</div>

<div id="nav" align="left" width="100">
<p><a href="About">About</a></p>
<p><a href="Contact">Contact</a></p>
<p><a href="Next Party">Next Party</a></p>
</div>


<ul id="pics" align="center" width="750" class="opacity" cellspacing="0">
<li><a href="1"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
<li><a href="1"><img src="eve.png" height="250" width="250" class="opacity"></a></li>
<li><a href="1"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
<li><a href="2"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
<li><a href="2"><img src="eve.png" height="250" width="250" class="opacity"></a></li>
<li><a href="2"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
<li><a href="3"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
<li><a href="3"><img src="eve.png" height="250" width="250" class="opacity"></a></li>
<li><a href="3"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
<li><a href="4"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
<li><a href="4"><img src="eve.png" height="250" width="250" class="opacity"></a></li>
<li><a href="4"><img src="natasha.png" height="250" width="250" class="opacity"></a></li>
</ul>


</table>
</body>


</html>




  /***********
   Banner
   **********/


   @font-face {
   font-family: blackout;
   src: url('BlackoutMidnight.ttf')
   }

  h1 {

  color: white;
  font-family: blackout;
  font-size: 7em;
  position: relative;
  top: -40px;
  letter-spacing: 0.06em;
  }

  h1:hover {
  color: yellow;
  }

  h1 span {

  font-size: 0.2em;
  }


   /**********
   Grid Template
   ***********/
 ul {
 width: 750px;
 position: relative;
 left: 200px;
 list-style: none;
 }


  /**********
  Pics Position
  ***********/
 li {
 float: left;
 padding: 0px;
 margin: 0px;
 display: block;
 }

 img {
 display: block;
 float: left;
 }


  /*********
  Hover Effects
  *********/
  img.opacity {
opacity: 0.65;
filter: alpha(opacity=65);
}   

  img.opacity:hover {
opacity: 1;
filter: alpha(opacity=100);
}

  /********
  Sidebar style
  ********/
 a {
text-decoration: none;
color: white;
font-family: blackout;
font-size: 1.3em;
}

p {
position: absolute;
left: 30px;
top: 245px;
letter-spacing: 0.1em;
}

p:nth-child(2) {
position: absolute;
left: 30px;
top: 360px;
}

p:nth-child(3) {
position: absolute;
let:30px;
top: 465px;
}


p a:hover {
color: yellow;
font-size: 2em;
}

Answer №1

To ensure your UL has the correct alignment, consider adding an automatic margin like this:

ul {
 width: 800px;
 position: absolute;
 left: 250px;
 list-style: none;
 margin: 0 auto;
 padding:0;
}

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

Issue encountered while attempting to remove a row from a table (JavaScript)

I'm encountering an error when attempting to delete a table row: "Uncaught ReferenceError: remTable is not defined index.html:1:1". When I inspect index.html to identify the issue, I find this: remTable(this) This is my code: const transact ...

CSS filter for Internet Explorer

Can this CSS class be made to work in Internet Explorer 11? .inactive { filter: contrast(0.5) sepia(100%) hue-rotate(116deg) brightness(1.2) saturate(0.28); } I attempted to implement the SVG grayscale filter but it was unsuccessful, causing issu ...

Access a folder in JavaScript using Flask

I need to specify a directory in a script. $images_dir = '{{url_for('.../pictures')}}'; In my flask application directory structure, it looks like this: Root -wep.py -templates -gallery.html -static -pictures The images are stored ...

A Challenge with Session Variables in Internet Explorer 8 and Classic ASP

I run a website that has a stock management system with a table displaying stock and inventory information. When the "images" link is clicked, the Session variable for images switches between "show" and "hide" and then reloads the page with the updated va ...

Variables are losing their way in the vast expanse of self-submitting

I have a form that needs to be submitted on the same page (index.php) and I want to capture the entered information as a JavaScript variable. <?php $loginid = $_POST[username] . $_POST[password]; ?> Here is some basic code: <script> var pass ...

Strange Behavior of Anchor Tags

I've been struggling with my anchor tag not working properly. The desired URL is localhost/VShroff/home/about.php, but it keeps changing to localhost/about.php without redirecting. I've spent a long time trying to figure this out. Here is the HT ...

There was a SyntaxError that caught me by surprise in my Javascript code when it unexpectedly encountered

I have been encountering an error in my code consistently, and I am struggling to comprehend why this is happening. The problematic area seems to be in line 29 of my Javascript file. HTML <link href="Styles12.css"; type="text/css" rel="stylesheet"> ...

Submitting Angular 4 Form Reset Sends Data to Server

I am facing an issue with my HTML form: <form class="row" name="powerPlantSearchForm" (ngSubmit)="f.valid && searchPowerPlants()" #f="ngForm" novalidate> <div class="form-group col-xs-3" > <label for="powerPlan ...

What are the steps for implementing a two-column layout in reveal.js?

When creating my slides using reveal.js, I write them in Markdown code. I am now looking to present my content (text, bulleted lists, or images) in a traditional two-column text layout. While I am open to a more complex initial setup, I want to ensure that ...

The blur() function in -webkit-filter does not seem to function properly in Vue.js

I'm having trouble implementing the -webkit-filter: blur() property. I tried using "filter" instead, but it still isn't working. Could this be a limitation of Vue.js or are there any other solutions available? <template> <div class=&qu ...

In what ways can CSS be used to create a smoother edge effect on images?

After attempting to add an image to my website, I noticed that its edges appear quite rough. https://i.sstatic.net/Xol9R.png(Note: In the image above, you can observe the jagged surface around the berry). This issue arose when I eliminated the background ...

The hamburger icon is not visible on smaller screens when using the Bootstrap 5 navbar

'The stylesheets for Bootstrap CSS and JS have been included in the file. The content shows up fine with default colors, but not when I customize them.' ''' <li class="nav-item"> <a class= ...

Extraction of data post logging into the webpage (modem authentication page)

I am currently working on a project that involves extracting data from a specific webpage. However, in order to access the data I need, I first have to log in to the website. After trying out different scripts and searching for solutions online, I managed ...

Guide on aligning text to the center in the navigation bar

I am currently experimenting with a dropdown navigation bar using pure CSS. However, I am facing issues with text alignment as it only aligns the dropdown text. Setting left: 50% and right: 50% does center the text, but it doesn't cover the width of m ...

Browsing through the last items on a webpage

I have set up a jsfiddle that explains itself quite well: http://jsfiddle.net/nt7xzxur/ with the following smooth scrolling code: function smoothScroll(hash) { $('html, body').animate({ scrollTop: $(hash).offset().top }, 750); By clicking o ...

Unable to Change Color of Buttons in Jquery Mobile

Utilizing JQuery mobile for my application. <input data-mini="true" data-inline="true" data-theme="d" value="Login" type="submit" /> When clicking the button in iOS, the color does not change immediately. It only changes when the button is held for ...

Having issues with the toggle display button functionality not working properly in Angular when using click()

One of the files in my project is named server.component.ts and another is named server.component.html. This is how my server.component.ts file is structured: import { Component } from '@angular/core'; @Component({ selector: 'app-server& ...

Using HTML and jQuery to create a table with buttons to add or remove rows is a common practice. However, there

I have created a simple table with an "Add Row" button. Each new row has a "Remove" button. However, I am facing an issue in binding the 'click' event for the class 'remove'. Here is the code snippet: <script src="https://ajax.googl ...

What are the potential ways in which an html IMG tag can disrupt the functionality of this

For years, I have been using this form code without any issues. The code functions perfectly and all the tags are correct. However, whenever I include an image tag, it displays a failure message and prevents the mail function in PHP from working. The hea ...

Webpage not resizing when WebView orientation changes

While developing my android app, I encountered an issue with the WebView. When I am at the very top of the WebView and switch my phone to landscape mode, the webpage does not resize properly to fit the screen. It only takes up half of the screen. However, ...