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

Error: The @use directive must come before any other rules in Angular

Error message: Issue: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): Error Details: HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js) ...

cssangulartypescriptsass

Struggling with a minor glitch in a straightforward coin toss program written in JavaScript

I'm a newcomer to JavaScript programming and I am struggling with understanding how the execution flow is managed. I attempted to integrate an animation from "Animation.css" into a coin toss program, but encountered an issue. When trying to use JavaSc ...

javascripthtmlcsscss-animations

Struggling to make images wrap properly using flexbox

I've been struggling to get these images to wrap properly within my container. They keep overflowing beyond the designated width and I'm not sure if it's because I have paragraphs placed under each image. Any ideas on how to make 3 images ap ...

htmlcssflexbox

Unusual Behavior of *ngIf and jQuery in Angular 5: A curious case

I'm encountering a strange issue when using the expand-collapse feature of Bootstrap 4 with *ngIf for expansion and collapse. I noticed that the jQuery doesn't work when *ngIf is used, but it works fine when *ngIf is removed. HTML: <div cla ...

htmlangulartypescript

The cascading style sheet used by a lightbox

I constructed a lightbox using the following HTML code: <a id="show-panel" href="#">Show Panel</a> <div id="lightbox-panel"> <h2>Lightbox Panel</h2> <p>You can add any valid content here.</p> <p align="center" ...

jqueryhtmlcsslightbox

What is causing the data element to remain unchanged within a Vue.js function and what steps can be taken to ensure its value can be updated?

Using the axios API in the created() function, I am able to access webURLs. When a mouseover event triggers a v-for handler in the HTML file, the index is obtained and assigned to the selectedState data element. Although the value of selectedState changes ...

javascripthtmlvue.js

How can I replicate the functionality of a div mimicking a select element using javascript upon clicking away from the element?

My task was to design a pseudo-select element that showcases columns for each row within the select. Due to HTML's restriction on allowing the <option> tag to include HTML, I had to find an alternate solution. One issue I encountered was replic ...

javascripthtmljqueryselectclick

The height of the absolute div tag does not match the height of the parent div

I am currently designing an editor that requires a line-number bar (gutter) on the left side. I have set a div with a height of 100% and its parent div with overflow: auto. My expectation is that if the content exceeds the given height, the editor-body sh ...

csshtmlheight

Is it possible to reset a form without using JavaScript? (The input type=reset function is not functioning correctly

So, basically I need a quick way to clear all the fields in my form. I've experimented with a couple of options: <input type="reset" value="Clear all fields"> And <button type="reset">Clear all fields</button> Unfortunately, none ...

htmlformsbuttonreset

CSS border margin-bottom attribute not functioning correctly

I am trying to create a page border by wrapping it around the content using a <div> element. The parent element is the actual page itself. However, I'm having trouble with the margin-bottom property as it doesn't seem to be working properly ...

htmlcssbordermargin

The transition property in CSS and JavaScript does not seem to be functioning properly in Firefox

Recently, I integrated a Slide in menu script on my website using a Slide in menu script. After following all the instructions provided, the menu started working flawlessly on Chrome and Safari browsers. However, my main goal was to make it function on Fir ...

javascripthtmlcss

When a form contains a ViewChild element, changes to the ViewChild element do not automatically mark the

Let's set the stage: MainComponent.html <form #someForm > <input type="text" name="title" [(ngModel)]="mainVar" /> <child-component /> <input type="submit" [disabled]="someForm.form.pristine" /> </form> ChildComp ...

javascripthtmlformsangularangular2-forms

Struggling to concentrate on the branding

I've been using materializecss for some time now and recently encountered an issue while trying to navigate my website using keyboard tabbing. The checkbox in materializecss is a custom CSS checkbox, but when I set the tabindex for the label of the c ...

jqueryhtmlcssgoogle-chromematerialize

jQuery Slider Showing Incorrect Images

My jQuery slider is acting strangely. It hides the first image, shows the second one, but then just repeats the cycle by showing the first image again instead of loading the third one. I'm puzzled about what could be causing this issue in my code. Do ...

javascriptjqueryhtmlcss

elements positioned next to each other

I currently have two nested divs like this: <div id="header"> <div id="logo"></div> <div id="header_r"></div> </div> The corresponding CSS styles are as follows: #header{ border: ...

css

Determine whether a div that has been generated automatically has been selected by the user

My JSON file contains a list of elements, each creating a container. See the code below: $.getJSON('/data/risks.json', function(data) { var html = ''; $.each(data.risk, function(key, value){ html += '<div class="elementlis ...

javascriptjqueryhtmlcss

Discovering the technique to display data in PHP only from the database that is specific to the authenticated user

When creating a to-do list, I want the user (not admin) to only see tasks assigned to them. This should be indicated under the assignee column with their name. https://i.stack.imgur.com/WP5C8.png However, currently the user named Lala can see not only th ...

phpjqueryhtmlmysql

Layout your Angular components with a column design using Flex Layout

Is there a way to adjust the width of a child component in an fxLayout set to column? Take this example for reference: https://stackblitz.com/edit/angular-fxlayout-custom-breakpoints?file=app%2Ftest.component.ts In the provided example, there are three f ...

htmlcssangularflexbox

Breaking the layout using recursive components in VueJS

I am currently facing an issue where I need to dynamically load components. However, when some of these components are loaded, they appear with faulty or missing CSS styles due to a problematic first div element after the template. Removing this DIV manual ...

htmlcssvue.jsvue-component

Is there a way to eliminate the menuArrow from a Select widget in gwt-bootstrap3?

In my current project, using gwt-bootstrap3, I have been attempting to conditionally remove the menu arrow from a Select box. I have experimented with various methods such as: <select:Select ui:field="fieldName" name="fieldName" b:id="fieldName" showM ...

cssgwtgwtbootstrap3