Any ideas on how to achieve equal height for product cards? Flex doesn't seem to be doing the trick.
.product-card {
position: relative;
padding: 1px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
background: #fff;
}
To create a border around a div element, simply add the h-100 class. See the example code snippet below for reference:
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="border p-2 h-100">
<img
src="https://static.wixstatic.com/media/2c0034_400708cb5f7d44bcb1f272ebc2a51aab~mv2.png"
alt=""
class="img-fluid"
width="100"
/>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur, quod?</p>
<p>$850.00</p>
</div>
</div>
<div class="col-md-3">
<div class="border p-2 h-100">
<img
src="https://static.wixstatic.com/media/2c0034_400708cb5f7d44bcb1f272ebc2a51aab~mv2.png"
alt=""
class="img-fluid"
width="100"
/>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur, quod?Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Pariatur, quod?
</p>
<p>$850.00</p>
</div>
</div>
<div class="col-md-3">
<div class="border p-2 h-100">
<img
src="https://static.wixstatic.com/media/2c0034_400708cb5f7d44bcb1f272ebc2a51aab~mv2.png"
alt=""
class="img-fluid"
width="100"
/>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur, quod?Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Pariatur, quod?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur, quod?
</p>
<p>$850.00</p>
</div>
</div>
</div>
</div>
Here is a neat trick you can try out. I've set up a container for the cards, each with a flex layout in column direction. To ensure uniform card heights, I've utilized flex-grow: 1 to fill the space between the image and the price (description). Check out the code implementation for more insights.
.product-card-container {
display: flex;
gap: 0.5rem;
padding: 0.5rem;
border: 1px solid green;
justify-content: space-evenly;
}
.product-card {
display: flex;
flex-direction: column;
justify-content: center;
width: 200px;
padding: 0 0.4rem;
row-gap: 0.5rem;
border: 1px solid black;
}
.product-card > img {
object-fit: cover;
width: 100%;
height: 200px;
}
.product-info {
/* Utilize this for expanding an element to 100% width or height inside a flex container */
flex-grow: 1
}<div class="product-card-container">
<div class="product-card">
<img src="https://live.staticflickr.com/5217/5471047557_4dc13f5376_n.jpg">
<span class="product-info">Short description</span>
<span><b>$850.00</b></span>
</div>
<div class="product-card">
<img src="https://live.staticflickr.com/5217/5471047557_4dc13f5376_n.jpg">
<span class="product-info">Long long long long long long long long long description</span>
<span><b>$850.00</b></span>
</div>
<div class="product-card">
<img src="https://live.staticflickr.com/5217/5471047557_4dc13f5376_n.jpg">
<span class="product-info">Very long long long long long long long long long description</span>
<span><b>$850.00</b></span>
</div>
<div class="product-card">
<img src="https://live.staticflickr.com/5217/5471047557_4dc13f5376_n.jpg">
<span class="product-info">Short description</span>
<span><b>$850.00</b></span>
</div>
</div>Help with positioning an icon next to the navbar text Example Code: <ul> <li><a href="#" id="other-color" class="ui-btn ui-shadow ui-btn-icon-left ui-custom-icon ui-arrow ui-nodisc-icon">Set Filter</a></li> <li> ...
I am currently working on designing a clickable panel for an html app that will include multiple text elements and images. Based on my understanding, this is typically achieved using a div. An example of this would be: <div class="myButton"> &l ...
Here is my XML code: <!DOCTYPE HTML SYSTEM> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"></link> </head> <body> <div class="header"> <img id="circle" src="circle.png" ...
I've exhausted all my options trying to center the navigation menu, but I just can't seem to get it right. I've experimented with text-align, margin-auto, block display... on both the parent and child elements. It's frustratingly simple ...
https://i.sstatic.net/Oxmqa.pngI'm looking to center align the logo within the navigation bar on my page. Here is the code I currently have: <div class="nav"> <ul> <li id="center"> <a href="home.php">&l ...
I am trying to find the precise distance between : #main div left edge to the first div with class="b" between the first div with class="b" to the second div with class="b" It's worth noting that the divs may be arranged randomly and could have fix ...
I have implemented ngb-tabset within a component that is contained within a single div. This div element is conditionally displayed based on the value of a specific condition. If the condition evaluates to false, another section is shown instead. <div * ...
I currently have a <div> placed on top of my webpage that follows the mouse cursor. Occasionally, users are able to move the mouse quickly enough to enter the tracking <div>. Additionally, this <div> sometimes prevents users from clicking ...
Recently, I implemented a button via GreaseMonkey: var input = document.createElement('input'); input.type = 'button'; input.value = 'Off'; input.onclick = turnTheWheelsofTime; Initially, the button functioned flawlessly whe ...
I have created a jsf page with colorpickers to allow an administrator to modify the main theme of the site, which consists of 4 colors. I have prefixed my main colors in the css file with numbers like this: .element{ background: /*1*/#333333; } When ...
Currently in the process of redesigning my university's drama department website, I'm looking to incorporate three images side by side with spacing and captions. The captions need to have a header that's styled differently from the caption i ...
I am encountering an issue with the background size on my webpage. When changing the viewport size on this page , the background does not adjust to the new viewport dimensions immediately. It seems to retain the previous dimension and only updates to the c ...
I need assistance with centering text horizontally next to an image inside a container div that is 40px x 40px. The anchor tag contains the image with matching dimensions, and below it is a span with text. I've tried using text-align: center, adjustin ...
When position: absolute; divs are placed inside or around a position: relative; parent, their height and width are based on the size and length of the text they contain. However, if one of these divs extends beyond the right border of the relative parent, ...
I came across a URL that displays [{"outlet_group_id": "29","outlet_group_name": "Parco","outlet_group_code": "0000010"}] and I have the following code snippet <script> $(document).ready(function() { $.getJSON('http://sampl.elinkurl.com/ ...
Has anyone successfully placed 2 logos on the navbar in Materialize Framework side by side? I'm struggling to make it work and could use some help. Here is my CodePen for reference. I've experimented with the display property but haven't ...
I am currently developing a plugin and I need to load a preset in order to populate a form with the relevant data. In an attempt to write concise code, I created a variable called "template" that looks like this: var Fields = '<div c ...
Just dipping my toes into the world of bootstrap and experimenting with some code. Encountered an issue when trying to center elements properly within columns: <div class="container"> <div class="row"> <div class= ...
I'm having some difficulty creating spaces between the controls while using ml-auto. My goal is to have each control separated with spaces in between, specifically the "Core Status label" should be far apart from each other and aligned on a horizontal ...
Currently, I am working on a website with a layout consisting of three frames. The first frame contains two columns, with the second column having two rows. Frame 1 displays a list of countries fetched from a database in the form of URLs. When a country i ...