What steps can I take to ensure that all of these boxes are equal in size?

I've been struggling to make the boxes the same size despite trying everything. It just doesn't seem to be working. Any suggestions or insights on what I might be doing wrong?

#wrap{
width: 90%;
max-width: 1100px;
margin: 50px auto;
}
.columns_2 figure{
   width:49%;
   margin-right:1%;
}
.columns_2 figure:nth-child(2){
margin-right: 0;
}
.columns_3 figure{
   width:32%;
   margin-right:1%;
}
.columns_3 figure:nth-child(3){
margin-right: 0;
}
.columns_4 figure{
   width:24%;
   margin-right:1%;
}
.columns_4 figure:nth-child(4){
margin-right: 0;
}
.columns_5 figure{
   width:19%;
   margin-right:1%;
}
.columns_5 figure:nth-child(5){
margin-right: 0;
}
#columns figure:hover{
-webkit-transform: scale(1.1);
-moz-transform:scale(1.1);
transform: scale(1.1);

}
#columns:hover figure:not(:hover) {
opacity: 0.4;
}
div#columns figure {
display: inline-block;
background: #FEFEFE;
border: 2px solid #FAFAFA;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
margin: 0 0px 15px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
padding: 15px;
padding-bottom: 5px;
background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
opacity: 1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}

div#columns figure img {
width: 100%;
border-bottom: 1px solid #ccc;
padding-bottom: 15px;
margin-bottom: 5px;
}

div#columns figure figcaption {
  font-size: 18px;
  color: #444;
  line-height: 1.5;
  height:30px;
  font-weight:600;
  text-overflow:ellipsis;
  font-family: 'Abel', sans-serif;
}

figure > p {
  font-size:16px;
  text-align: justify;
  padding-top:1px;
  font-family: 'Abel', sans-serif;
}


@media screen and (max-width: 960px) {
  #columns figure { width: 24%; }
}
@media screen and (max-width: 767px) {
  #columns figure { width:32%;}
}
@media screen and (max-width: 600px) {
  #columns figure { width: 49%;}
}
@media screen and (max-width: 500px) {
  #columns figure { width: 100%;}
}
  <div id="wrap">
    <div id="columns" class="columns_4">
      <figure>
        <img src="img/gallery/micro.png">
        <figcaption>Microblading</figcaption>
        <p>This technique will give you the most natural result possible. Hair like strokes are created to follow the natural hair pattern in your own eyebrows. This is the latest technique in the Permanent Cosmetics industry. This technique is also referred
          to as 3D Eyebrows or Eyebrow Cloning. This fee includes (1) one follow up touch-up within 3 months of the initial service visit.</p>
        <span class="price">$565.00</span>

      </figure>

      <figure>
        <img src="img/gallery/microshading.png">
        <figcaption>MICROBLADING WITH SHADING</figcaption>
        <p>This technique also gives you a very natural result. Hair like strokes are created to follow the natural growth pattern of your own eyebrows. As a finishing touch, color is also tapped softly into the skin to add dimension and density. This fee includes (1) one follow up touch-up within 3 months of the initial service visit.</p>
        <span class="price">$625.00</span>
      </figure>

      <figure>
        <img src="img/gallery/scalp.png">
        <figcaption>SCALP MICROPIGMENTATION</figcaption>
        <p>This procedure is ideal for clients that have permanent hairloss due to scar tissue, alopecia or receding hair lines. A natural look is achieved by creating hair like strokes or hair like follicle replication along the desired area.</p>
        <span class="price">Prices May Vary</span>
      </figure>

      <figure>
        <img src="img/gallery/eyebrow.png">
        <figcaption>SOLID PERMANENT EYEBROWS</figcaption>
        <p>This procedure is ideal for clients who wish to have a more defined, solid shape. Your ideal eyebrow shape and style is created and filled in solid with a color that best compliments you. This fee includes (1) one follow up touch-up within 6 months of initial service visit.</p>
        <span class="price">$385.00</span>
      </figure>

Answer №1

Here is the code snippet you need to include:

#columns{
   display: flex;
   flex-wrap: wrap;
}

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

Highlighting in ThreeJS/Projector Interface

Is there a way to incorporate a 2D sprite underneath a 3D object on top of a plane in order to indicate that my objects are highlighted or selected? Additionally, how can this be achieved on uneven terrain? To provide further clarification, I have includ ...

Modify the color of a set of div elements when clicked

