Creating a dynamic grid design with images using the <ul><li></li></ul> HTML tags

Trying to create a responsive grid of images that adapts to changes in browser size.

Is there a way to achieve this using a list?

Ideally, I want the images to be evenly spaced in rows. For example, if there are three rows of four images on top and one row of three images at the bottom, it would be best if the row of three could be centered to avoid a 'missing square' in the layout.

Currently, the setup works well for mobile devices, but I want to scale it up for desktop and tablet use.

.main{
width:22.5rem;
margin: 0 auto;
position: relative;

}

.interest {
width: 80%;
margin: 0 auto;
text-align: center;
}

.interest li {
float: left;
margin: 5px;
width: 5.375rem;
height: 6.5rem;
line-height: 70%;
}

.interest img {
width: 5.375rem;
height: 5.375rem;
}

.interest a {
margin: 0 auto;
width: 5.375rem;
height: 1rem;
font-size: .75rem;

}

.interest a:hover{
color: lightyellow;
}
<div class="main">

<div class="interest">

<ul>
<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing thing</a></li>
<li><a href="#/thing"><img class="portal" src="img/thing.svg">Crime/<br>thing</a></li>
<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing</a></li>
<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing</a></li>
<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing</a></li>
<li><a href="#/thing"><img class="portal" src="img/thingL.svg">Gun thing</a></li>
<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing/Safety</a></li>
<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing</a></li>
<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing</a></li>
<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing Rel</a></li>
<li><a href="#/thing"><img class="portal" src="img/Jthing.svg">Jobs/Economy</a></li>
<li><a href="#/thing"><img class="portal" src="img/thing.svg">Quality of thing</a></li>
<li><a href="#/thing"><img class="portal" src="img/thing.svg">Reproduction</a></li>
<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing</a></li>
<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing Services</a></li>
</ul>

</div>

</div>

htmlcss

Answer №1

After following the advice of @Raphael Disanto, I was able to solve this issue using flex boxes.

Currently, the code successfully reorganizes the images based on changes in the window size. The next step is to implement specific image scaling so that the images not only change position relative to the screen size but also adjust their size accordingly.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {

  padding: 0px;
  width: 130px;
  height: 150px;
  margin-top: 10px;
  
  line-height: 10px;
  color: white;

}

.flex-item img {
    -webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
width: 70%;

}

.flex-item p {

}

.flex-item a {
  font-weight: bold;
  line-height: 15px;
  font-size: 1em;
  text-align: center;
  -webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
/*  line-height: 100px;
*/}

.flex-item a:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}
<div>
<div class="flex-container">
<div class="flex-item">
<a href="#/civilLiberties"><img src="img/CIVIL_LIBERTIES.svg"></br>Civil Liberties</a>
</div>
<div class="flex-item">
<a href="#/crimeAndPunishment"><img src="img/CRIME_AND_PUNISHMENT.svg"></br>Crime/<br>Punishment</a>
</div>
<div class="flex-item">
<a href="#/education"><img src="img/EDUCATION.svg"></br>Education</a>
</div>
<div class="flex-item">
<a href="#/energy"><img src="img/ENERGY.svg"></br>Energy</a>
</div>
<div class="flex-item">
<a href="#/environment"><img src="img/ENVIRONMENT.svg"></br>Environment</a>
</div>
<div class="flex-item">
<a href="#/gunControl"><img src="img/GUN-CONTROL.svg"></br>Gun Control</a>
</div>
<div class="flex-item">
<a href="#/healthSafety"><img src="img/HEALTH-SAFETY.svg"></br>Health/Safety</a>
</div>
<div class="flex-item">
<a href="#/immigration"><img src="img/IMMIGRATION.svg"></br>Immigration</a>
</div>
<div class="flex-item">
<a href="#/infrastructure"><img src="img/INFRASTRUCTURE.svg"></br>Infrastructure</a>
</div>
<div class="flex-item">
<a href="#/internationalRelations"><img src="img/INTERNATIONAL-REL.svg"></br>International Rel</a>
</div>
<div class="flex-item">
<a href="#/jobsEconomy"><img src="img/JOBS-ECONOMY.svg"></br>Jobs/Economy</a>
</div>
<div class="flex-item">
<a href="#/qualityOfLife"><img src="img/QUALITY-OF-LIFE.svg"></br>Quality of Life</a>
</div>
<div class="flex-item">
<a href="#/reproduction"><img src="img/REPRODUCTION.svg"></br>Reproduction</a>
</div>
<div class="flex-item">
<a href="#/taxes"><img src="img/TAXES.svg"></br>Taxes</a>
</div>
<div class="flex-item">
<a href="#/socialServices"><img src="img/Social-Services.svg"></br>Social Services</a>
</div>
</div>
</div>

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

Thickness of Border in Bootstrap Cards

I've been attempting to include a thicker border around the entirety of my Bootstrap 4 card. Despite specifying a thicker border, nothing seems to change. Below is a snippet of the code I'm working with: <div class="container"> <di ...

cssbootstrap-4

Flexslider doesn't adjust the height of the viewport when displaying a shorter image in the slideshow

Is Flexslider not resizing its viewport height according to the current image on your site? The fixed height seems to be causing blank white space under shorter images. Are you inadvertently overriding Flexslider's responsive height function? Is there ...

htmlcssflexslider

