flexible side-by-side alignment - adaptable grids

I am currently working on a website project that involves a ul list with responsive columns. The column width adjusts based on the window size, and I aim to center-align the text within the li element according to the new column width. If you want to view the actual page, you can check out this example:

I am exploring the idea of incorporating JavaScript to dynamically adjust the position of the li elements based on the browser window size. However, I am unsure about the implementation process.

HTML:

<div class="gridresidencial">
<ul class="img-list">


<div class="grid-item" id="q5">
  <li>
    <a href="residencial_casanamata.html">
       <figure>
        <img src="../img/mini_casanamata.jpg" alt="">
        <span class="text-content"><span><h2>CASA</h2>NA MATA</span></span>
       </figure>
    </a>
  </li>
</div>  

<div class="grid-item" id="q4">
  <li>
     <a href="residencial_casadabahia.html">
         <figure>
         <img src="../img/mini_casadabahia.jpg" alt="">
         <span class="text-content"><span><h2>CASA</h2> DA BAHIA </span ></span>
         </figure>
     </a>
   </li>
 </div>

 <div class="grid-item" id="q7">
    <li>
     <a href="residencial_cobogo.html">
      <figure>
        <img src="../img/mini_cobogo.jpg" alt="">
        <span class="text-content"><span><h2>CASA</h2> COBOGÓ </span></span>
      </figure>
      </a>
   </li>
 </div>

</ul>
</div>

CSS:

.gridresidencial {
  margin-top: calc(1.25% + 180px); 
  width:101.5%;
  padding:0;
}

@media only screen and (min-width: 1930px) {
.img-list {  float: none;columns: 4;}}
@media only screen and (min-width: 1285px) and (max-width:1930px) {
.img-list { float: none;columns: 3;}}
@media only screen and (min-width: 750px) and (max-width:1285px)  {
.img-list { float: none; columns: 2;}}

.img-list {
    margin: 0 auto;
    text-align: center;
    padding:0;
    list-style-type: none;
    width:100%;
    -webkit-column-gap: 0px; /* Chrome, Safari, Opera */
    -moz-column-gap: 0px; /* Firefox */
    column-gap: 0px;
}

li {
    display: inline-block;
    vertical-align: top;
        text-align: center;
    padding: 0px;
  margin: 0 auto;
  float:none;
  position: relative;
}

li figure {
  padding: 5px;
  margin: 0 auto;
  width:100%;
}

.img-list img{
  float: right;
  max-height:560px;
  max-width:1280px; 
  margin:0;
  width:645px;
  height: 285px;
}

@media only screen and (min-width: 1930px) {
 span.text-content { 
      float: center;
      columns: 4;
      margin-left:15px;
      opacity: 0;
    }

 span.text-content {
  color: #FFFFFF;
  cursor: pointer;
  display: table;
  height: 320px;
  margin-top:50px;
  position: absolute;
  top: 0;
  width: 100%;
}

span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-size:40px;
  font-family: "AktivGroteskStdBd";
  line-height: 0.6;
}

h2 {text-align: center;}

ul:after {
  display: table;
  clear: both;
  content: '';
}

Answer №1

It seems like you want to consistently center the items, am I correct?

If so, you can achieve this by using the following CSS:

.gridresidencial {
  width:100%;
  padding:0;
}
ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

Answer №2

Here is a suggestion you can consider:

ul.images li {
   width:100%;
}

Additionally, you may want to eliminate the margin-top property from the span.text-content class

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 various options in the dropdown menu are descending in order

I am currently facing an issue with a dropdown menu that contains the list of products offered by our company. Specifically, one of the product names, Hotel Management Solutions, is appearing on multiple lines instead of a single line in the dropdown menu. ...

Implementing autocomplete functionality using jQuery in ASP.NET with data sourced from the code-behind file

Despite the abundance of jquery autocomplete code available in this forum, I have not yet come across anything that suits my specific SharePoint/ASP.NET web page scenario. I referred to the jquery autocomplete documentation, which was helpful. However, ple ...

Obtaining a byte array using the file input method

