My divs are displaying different heights based on content. I need a solution to make them all the same height without using bootstrap framework. Is there a way to achieve this with plain html/css, or perhaps with javascript/jquery/angularjs? Take a look at the screenshot for reference.
Consider using the CSS property display:flex; to achieve the desired layout:
.gallery_items {
display: flex;
flex-wrap: wrap;
}
By implementing this, each row will have an equal height regardless of the content length in each item.
Check out this (quick) demonstration on Fiddle to see the outcome.
When you include display:flex in the container, it will ensure that all the children items have the same height.
However, they will be displayed in a single row by default. To restrict only 3 items per row, similar to your mock design, add flex-wrap: wrap; to the container CSS. Also, make sure to specify the width of each item.
.galeria_packs {
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
You can view the jsfiddle with your provided code here: http://jsfiddle.net/yv363pcy/
Issue I am facing a challenge with integrating angular material SCSS into my application. I want to ensure that these styles are isolated and scoped specifically for my application, as it will be embedded within a larger monolith. The goal is to prevent a ...
I am currently attempting to dynamically modify the displayed property on my leaflet map. Below is the code I have been working with: $("#button_thermal").click(function(){ $.getJSON("physicalProperties.geojson", function(data) { var geojson2 = L.geoJson( ...
I am encountering an issue with variable value in input field. To provide some context, I have client information stored in a MySQL database. Using PHP, I retrieve this data and display it in a table. Currently, I am working on implementing a delete optio ...
I've been searching for a solution to this problem, but all I seem to find online is advice on how to "replace button text." What I'm trying to achieve is to have text change into a button when hovered over. I've attempted using fadeIn/fade ...
One of the challenges I'm facing is integrating a html/css modal on my webpage, which can be accessed via this link: The issue arises when trying to utilize the main scroll bar on the page in order to navigate downwards and view the remaining content ...
const router = new VueRouter({ routes: [ {path: '*', redirect: '/'} } )} I have configured this as the default redirect route in my routes.js file. Now, I am wondering how I can set multiple redirect paths and trigger them ...
I am facing an issue with arranging two divs under one parent div. The parent div is set to have a width of 100%: <div id="parent"> <div class="left"></div> <div class="right"></div> </div> The specific conditions ...
Hey there! I'm currently facing an issue with including a file that contains all of my 'head' information. My goal is to simplify and streamline my page by breaking it down. In my index.php file, here's what I did: <?php include & ...
Take a look at this fiddle Here is the HTML structure: <div class="parent"> <div class="child"></div> </div> This is the corresponding CSS code: .parent { position: absolute; width: 100px; height: 100px; background: re ...
I'm having trouble removing the message (with the username displayed) after logging out by pressing the logout button. Every time I try to press the logout button, it just refreshes the page without any action. I want to stay on the same page and not ...
Currently, I am incorporating SVG elements into a webpage using D3js. However, I am facing challenges when it comes to styling these elements as typical CSS syntaxes like path { border: 3px solid green; } do not seem to work. Is there a way to apply bo ...
When I visit this page using Safari or my iPhone, the list of social network members does not appear. Can anyone explain why this might be happening? I am unable to figure out the reason behind this issue. Thank you in advance for your help! ...
Having trouble uploading an image and copying it into a folder named images within a loop. Can you assist with solving this issue? Here's my code: $sql="SELECT * FROM product"; $q=$conn->query($sql); while($r=$q->fetch(PDO::FETCH_ASSOC)) { $cod ...
I am facing an issue with exporting my table data into a PDF using jQuery. I have made sure to install all the necessary library files, but my code doesn't seem to be working correctly. Can anyone spot any errors in my code or suggest what might be mi ...
Check out this link to view the demonstration - http://codepen.io/illpill/pen/VbeVEq function sendTweet(message, author) { window.open('https://twitter.com/intent/tweet?hashtags=thequotemachine&text=' + encodeURIComponent('"' + m ...
Using Selenium's webdriverJS, I have automated tasks on an HTML5 page. To incorporate a CSS selector into a function, I had to rely on XPath for selecting elements: var complexXpath = "//*/div/a"; /* This is just an example */ var element = mydri ...
Hey, I'm trying to eliminate thumbnail images from YouTube. The code I am currently using is: while (true) { $("ytd-thumbnail").remove() } As of now, when I input this code in the console, it successfully removes all thumbnail images. However, I ...
I implemented a hamburger menu that slides in when clicked. However, I'm facing an issue where the slide-in menu disappears after a second. How can I make sure the menu stays visible? #navigationWrap { position: fixed; top: 0; ...
One of my latest projects involved creating a directive that allows users to click on a word and edit it in a text box. Once edited, clicking anywhere on the body should return the word back to its updated form. html <div markdown>bineesh</div& ...
I am encountering an issue with my code. When I click on an inactive tab, the content of the first tab does not hide and both tabs' content is displayed simultaneously. Is there a solution to this problem? Thank you for your help! <ul style="l ...