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:

Desired Layout:
(approximated - alignment isn't perfect, just used <br /> tags for representation)

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

Personalized 404 Error Page on Repl.it

Is it possible to create a custom 404-not found page for a website built on Repl.it? I understand that typically you would access the .htaccess file if hosting it yourself, but what is the process when using Repl.it? How can I design my own 404-not found p ...

javascripthtmlcsshttp-status-code-404replit

What is the best way to prevent the body from scrolling when scrolling on a fixed div without making the body's scroll bar disappear?

Is there a way to prevent the body from scrolling while I scroll on a fixed div? I attempted using overflow:hidden for the body, which stops scrolling but causes the page to shake when the scroll bar disappears. Is there a solution that allows me to keep ...

javascriptjquerycss

How can one get rid of a sudden strong beginning?

Recently, I delved into the world of CSS animation and encountered a frustrating issue. I've tried numerous methods and workarounds to achieve a smoothly looping animation without interruptions. Despite my efforts, I have not been able to replicate th ...

javascripthtmlcsscss-animationscss-animation-direction

Selecting Child Elements in CSS

Suppose I have the below HTML structure: <div id="div1"> .... <span class="innercontents">...</span> .... </div> Is it possible to target only the child elements of a specific parent ID? For example, could I use this CSS rule? # ...

htmlcsscss-selectors

Disable text input in Flatpickr and remove the default iPhone calendar

We are facing an issue with the iPhone and iPad when using flatpickr for our calendars. When the calendar is opened, the cursor automatically focuses on the text box, triggering the default iPhone calendar to appear below. This problem does not occur on An ...

cssiphoneflatpickr

Using an HTML ellipsis without setting a specific width

I am working on achieving a specific layout as shown in the screenshot below. If both SPAN and B fit within the box, they should be displayed one after another. If they do not fit, SPAN should have an ellipsis while B is fully displayed (never larger tha ...

htmlcsshtml-tablewkhtmltopdfellipsis

CSS 3 - Apply transition to the 'display' property

I have a question about using the transition effect in conjunction with the display property: Currently, I am testing on Safari. input.input_field { display:none; transition-property: display; transition-duration: 2s; -webkit-transition-p ...

htmlcsssafaritransition

Tips to prevent the webpage from scrolling to the top when clicking on an anchor with an ID

I have developed a CSS/HTML carousel that consists of 4 slides. The goal is to display the selected slide when clicking on the bottom button (a href). However, I am facing an issue where every time I click on a link, the selected slide appears as intended ...

javascripthtmljquerycss

Resize images in PHP and MySQL with precision without distorting the image

I'm looking for a solution to resize images on upload without deforming them. The current code uploads the image and stores it in the database, but I need to add resizing functionality. I'd prefer not to use JavaScript, but if necessary, please i ...

phphtmlmysqlcssimage

Slicknav is failing to appear on the screen, although it is being

After spending hours trying to implement a slicknav menu into my school project, I'm stuck and seeking guidance. Despite having some coding experience, I can't seem to find the solution to my problem. Any help, insight, or tips on fixing or impro ...

javascriptjquerycsshtmlslicknav

How can you stop text in a textarea from spilling over into the padding?

When I add padding to a textarea element and type more than four lines of content, the content overflows into the padding. Is there a way to prevent this? I have looked at the suggestions in this thread and this one (specifically for google-chrome), but t ...

htmlcss

How can the 'Read more' feature be modified to impact multiple boxes? (Using jQuery, JS, and CSS)

I am trying to add a 'Read more' feature on my friend's website. I was able to achieve the desired effect, but when I tried to adjust the alignment of the box, it affected the 'Read more' feature. Original design: https://codepen. ...

javascripthtmljquerycssjquery-ui

JavaScript incorporates input range sliding, causing a freeze when the mouse slides rapidly

Currently working on a custom slider and encountering an issue. When quickly moving the mouse outside the slider's range horizontally, exceeding its width, the slider doesn't smoothly transition to minimum or maximum values. Instead, there seems ...

javascripthtmlcss

Instructions on creating an "already clicked" style for an <a> href

Is there a solution to display my href as already clicked? I'm looking for a property or method that does not involve css or javascript. ...

htmlcss

Modifying the CSS design of specific columns within a table created using JavaScript

A unique way to showcase JSON data in a table is by utilizing a for loop within a function. This method, however, does not assign an ID or Class to the table. To hide the final three columns of this table using CSS, the following code can be employed (whe ...

javascriptcss

Is there a way to adjust the brightness of specific sections within an image using html, css, and js?

I am working on a project where I have an image with tags underneath that correspond to different parts of the image. For example, if the image is of a dog, one of the tags could be 'nose', indicating the portion of the image around the dog' ...

javascripthtmlcssfrontend

Having issues with CSS animation keyframes not functioning properly in NextJS

Currently, I have a straightforward component in NextJS that is displaying "HI" upon loading. This component fades in when rendered, but I am facing an issue while trying to pass a prop to make it fade out. The problem lies in the fact that even though the ...

cssnext.jscss-animations

Displaying image issues persist on Safari browsers for Mac and iPhone

I am currently working on a website and facing an issue with the responsive image display on Safari for Mac/iPhone. Here is the code snippet I have been using: <head> <meta charset="utf-8"> <meta http-equiv="Content-Language" co ...

htmlioscssiphonesafari

Flexslider doesn't adjust the height of the viewport when displaying a shorter image in the slideshow

Is Flexslider not resizing its viewport height according to the current image on your site? The fixed height seems to be causing blank white space under shorter images. Are you inadvertently overriding Flexslider's responsive height function? Is there ...

htmlcssflexslider

Controlling the back DIV while maintaining overlapping layers

I successfully positioned my right hand content on top of the leaflet map in the background using CSS properties like position and z-index. However, I am looking for a way to make the overlapping div not only transparent but also non-interactive while stil ...

htmlcssvue.jsleaflet