chosen=chosen based on data from mysql database

Currently, I'm developing my own CMS that allows users to add and update their projects. While the adding function works smoothly, the updating process also functions properly. However, a problem arises when I click on a project (retrieving informatio ...

phphtmlmysql

Creating an illustration with HTML5 from an image

Is it possible to draw on an image by placing a canvas on top of it? I am familiar with drawing on a canvas, but I am facing an issue where clicking on the image does not trigger the canvas for drawing. How can I resolve this? This is how my HTML looks: ...

javascriptjqueryhtmlhtml5-canvas

Having issues with jQuery append() function not working when concatenating strings

(See complete code below) This specific part of the code $('#' + id).parent().append('<div id="pop-up">hello</div>'); functions correctly. However, when I attempt to use this alternative approach $('#' + id).p ...

jqueryhtmlappendstring-concatenation

adjusting the size and positioning of an image within a parent div using React

Hey everyone, I'm a newcomer to the world of React. Currently, I'm working on a website and everything seems to be falling into place nicely. However, I've encountered a little hiccup. My goal is to write code within my SCSS folder that will ...

cssreactjsnext.js

Leveraging webpack for CSS bundling

I'm currently working on bundling some NPM modules using webpack instead of utilizing a CDN. While I've successfully managed to integrate the .js files, I'm facing challenges with including the .css files for these modules. One example is ...

javascriptcssnode.jsnpmwebpack

Centering <th> elements is key for achieving a visually appealing print layout

Is there a way to center align the header and body of a table when printing it? I am using datatable. Here is how it currently looks: Check out this screenshot I have tried adding classes to the th tags in the HTML table, but they still appear aligned t ...

htmlcssajaxdatatable

An unusual CSS phenomenon with z-index

I've encountered a peculiar issue with my z-indexing. I have an image positioned relatively with a z-index of 1, and it should be above my navigation that is positioned absolutely with a z-index of -1. The problem is that upon page load, the image ap ...

htmlcss

Transmit a parameter from a JavaScript code to a Python script

I am using a python script to execute queries in an Oracle Database by passing arguments. prov.py #!/usr/local/bin/python2.7 import sys import argparse import cx_Oracle import json import cgi import cgitb cgitb.enable() lst_proveedores=[{}] conn_str = & ...

javascriptpythonhtmlajax

Tips for resolving the issue of encountering the error message "Cannot POST /" while transitioning between different websites

Forgive my lack of knowledge, I'm still in the learning process :) I am attempting to navigate from an HTML website to a React-built website by clicking a button. The first website is a simple HTML page, while the destination website is more complex a ...

javascripthtmlnode.jsreactjs

The functionality of the combobox in Vuetify differs from that of an input field

I have implemented Vuetify and am using its combobox component for search functionality on my website. However, I have noticed that the text value in the combobox only gets added to the watcher when the mouse exits the field. This behavior is not ideal f ...

javascripthtmlcssvue.jsvuetify.js

Having trouble incorporating autocomplete search results into an HTML table using Jquery, Ajax, and JSP

My current project involves an App that utilizes AJAX with jQuery to communicate with a Spring-boot REST controller. While the app is functional, I am facing difficulty in displaying the search results neatly within HTML tables. result Here is a snippet ...

javascriptjqueryhtmlajaxspring-boot

Unable to navigate through select2 dropdown if fixed div is present

I am facing an issue with select2 in my fixed div popup that acts like a modal. The problem is that when the select2 dropdown is open, I am unable to scroll the div until I close the dropdown. This becomes problematic on smartphones because the keyboard e ...

javascriptjqueryhtmlcssjquery-select2

My HTML and CSS design is not displaying correctly on mobile devices

Currently, I am in the process of utilizing a free website template. However, I am facing an issue with adjusting the background image. Is there anyone who can provide some guidance on resolving this particular problem? I would be happy to share the code ...

htmlcssmobile

html input type called array named AmountMap[1] is unable to be configured with <input type="textbox" size="15" name="amountMap[1]" value="0" >

**Having trouble setting the value of an HTML input type named like an array AmountMap[1] <input type="textbox" size="15" name="amountMap[1]" value="0" > When trying to set amountMap[1].value='10', ...

javascripthtmljquery

Making a switch from one image to another - JavaScript

I need a solution to swap out an image that is used in multiple locations on a webpage. Consider this sample HTML page: <html> <head> </head> <body> <img id="1" src="example.com/img/1889.png"> <d ...

javascripthtmlcss

Changing the caret position in a contenteditable div using HTML React

In a recent project I worked on, I included contenteditable divs. Whenever the enter key is pressed within one of these divs, it splits into two separate contenteditable divs. However, after React re-renders the components, the caret tends to go to the beg ...

javascripthtmlreactjscontenteditable

The disappearance of the "Event" Twitter Widget in the HTML inspector occurs when customized styles are applied

Currently, I am customizing the default Twitter widget that can be embedded on a website. While successfully injecting styles and making it work perfectly, I recently discovered that after injecting my styles, clicking on a Tweet no longer opens it in a ne ...

javascripthtmlcssreactjstypescript

The picture won't stay within the confines of the container

As I work on my fitness site, I wanted to incorporate a sponsor section. While exploring some code that matched the style of my website, I discovered this snippet below. However, being new to CSS, I struggled with fixing it to ensure that the images fit ...

htmlcss