Displaying the products has an issue with the alignment of heights

I have a project in eCommerce that I'm working on. Currently, I am facing an issue where the height of the product list varies and disrupts the overall alignment when I insert additional content.

Below is the code snippet I am using with Bootstrap 4:

#product_list {
  width: 210px;
  margin-right: 0px;
  font-size: 14px;
}

.product-item {
  width: 100%;
  height: 350px;
  cursor: pointer;
  background-color: #FFFFFF;
}

.product {
  width: 100%;
  height: 350px;
  border: solid 2px #e9e9e9;
}

.product_image {
  width: 100%;
  text-align: center;
}

.product_image img {
  width: 70%;
  height: 70%;
}
<!--  Start to products display  -->

<ul class="inline-item pt-2" style="padding-left:0px;padding-right:0px;" id="product_list_grid">
  <li class="list-inline-item  mb-1" id="product_list">
    <div class="product-item mb-1">
      <div class="product">
        <div class="product_image">
          <a href="single.html"> <img src="images/FREEDOM.png" alt=""></a>
        </div>

        <div class=" text-center mb-0 ">
          <h6 class="product_brand"><a class="text-dark" href="single.html">Ashirvad</a></h6>
          <h6 class="product_name">
            <p class="card-text m-0">
              <label> Ahirvad </label>
              <button type="button" class="btn  btn-sm text-white " id="background_color" data-toggle="modal" data-target="#myModal1"> 1kg </button>
            </p>
          </h6>
          <p class=" mb-0">
            <span>20pc/Box</span> &#10073; <span>Min 5 boxes</span>
          </p>
          <div class="product_price">
            <span>MRP : <del>$50</del></span> &#10073; <span> <b> Sale : $40 </b> </span>
          </div>
          <div class="quantity mb-1 ">
            <input type="button" value="-" class="minus  " style="border-radius:50px;">
            <span> 1 </span>
            <input type="button" value="+" class="plus" style="border-radius:50px;">
          </div>
          <div class="  text-center my-2 ">
            <a class="btn  btn-sm text-white" id="background_color" href="#">add to cart</a>
          </div>
        </div>

      </div>
    </div>

  </li>

  <li class="list-inline-item  mb-1" id="product_list">
    <div class="product-item mb-1">
      <div class="product">
        <div class="product_image">
          <a href="single.html"> <img src="images/FREEDOM.png" alt=""></a>
        </div>


        <div class=" text-center mb-0 ">
          <h6 class="product_brand"><a class="text-dark" href="single.html">Ashirvad</a></h6>
          <h6 class="product_name">
            <p class="card-text m-0">
              <label> Ahirvad </label>
              <button type="button" class="btn  btn-sm text-white " id="background_color" data-toggle="modal" data-target="#myModal1"> 1kg </button>
            </p>
          </h6>
          <p class=" mb-0">
            <span>20pc/Box</span> &#10073; <span>Min 5 boxes</span>
          </p>
          <div class="product_price"> <span>MRP : <del>$50</del></span> &#10073; <span> <b>
                                                    Sale : $40 </b> </span> </div>
          <div class="quantity mb-1 ">
            <input type="button" value="-" class="minus  " style="border-radius:50px;">
            <span> 1 </span>
            <input type="button" value="+" class="plus" style="border-radius:50px;">
          </div>
          <div class="  text-center my-2 "><a class="btn  btn-sm text-white" id="background_color" href="#">add to cart</a></div>
        </div>

      </div>
    </div>

  </li>
  ........
</ul>

I am encountering a height alignment issue when adding content to the product list, and it's causing disruptions in the display. The issue is resolved when the list items have uniform content and images.

cssbootstrap-4