var profileImage = fileInputInByteArray; $.ajax({ url: 'abc.com/', type: 'POST', dataType: 'json', data: { // Other data ProfileImage: profileimage // Other data }, success: { } }) // Code in Web ...

Only Chrome causing my JavaScript execution to freeze due to Ajax

When using Ajax, it is supposed to be asynchronous, but for some reason, it seems like it's either stopping or pausing my JavaScript execution and only resuming once the response is received. Here is an example of HTML value: <input value="foo" d ...

Firefox causing issues with Rails Ajax functionality

My Rails application includes an AJAX call that currently triggers a JavaScript alert message. While this functionality works smoothly on Safari and Chrome, it strangely fails to function on Firefox (across all its recent versions). I tried debugging the c ...

Error: CodeIgniter encountered an invalid argument for the foreach function. Please review the input

I've encountered some issues while working on a Codeigniter application -- I have created a function like this: function searchUnivtab() { $country = $this->input->post('countryKey'); $state = $this->input->post( ...

Adjust the position of the div so that it remains visible as you scroll

Is it possible to position an element within a container that contains a wide table with overflow property so that the element remains visible while scrolling horizontally through the table data? <div id = "mainContainer" style = "width:300px; overflow ...

What steps should I take to ensure that this modal remains persistent?

I am searching for a method to keep this modal persistent even after it appears. Currently, the user can easily close it by clicking outside of the div. <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title ...

I am currently working with three datetimepicker fields and I need to figure out a way to prevent duplicate entries in each

view image In order to avoid duplicate entries in the third row, we need to validate using jQuery as the range for the first row is already defined. I have three datetime pickers set up in jQuery. For example: ------ start-time End-time Da ...

What is the reason behind jQuery delaying the DOM update until the function is executed?

Encountering an issue with jQuery where it waits for additional javascript to finish executing before updating the DOM. In the provided code snippet, there is a delay of over 5 seconds before the h1 element gets updated after calling the SlowUpdate functio ...

Deactivate the button until the input meets validation criteria using Angular

What I'm trying to achieve is to restrict certain input fields to only accept integer or decimal values. Here's the code snippet that I currently have: <input type="text" pattern="[0-9]*" [(ngModel)]="myValue" pInputText class="medium-field" ...

AngularJS and CodeIgniter collaborating to bring server-side pagination

I am currently working on integrating pagination using AngularJS and CodeIgniter. The current implementation requires fetching all records at once. However, I aim to modify it so that the data can be retrieved one page at a time from the server during run ...

What is the best way to intentionally make a Node unit test fail when catching a Promise rejection?

When conducting unit tests with Node.js, I encountered a scenario where I needed to intentionally fail a test within a promise's catch block: doSomething() .then(...) .catch(ex => { // I need this test to fail at this point }); ...

The relationship between columns in MySQL is determined by the values they hold

I have 2 tables with the following structure: mysql> select * from customer; +-------+-------+ | name | code | +-------+-------+ | John | c1 | | Mary | c2 | | Sarah | c3 | +-------+-------+ mysql> select * from supplier; +-------+----- ...

Leveraging the power of WCF Data Service and jQuery in harmony for seamless CRUD operations

Exploring WCF data service has opened up new possibilities for enhancing web applications. I am currently experimenting with it, accessing it as demonstrated here. I am aware that the results from WCF data service can be utilized in other .NET application ...

Enhancing navigation functionality using CSS

I have two separate pages with navigation included in both. This way, it's easier to edit the navigation menu once instead of doing so on each page individually. However, I am now facing uncertainty on how to implement the 'active' class usi ...

What is the best way to transfer the search query to a table filter when working with multiple JavaScript files?

I am struggling with passing the search query from my search file to my table file. The data for my datagrid table is retrieved from a database using an API call, and the table code is in one file while the search functionality code is in another file. I h ...

Phaser 3 game app on iOS generated with Capacitor lacks audio functionality

I have developed a basic test app using Phaser 3 (written in Typescript and transpiled with rollup) and am utilizing Capacitor to convert it into an iOS application on my Mac. This excerpt highlights the key functionality of the app: function preload () { ...

Upon the initial data retrieval, everything seems to be working fine. However, when the user transitions to chatting with another user, the state value does not reset and instead shows a combination

Exploring the world of react.js and node.js, I am currently working on developing a chatting application with the integration of socket.io. The issue I'm facing is that when a user clicks on another user to chat, the previous chat messages are display ...

Should we consider the implementation of private methods in Javascript to be beneficial?

During a conversation with another developer, the topic of hacking into JavaScript private functions arose and whether it is a viable option. Two alternatives were discussed: Using a constructor and prototype containing all functions, where non-API meth ...