Is there a way to change the background color of all divs with a common attribute value (#id for example) after clicking on one of the divs that shares the same attribute value? This is what I have tried so far: $('.group').click(function(){ ...

What is the best way to retrieve data from the previous webpage and navigate it to the appropriate page using HTML?

I have a pair of HTML files known as list.html and detail.html. From https://jsonplaceholder.typicode.com/posts, I am retrieving title and body data to exhibit on a posts.html page in the following format: posts.html output Displayed below is my posts.ht ...

Is there a way to include a button within the Rails code that would allow users to add a present using the <%= link_to_add_fields "Add A Gift", f, :presents %> function

I'm having trouble figuring out how to insert a button into a link_to_add_fields, like this: <%= link_to_add_fields "Add Another Item", f, :items %> while working on my Rails App. I've attempted to include class: "btn btn-mini btn-info" ...

Customize MUI Tabs to resemble the design of Bootstrap Nav Tabs

Looking to customize Material UI Tabs to resemble Bootstrap Tabs. Made significant changes, but struggling with removing the border-bottom on the activeTab. In Bootstrap, they use marginBottom: -1px on the active tab, but it doesn't work for me. Any s ...

Angular 4 allows the addition of an image from right to left upon clicking

I've been working on angular 4 and I've successfully implemented the functionality of adding flags. However, the issue is that the flags are currently appearing from left to right. What I'm aiming for is to have the images appear from right ...

Assign a distinct color to each character of the Russian alphabet within a specified text using CSS and/or JavaScript

My experiment involves testing the concept of "induced synesthesia" by assigning different colors to individual characters in text. I plan to map each character in the Russian alphabet to a specific color, for example, A is red, B is blue, and so on, resul ...

Rotational orientation of a progress circle image in SVG

I am currently working on developing a circular progress bar, similar to the one shown in the image below. The progress of this bar is determined by percentages and it moves around the circle accordingly. I have managed to get the progression moving, b ...

Notification box appearing on the homepage

I created a landing page featuring various products. Each product is accompanied by a description and price. When you click on a product, a "popup window" should appear displaying the picture and description. My concern is that if I have numerous product ...

How can I utilize CSS shapes to create clickable images?

I'm facing a challenge in making an input field and button functional even when they are positioned behind a uniquely shaped PNG image. https://i.stack.imgur.com/eOg0N.jpg Initially, I believed that by applying a shape to the image, it would automat ...

The scaling transformation is not accurate for uneven pixel widths

I'm attempting to resize a div while keeping the inner element in the same position and at the same size. To achieve this, I am using transform: scale(value) on the wrapper and transform: scale(1/value) on the inside div. The issue arises when the in ...

Presenting a unique navigation feature that displays the menu simply by hovering over it,

I'm utilizing bootstrap to create a horizontal menu in HTML <div class="btn-group""> <div class="btn-group"> <button type="button" data-toggle="dropdown" class="btn btn-inverse dropdown-toggle>About Us<sp ...

Steps for achieving a seamless delay fade-in effect

Can anyone provide a solution to my issue? I'm a CSS beginner and need some help. My landing page has a background Youtube video with buttons that appear after 8 seconds. I want these buttons to smoothly fade in, but I can't figure out how to do ...

Tips for designing a HTML form using classes

I need help styling this form using CSS because I have similar areas like a search submit button that require different classes. Any assistance would be greatly appreciated. <perch:form id="contact" method="post" app="perch_forms"> <perch:cont ...

I am currently encountering an issue where the datepicker from mdbootstrap is displaying the date as 0000-00-00 in the database

When submitting a form to store data in a MySQL database using PHP, I have noticed that everything gets inserted properly except for the date field, which appears as 0000-00-00. I am unsure how to adjust the date format before sending it to the database. ...

What is the direction of auto-filling in CSS grid?

Here's an unusual query that I've been pondering. Despite checking various CSS documentation, I haven't found a clear answer yet. Take a look at this: https://i.sstatic.net/SglOl.jpg It resembles something like this grid-template-columns: ...

Trigger the opening of a bootstrap modal from an external source on the current page

One common question is how to load a modal from another page onto the current page, or how to open a modal on the current page when it loads. My idea is a little different: I want to click on an image hotspot (like a person in a team photo) on the /home p ...

The placement of the image in the navigation bar is causing the links to be

Oddly enough, the links seem to be unclickable except when using Internet Explorer. I attempted adjusting the z-index and checked for conflicts multiple times, but unfortunately, it still won't cooperate. The issue seems to stem from the navigation ba ...

Is there a way to move a placeholder to a small label in the top left corner when an input field is being used?

I've been searching for functional code, but everything I've tried so far hasn't worked. Does anyone have expertise in creating this animation using React? ...

Having trouble with the Slide Menu Javascript functionality

Having some trouble creating a sliding menu with jQuery. Errors on lines 5 and 6 saying functions are not defined. Can anyone help me figure out what's wrong with my code? jQuery(function($) { "use strict"; $(document).ready(function () { ...