Answer №1

             <ul class="d-flex flex-wrap inline-item pt-2" style="padding-left:0px;padding-right:0px;" id="product_list_grid">
                <li class="list-inline-item mb-1" id="product_list">
                    <div class="product-item mb-1">
                        <div class="product">
                            <div class="product_image">
                                <a href="single.html"> <img src="images/FREEDOM.png" alt=""></a>
                            </div>


                            <div class="text-center mb-0">
                                <h6 class="product_brand"><a class="text-dark" href="single.html">Ashirvad</a></h6>
                                <h6 class="product_name">
                                    <p class="card-text m-0">
                                        <label> Ahirvad </label>
                                        <button type="button" class="btn btn-sm text-white" id="background_color"
                                            data-toggle="modal" data-target="#myModal1">
                                            1kg
                                        </button>
                                    </p>
                                </h6>
                                <p class="mb-0">
                                    <span>20pc/Box</span> &#10073; <span>Min 5 boxes</span>
                                </p>
                                <div class="product_price"> <span>MRP : <del>$50</del></span> &#10073; <span> <b>
                                            Sale : $40 </b> </span> </div>
                                <div class="quantity mb-1">
                                    <input type="button" value="-" class="minus" style="border-radius:50px;">
                                    <span> 1 </span>
                                    <input type="button" value="+" class="plus" style="border-radius:50px;">
                                </div>
                                <div class="text-center my-2"><a class="btn btn-sm text-white" id="background_color"
                                        href="#">add
                                        to cart</a></div>
                            </div>

                        </div>
                    </div>

                </li>

                <li class="list-inline-item mb-1" id="product_list">
                    <div class="product-item mb-1">
                        <div class="product">
                            <div class="product_image">
                                <a href="single.html"> <img src="images/FREEDOM.png" alt=""></a>
                            </div>


                            <div class="text-center mb-0">
                                <h6 class="product_brand"><a class="text-dark" href="single.html">Ashirvad</a></h6>
                                <h6 class="product_name">
                                    <p class="card-text m-0">
                                        <label> Ahirvad </label>
                                        <button type="button" class="btn btn-sm text-white" id="background_color"
                                            data-toggle="modal" data-target="#myModal1">
                                            1kg
                                        </button>
                                    </p>
                                </h6>
                                <p class="mb-0">
                                    <span>20pc/Box</span> &#10073; <span>Min 5 boxes</span>
                                </p>
                                <div class="product_price"> <span>MRP : <del>$50</del></span> &#10073; <span> <b>
                                            Sale : $40 </b> </span> </div>
                                <div class="quantity mb-1">
                                    <input type="button" value="-" class="minus" style="border-radius:50px;">
                                    <span> 1 </span>
                                    <input type="button" value="+" class="plus" style="border-radius:50px;">
                                </div>
                                <div class="text-center my-2"><a class="btn btn-sm text-white" id="background_color"
                                        href="#">add
                                        to cart</a></div>
                            </div>

                        </div>
                    </div>

                </li>

                </ul>

                <style>

                /* Start to css for product list */

                #product_list {width:210px;
                  margin-right: 0px;
                 font-size: 14px;}
                .product-item
                {
                width: 100%;
                max-height: 350px;
                cursor: pointer;
                background-color: #FFFFFF;
                }

                .product {
                  width: 100%;
                  max-height: 600px;
                  border: solid 2px #e9e9e9;
                }
                .product_image
                {
                width: 100%;
                text-align: center;
                }
                .product_image img
                {

                width: 70%;
                height:70%;
                }

                /* END to css for product list */




                </style>

Use the "d-flex" and "flex-wrap" classes for the ul tag, and replace "height" with "max-height."

Hopefully, this information is useful to you.

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

Struggle with Firefox: Table-cell with Relative Positioning Not Acting as Parent

Upon investigation, I have come across a unique layout issue that seems to only affect Firefox. It appears that elements with display:table-cell; do not act as the positional parent for descendants with position:absolute;. It is surprising to discover th ...

htmlcssfirefox

Choose the label by utilizing the CSS selector

I am currently using CSS to create tabs with radio buttons. However, I am struggling to figure out how to select the corresponding <label> for the radio button. To keep the labels separate from the content and display them as tabs, I have structured ...

htmlcsscss-selectors

resetting the page's scroll position using a hamburger icon

After adding a hamburger icon to my web project, I noticed that whenever I click on the icon, it scrolls back to the top of the page. I tried adjusting the margin and padding properties, but it still behaves the same way. Even after removing the animation ...

htmlcss

What is the best way to remove table row data fetched from an API within a table?

Can someone assist me with deleting the table tr from the user table, where data is retrieved from an API? I have attempted the code below: $("principleTable").find("tr").hide(); $("#delAgentModal").modal("hide"); ...

javascriptjqueryhtmlcss

Employ jQuery for toggling CSS rotation

I have a plugin set up to handle the CSS3 attribute. It currently rotates 45 degrees when clicked, but doesn't rotate back when clicked again to hide the content. Any ideas on how to fix this? $("#faq dt").click(function() { $(this).next('dd ...

jquerycsstoggle

"Experience a unique website layout with varying designs on desktop and mobile devices while using the React technology to enable desktop

