Is it possible to create a CSS-only solution that can adapt variable content to a vertical grid without using JavaScript?

I am currently facing a minor issue with a website I am working on that, while not a major problem, would be great to resolve. The site, including all promotional materials for the event it represents, has been designed based on a precise square grid. Everything appears to be functioning properly, except for one small hiccup:

At the bottom of the page, there are some paragraphs of text that are causing the layout to shift by a third of a grid square. Since we have set the line-height of the text to match this measurement, is there a way to apply some intelligent padding at the end of these paragraphs to realign the following elements to conform to the grid? Without resorting to Javascript calculations, is there a solution available?

javascripthtmlcss

Answer №1

Is there a clever way to add some "intelligent" padding at the bottom of these paragraphs in order to realign the following elements on the grid?

I believe a pure CSS solution is not feasible, especially considering that varying browsers and operating systems may display text with slightly different heights.

The only alternative I can offer is a JavaScript workaround, although you may prefer not to use it:

document.body.style.height = Math.round(document.body.offsetHeight/72)*72 + "px";

It's short, at least.

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

Displaying an array using Javascript that contains variables along with HTML code

First of all, thank you for your help and support! I am struggling with correctly outputting HTML code with variables using jQuery and jQuery Mobile. I receive results from a PHP database, separated by "," and converted into a JavaScript array successfull ...

javascripthtmlarraysvariablesoutput

Tips for identifying a webpage and making class modifications based on it

I am working on a customized bar with 4 distinct parts. Each part corresponds to a different page on the website. I want each part of the bar to change color based on which page the user is currently browsing. For example, if the user is on page A, I want ...

javascriptjqueryhtmlcss

Message displayed on picture carousel

<div class="slider"> <div> <img src="http://kenwheeler.github.io/slick/img/fonz1.png" /> <p class="projectname">Project</p> <p class="clientname">Client Name</p> </div> &l ...

javascriptjquerycss

Counting numbers and displaying results using JavaScript with a JSON string

Looking at this JSON string { "ResultSet": { "version": "1.0", "Error": 0, "ErrorMessage": "No error", "Locale": "us_US", "Quality": 40, "Found": 2, "Results": [{ "quality": 72, ...

javascriptjsonstringcounting

How do I delete an attached file in an input document? (Firefox)

Is there a way to smoothly remove an attachment selected in the <input type="file"> element? In Firefox, removing an already selected attachment can be tricky. Simply deleting the name or trying to click open may not work. An additional solution mi ...

javascriptfirefoxattachment

Utilizing $.each to dynamically add data to a jQuery Mobile listview

Trying to implement a data reading mechanism using ajax resulted in unexpected html tag generation for <ul> <li>. The code snippet is as follows: (function( $, undefined ) { $(document).on("pagecreate", ".jqm-demos", function(){ ...

javascriptjqueryhtmljquery-mobile

Vertical stability bar

I need help creating a vertically fixed navigation bar for my website. Currently, I am using a method that has been discussed in various posts: HTML: <html> <head> src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">< ...

javascripthtmlcss

Retrieving Text Between HTML Tags Using jQuery

Disclosure: I am fully aware of the messy HTML code in this legacy application. Unfortunately, due to its extensive dependencies, making any changes to the HTML structure is not feasible. Despite the circumstances, here is the code snippet at hand: <t ...

javascriptjquery

The object retrieved from the AJAX call is not defined on the client's server specifically

I am dealing with a web app issue where an AJAX call is functioning as expected on local and test servers, but not on the client's end. The client reported that after some changes were made to the architecture of the app and it was reuploaded to thei ...

javascriptjqueryjson

Verify for redundant entries in the database when the button is clicked

I have a specific requirement that involves verifying whether the user is repeatedly inputting the same Project and Survey No. An alert should be triggered if the same combination is entered twice upon button click. Below is the HTML code snippet: <t ...

javascriptc#sqlasp.netajax

Create a div element that can be expanded on smaller devices

Is it possible to expand a div while hovering on a small or x-small device? I want to achieve something like this: https://i.sstatic.net/doJKa.png Currently, I can only hide the yellow div when the page is displayed on a small device. I am looking for a ...

javascriptcssresponsive-designbootstrap-4

What is the best way to compress the div and its contained text while still maintaining responsiveness?

When I got home from work, I decided to create a website similar to the attached image. However, I encountered an issue with styling the "TECHNOLOGY" div in the top right corner and making it responsive while staying within the parent div. Additionally, an ...

htmlcsspositionresponsiveskew

Using Angular 2 to pass a function as an argument to a constructor

How can I create a custom @Component factory where a function is called to return a component, passing the widgetName to the constructor or super constructor? export function createCustomKendoComponent(selector: string, **widgetName**: string) { @Co ...

javascriptangularcomponentsfactory

Enhancing Scroll Speed with Jquery Load More

Experiencing a minor glitch with the code below. It seems to be functioning properly, but an issue arises when users scroll down multiple times before the data loads completely. This can result in the data loading twice or skipping sections. Any suggesti ...

javascriptjquery

Discovering ways to extract precise information from a JSON response through API using AJAX. The structure of the JSON data appears unusual and

This sample code contains a thesaurus of synonyms. The search term is "refund". Below are the provided codes: <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> </head> ...

javascriptjsonajaxapijsonp

Using a semicolon right after "id" is recognized as an unexpected token

I encountered an issue while attempting to run my express.js program. The main server fails to start and displays the following error message. id; ^ SyntaxError: Unexpected token ; at new Script (vm.js:80:7) at createScript (vm.js:274:10) ...

javascriptnode.jsexpress

Encountering an issue with a Discord bot causing it to malfunction and deviate from its intended

Initially, everything appears to be functioning properly with the bot. When I execute the ?listen command, it responds correctly with bot is collecting messages now.... However, the ?stop command does not seem to have any effect. Furthermore, when I try th ...

javascriptnode.jsdiscord.js

How can I apply a texture to a 3D rectangle in THREE.js?

I am attempting to create a 3D box in THREE.js that represents a box made up of 2x4 Legos, measuring 24 pieces wide by 48 pieces long and an unspecified number of pieces tall. I have created a texture displaying this pattern using random colors: https://i ...

javascript3dthree.jstextures

Using SVG sprites from external sources alongside child nodes

I am working on a website that contains multiple SVG icons and an SVG logo that need to be animated. To improve readability, I have implemented a sprite system using an external file. For loading the sprites, I am utilizing XMLHttpRequests at the start o ...

javascripthtmlsvgxmlhttprequest

Establishing a primary data format for a backbone collection

Is there a way to configure a Backbone collection to always include a content type of "application/json" in every request it makes? I have tried the following code snippets: myCollection = Backbone.Collection.extend({ headers: {"Content-Type": 'ap ...

javascriptjquerybackbone.js