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: '';
}