Ways to create a responsive Instagram iframe without using JavaScript

Currently, I am attempting to create a responsive grid featuring Instagram posts. Unfortunately, the padding-bottom hack isn't effective for my particular situation. After some experimentation, I discovered that the height could be calculated by adding 306px to the width.

Here is how I achieved this using jQuery:


let $instagramPosts = $('.instagram-post'),
    width = $instagramPosts.eq(0).width(),
    differenceWH = 306;

$instagramPosts.height(width + differenceWH);

I'm wondering if there is a way to achieve this without using JavaScript, solely relying on CSS?

jquerycssiframeinstagramresponsive

Answer №1

Considering the unknown initial height, you should explore the usage of css calc(). Let's assume the initial height is represented as x. To perform the calculation, apply the following code:

.instagram-post {
    height: calc(x + 306px);
}

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

No values being passed in POST request during Ajax call

I'm dealing with a situation where I have a table that has sortable rows. These rows are generated from a mysql database using a field called "displayorder" to determine the order. My goal is to use AJAX to update the database whenever a row is dragge ...

phpjquerymysqlajax

"Successfully made an Ajax request to the web handler, however, the response did not

Within my ASP.NET project, I have a Generic handler with the following code: public void ProcessRequest ( HttpContext ctx ) { try { ctx.Response.ContentType = "text/json"; var jsonData = new StreamReader(ctx.Request.InputStrea ...

jqueryasp.netajaxgeneric-handler

Having Trouble Aligning Contents in a Row Horizontally using Bootstrap 5

My Images are refusing to align in a horizontal row no matter what I try. Output: https://i.sstatic.net/echGV.png .img-size-square { width: 100%; height: auto; max-width: 400px !important; max-height: 400px !important; } .container-f ...

htmlcssbootstrap-5

Creating a mask for both integer and decimal values in jQuery

I have created a validation mask in my code to verify user input when onBlur unitprmask:/^\d+,\d{1,1}$/, However, the current mask only allows for decimal numbers, requiring at least one decimal place. I want users to be able to enter whole in ...

javascriptphpjqueryregex

The function call with Ajax failed due to an error: TypeError - this.X is not a function

I am encountering an issue when trying to invoke the successLogin() function from within an Ajax code block using Typescript in an Ionic v3 project. The error message "this.successLogin() is not a function" keeps popping up. Can anyone provide guidance on ...

jqueryangulartypescriptionic-framework

The POST variable consistently remains void

The approach I am using to handle the data sent with jquery.ajax involves sending an empty string by default. Whenever there is a change, I monitor the input for changes and resend the data. Everything seems to work fine in the console, but in PHP, $this-& ...

javascriptphpjquerysqlajax

Transforming Button style in jQuery Mobile version 1.3.0

There are reports of a new function in jQuery Mobile 1.3.0 that allows for dynamically changing button themes using JavaScript: http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/ However, upon attempting to run the provided code snippe ...

jqueryhtmlcssjquery-mobilejquery-mobile-button

Steady Navigation Bar in Javascript without Bouncing

While experimenting with a fixed navigation bar, I've encountered an issue where the content below jumps up on the page when the navigation bar "fixes" itself to the top of the screen. You can check out the JSFiddle I've been working on for refer ...

javascriptjqueryhtmlcssnav

Reorganizing content under an image as the browser is resized by implementing a media query

In the footer section of my document, I have text positioned next to an image (floated to the right). However, when I resize my browser to a minimum width of 768px, both the text and image lose alignment. My goal is to centralize both elements with the ima ...

htmlcssmedia-queries

The Beginner's Guide to Mastering Ajax and Grails

As a newcomer to Grails and AJAX, I find myself struggling to understand the concept of AJAX with limited resources online. My current understanding is that in Grails, if I want to trigger a method in one of my controllers when a specific part of my HTML ...

htmlcssajaxgrailsweb-applications

Display a tooltip upon the page's initial load and automatically hide it afterwards

On page load, I want to display a tooltip for a few seconds or hide it when another tooltip is hovered over. I have been trying to achieve this but because my tooltips are nested in multiple divs due to using an Elementor Addon, I am facing some confusion ...

htmljqueryfunctiontooltip

No children were located within the div element

Presently, I am attempting to disable an image for the initial element in each faqs div class in HTML. To achieve this, I am aiming to target the parent element of faqs and then navigate downwards to locate the initial list element using the following Java ...

javascriptjqueryhtml

What is the best way to apply a fade effect to a jQuery background animation?

Hello, I am interested in incorporating a fade-in effect into this jQuery code and ensuring that it functions on touch devices when clicked. $('#one').hover(function() { $('#one_text').css('background-color', '#fdb ...

jqueryhoverclickeffect

Deactivate the button temporarily during an AJAX request

My current challenge is trying to deactivate a button after it has been clicked. I attempted the following: $("#ajaxStart").click(function() { $("#ajaxStart").attr("disabled", true); $.ajax({ url: 'http://localhost:8080/jQueryTest/tes ...

ajaxjquery-uijquery

Having trouble inserting a new list item within a Bootstrap tab

I have a question regarding the creation of a tabbed interface using the code below: <ul class="nav nav-tabs"> <li class="active"><a href="#">Chart 1</a></li> <li><a href="#">Chart 2</a></ ...

htmlcsstwitter-bootstrap

Error with Display of ASCII Character 62 in Superfish Menu

Currently, I have implemented the Superfish menu on my website. In order to indicate sub-menus within my menus, I have opted to utilize the character entity code &#62;, which historically has represented ">". Oddly enough, while viewing my website ...

htmlcssinternet-explorer-8superfish

Is your Bootstrap button displaying a blue border?

Recently, I incorporated buttons into my website using a bootstrap template. However, after customizing the button colors, I discovered an annoying blue outline appearing around each button. Despite numerous attempts, I have been unsuccessful in eliminatin ...

cssbootstrap-4

Creating a visually stunning image grid akin to the meticulously designed layouts found

Forgive my lack of knowledge, but I'm curious about how to create an image or text grid similar to Tumblr using HTML and CSS. I'm looking to achieve a layout like this: ...

javascriptjqueryhtmlcss

Ways to display an icon in Angular 10 only when it is hovered over

Just getting started with Angular and still learning the concepts. Trying to figure out how to show an icon only when it's hovered over. Can anyone assist me? Sorry, can't share the code because of company rules. The icons are for sorting and ...

htmlcssangularicons

Error in Jquery click function not being triggered

I'm in the process of developing an eCommerce platform where users can choose options and have their shopping carts automatically updated using jQuery. Users will be presented with a few radio buttons to select from, and as they make their choice, th ...

javascriptjqueryhtml