Just starting out with React and I've noticed something strange. When I view my website on a PC, everything looks normal. However, when I switch to the desktop site on my phone, things appear differently. It seems like moving an element by 20px on mob ...

javascripthtmlcssnode.jsreactjs

What is the best way to customize the appearance of these two images within a div element?

While working on a small website project during my internship, I initially used an inline stylesheet. However, upon my boss's recommendation, I switched to an external stylesheet. Now, I'm trying to figure out how to style the two images within d ...

htmlcss

What's the trick to aligning navigation items side by side?

I'm currently working with the code snippet below: header { height: 110px; width: 100%; margin-bottom: 130px; position: fixed; top: 0; z-index: 11; /*additional styling removed*/ } nav ul { list-style: none; paddin ...

htmlcsscss-float

``CSS: Styling a Rounded Div with a Clipped Scrollbar

I am attempting to contain a scrollbar within a div so that it remains within the rounded corners without overflowing. Take a look at the code snippet below to see the problem in action. Is there a way for the scrollbar to be fixed in its position, while ...

htmlcss

Creating a Grid layout with an abundance of visual elements and minimal text content

I am working with a grid component from Material UI: Item element const Item = styled(Paper)(({theme}) => ({ ...theme.typography.body2, padding: theme.spacing(2), textAlign: 'center', color: "black", })); Structure ...

cssreactjsmaterial-ui

What is the best way to find the longest element with the same class name using jQuery?

How can I dynamically find elements with the same length of class names? var className = $('.floor-4').attr('class').split(' ')[1]; var classLength = $('.' + className).length; Here is the HTML code: <div id="d ...

javascriptjqueryhtmlcss

What is the best way to clear the selected option in a dropdown menu when choosing a new field element?

html <div class="row-fluid together"> <div class="span3"> <p> <label for="typeofmailerradio1" class="radio"><input type="radio" id="typeofmailerradio1" name="typeofmailerradio" value="Postcards" />Postcards& ...

javascriptjqueryhtmlcssdrop-down-menu

Creating a Triangle Slider Component with React and Material-UI (MUI)

Struggling with creating a price control using react js and MUI, similar to the image below: https://i.stack.imgur.com/ZP8oc.png I've searched online for libraries or solutions, but haven't found anything that works. ...

javascriptcssreactjsmaterial-uijsx

Straightening the border of the final item

In my Angular project, I'm currently implementing a progress bar with the following code: .bar { --d: 1rem; /* arrow depth */ --gap: 0.3rem; /* arrow thickness, gap */ display: flex; margin-right: var(--d); } .bar-step { flex: 1; ...

htmlcssbootstrap-5

Achieving proper stacking of a table with other div elements

I've come across some similar inquiries, but none seem to fully address the specific issue at hand. If there's an existing thread on this that I overlooked, I apologize in advance. So, here's a multi-part problem: my solution for the first ...

htmlcsshtml-tableflexbox

Creating tooltips using React and Tailwind CSS

I'm currently working on creating tooltips for icons in my header. I have created a component that combines the icon and tooltip into one div, with Tailwind CSS styles applied. JSX Component: const HeaderIcon = ({ icon, redirect = window.location.pat ...

cssreactjstailwind-css

The HTML element does not expand to fill the entire page

I recently encountered a problem with my website. Everything was functioning smoothly until I decided to add some in-page links to a large page. After adding the links, the background no longer stretched the entire length of the page. When scrolling down, ...

htmlcssbackground

What is the step-by-step process for activating a Bootstrap datepicker with a button click?

I currently have a bootstrap datepicker that opens when clicking on an input field. However, I would like to modify it so that it opens when clicking on a button instead. How can I achieve this? Below is the code snippet that triggers the datepicker on an ...

datepickerbootstrap-4

Incorporate a backdrop to enhance a material icon

I'm working with the following Material Icon code but I want to enhance it by adding a white background for better contrast. Any suggestions on how to achieve this? <a id="lnk_quick_print" href="javascript:;" title="Quick P ...

htmlcssmaterial-uimaterial-design

Internet Explorer fails to account for the height of table cells when using overflow-x:auto, leading to hidden content. In contrast, Chrome adjusts for this automatically. What steps can be taken to address

Chrome: https://i.sstatic.net/bzgOT.jpg Internet Explorer: https://i.sstatic.net/qHH1r.jpg The image at the top shows how the content should appear on Chrome, while the one below demonstrates how it is displayed on IE11. The issue seems to be that on In ...

htmlcssinternet-explorer