Mastering the Zurb Foundation equalized grid: aligning content at the bottom of a div within a grid cell

One common challenge is how to position content at the bottom of a div, but with Flexbox, it's becoming easier nowadays.

In my case, I'm using the Zurb Foundation grid with equalisation. This equalisation is crucial because my cells have an image (fixed height) and a caption of variable length. The caption consists of a title (directly under the image) and a subtitle that I want to be at the bottom of the image card.

If you want to see what I'm dealing with, here's a Codepen link: https://codepen.io/arokat/pen/ZEbzOMp

I've experimented with different suggestions like flexbox, applying height: 100% to .image-card-caption__title, etc. However, I can't seem to get the subtitle to stay at the bottom while maintaining the desired appearance. (Absolute positioning + bottom: 0 messes up the layout...)

The issue might be that the div's height isn't set until after the JS equalisation code runs, causing CSS rules to apply at the wrong time.

I'd prefer not to fix the height of the .image-card-caption div since both the title and subtitle could vary significantly in length.

Any suggestions? Thank you in advance :)

Current Layout: https://i.sstatic.net/5ABBP.jpg

Desired Layout:
(approximated - alignment isn't perfect, just used <br /> tags for representation) https://i.sstatic.net/eTEQl.jpg

csszurb-foundation

Answer №1

I made some adjustments to your code, incorporating Foundation components to streamline the structure and using clever "hacks" to achieve your desired outcome.

You can view the updated version on this CodePen link

Here's a breakdown of the changes I implemented:

  1. Instead of manually calculating columns for different breakpoints, I utilized Foundation's Block Grid feature which simplifies the layout. By adding classes like 
    'grid-x grid-padding-x small-up-1 medium-up-2 large-up-3'
    , you specify the number of blocks per row at various screen sizes effortlessly.
<div class='cell'>

This method eliminates the need for verbose column declarations like 'cell medium-6 large-4', saving time and making the code more concise.

  1. In place of traditional image tags, I introduced a transparent spacer using an SVG element which results in a lightweight alternative.
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E">

This technique creates a responsive square shape that adapts to the available space, allowing the original image to serve as the background. This ensures consistent proportions within each element, enabling easy utilization of data-equalizer for title elements.

  1. Although data-equalizer can synchronize heights across multiple elements, it wasn't necessary in this scenario. Instead, I designated the data-equalizer-watch='title' attribute to the title container elements, enhancing consistency without utilizing flex properties for .image-card__image.

Have these modifications met your requirements effectively?

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

Comparison between Mobile Phone's innerWidth and innerHeight Versus Resolution

My test phone, the Galaxy S3 Mini, has a resolution of 800x480 according to its specs. Strangely, when I run the following code in my HTML game: window.innerWidth window.innerHeight The width appears as 533 and the height as 295. I recently discovered ...

javascriptandroidcss

Navigation Bar Search Box Alignment Problem

Hi there, I'm new to programming and I'm trying to center my search bar with the navigation links beside it within a fixed navigation bar. However, I'm having trouble getting it to work properly. Can someone take a look at my HTML and CSS co ...

htmlcssnavigationsearchbarcenter-align

Creating a PDF from slides using tools like mkd2pdf or wkhtmltopdf has never been easier. This

I am exploring the possibility of creating PDF files using mkd2pdf, a tool based on wkhtmltopdf. Mkd2pdf has the ability to generate PDFs from markdown content and utilizes a CSS file for styling purposes. For example: h1 { page-break-before: always; } ...

cssmarkdownwkhtmltopdf

dynamically assigning a style attribute based on the dimensions of an image retrieved from a URL

My aim is to determine whether or not I should use an image based on its dimensions. To achieve this, I came across a function on stack overflow that can retrieve the dimensions of an image just by using its URL. Here is the code snippet they provided: f ...

javascriptcssreactjsimagematerial-ui

Failure of PrimeNG Autocomplete dropdown to adjust position

My experience with the PrimeNG Autocomplete plugin resulted in some conflicts. When using this style, the autocomplete drop-downs are positioned downward. Image description goes here https://i.sstatic.net/VZmAk.png If anyone knows how to resolve this is ...

cssbootstrap-4primeng

Grid system not being followed by table in Bootstrap layout

I'm struggling to figure out why the table I have doesn't follow Bootstrap's grid system. It took me a good 2 hours to pinpoint and fix the issue. Any help would be greatly appreciated. I could share the code, but it might be easier for you ...

htmlcsstwitter-bootstrap

What is the best way to combine two menu plugins in Wordpress?

Currently, I am in the process of creating a logo with a drop down menu for my website, which can be found at . After discovering a widget called Menu Image that successfully transformed a menu item into a photo, I decided to add another widget called Ma ...

csswordpressplugins

Drift above a pair of elements

Explaining my issue is a bit complex, so I'll provide an example: I aim to place a floated element (the blue box) over two other elements (red and green), all within a fixed-width and centered layout (achieved by the black border box). Additionally, ...

htmlcssxhtmlinternet-explorer-6css-float

How can I apply an underline effect when hovering over navigation links in a responsive menu?

I've successfully added an underline effect on hover for the navigation menu. However, I encountered an issue with the responsiveness of the menu. When viewed on screens smaller than 600px, the underline effect covers the entire width of the block ins ...

javascripthtmlcsswordpress

Ensure that the inner div has a height of 100%

Can someone help me troubleshoot my HTML code? <div id="container"> <div id="left-container"> </div> <div id="right-container"> </div> </div> Although the container is set to 100% height, the #left_con ...

htmlcss

Is there a way to adjust the transparency of the reflection while utilizing the -webkit-box-reflect property?

Exploring the capabilities of the -webkit-box-reflect property in Chrome has proven to be quite interesting. By utilizing the code snippet provided below (taken directly from the Webkit blog), I have been able to achieve a fading reflection effect: -webki ...

reflectionwebkitcssopacity

Switch up the font style of the title element

Is it possible to modify the font-family of the title attribute in an input field using either JavaScript or jQuery? <input type="text" title="Enter Your Name" id="txtName" /> ...

javascriptjqueryhtmlcss

Efficiently incorporating styles and CSS, as well as Bootstrap CDN, into window.print() while utilizing Vue.js

I am trying to print from my Vuejs component and apply CSS and Bootstrap styles to the printed page. Currently, I am using window.print() inside the mounted lifecycle hook as shown below: export default { mounted() { ...

javascriptcssvue.jsbootstrap-4

Is there a way in CSS to set a label's width equal to the width of its content?

I am facing an issue where I need the question mark div to be positioned right next to the top row of text in the label it is associated with. Can someone suggest some styles that can be applied to the label to adjust the width and spacing so that it match ...

htmlcssflexbox

Conceal content after a specific duration and display an alternative in its position, continuously repeating the loop

Imagine creating a captivating performance that unfolds right before your eyes. Picture this: as soon as the page loads, the initial text gracefully fades away after just three seconds. In its place, a mesmerizing animation reveals the second text, which ...

javascriptjquerycsshtml

The rounded corners feature of PIE.htc does not seem to be functioning properly on Internet Explorer

Check out my code below: http://jsfiddle.net/parag1111/s5RLb/ Make sure to place PIE.htc in the CSS folder. I've already included the necessary JS and behavior for PIE.htc. Please provide any additional suggestions to ensure compatibility with IE8 a ...

internet-explorer-8csscss3pie

Requesting for Nav to be positioned directly below the header, in a fixed manner, with no overlapping

After successfully resolving the issue of my header overlapping content, which was thanks to your help, I encountered a new challenge. I was advised to group my navigation bar with my h1 header for a fixed position but doing so caused everything to go hayw ...

htmlcss

Is there a way to conceal the scrollbar while still permitting scrolling?

I'm interested in creating a custom scrollbar, but in order to do so I need to hide the default scrollbar while still allowing scrolling functionality. I've attempted: overflow-y:hidden; but this method hides the scrollbar and prevents scrolli ...

jqueryhtmlcss

Guide on making a color legend with JavaScript hover effects

On my website, there is a dynamic element that displays a table when values are present and hides it when there are no values. The values in the table are color-coded to represent different definitions. I wanted to add hover text with a color key for these ...

javascriptjqueryhtmlcsshover

Adjust the size of an image and move its position both vertically and horizontally using Javascript

I am currently working on transforming an image both vertically and horizontally, as well as scaling it using JavaScript. While I have managed to resize the image successfully, it doesn't quite look how I want it to. I am aiming for a similar effect a ...

javascriptcss