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

Creating a standalone static page in Wordpress showcasing the header, sidebar, and footer of the twenty fourteen template

I have created a static blank page containing my website's header, sidebar, and footer. However, I am trying to remove the 'style' that is being enforced by the CSS of my WordPress template on the page. Below is the code I am using: <?p ...

phphtmlcsswordpress

Searching for a jquery control for adjusting audio volume that is not in the form

Has anyone come across a JavaScript plugin that can control music volume? I've already written all the necessary functionality, but now I just need the user interface. Instead of a traditional slider, I'm looking for something more unique like a ...

jquery

Close button situated at the top-right corner overlapped by HTML/CSS styling

Currently attempting to position a button overlapping and extending outside of its parent div, much like the illustration provided. However, my current efforts result in the button being contained within the parent DIV. The visual reference below showcases ...

htmlcss

Is there a way to still access the data from a radio button even if it hasn't been selected?

I'm currently working on a questionnaire feature and facing an issue where I need to capture all answers, even if the radio button is not checked. Here's a snippet of the HTML code: $('input:radio').each(function () { if ($(this). ...

javascriptjquery

Create a dynamic tree structure using Bootstrap Treeview and AJAX requests with jQuery and PHP

I'm currently working with Bootstrap-Treeview and I'm facing some challenges in setting the data into the Treeview using Ajax and PHP. On the server side, there is a PHP file named fetch_data.php which looks like this: <?php includ ...

phpjqueryajaxtreeview

Browser prioritizes Bootstrap over custom CSS styles

I've organized my stylesheet directory like this: stylesheets bootstrap.min.css style.css Within my style.css file, I've made adjustments to the pre tag styling: pre { background-color: #d9edf7; border: #d9edf7; color: navy ...

htmlcsstwitter-bootstrapgoogle-chromestylesheet

Check for length validation including spaces in JavaScript

My code includes a functionality that calculates the length of characters in a text area using both JSP and JavaScript: <textarea class="textAreaLarge" id="citation" rows="20" cols="180" name="citation" ...

javascriptjavajqueryjsp

Guide to making a JavaScript button that triggers an iframe to open upon user clicking the button

I'm currently enhancing the comment section for posts on my website. I am looking to implement a button in javascript that, when clicked, will open an iframe window displaying comments similar to how Facebook does on their post. If there are other lan ...

phpjavascripthtmliframe

Utilizing jQuery UI to dynamically alter CSS classes

I'm currently working on a project and could use some assistance. I have divs that are droppable using jQuery UI. While everything is functioning properly and I can drag and drop, I am looking to modify the opacity of the div I am dragging by changing ...

javascriptjqueryhtmlcssjquery-ui

Using JavaScript to ensure that a div is not hidden on page load if a checkbox is unchecked

Upon inspecting a page, I am implementing a script to check if a checkbox is selected. If not selected, the goal is to hide a specific div element. While troubleshooting this issue, I suspect the problem may be due to the lack of an inline element within t ...

javascriptjqueryhtmlcookiescheckbox

Applying a class change in Vue.js upon mounting

How can I make a button element with a .hover property trigger the hover animation as soon as the page loads? I want to apply a class to the button when the page is mounted and then remove it later. What is the best approach for this? I considered using a ...

javascripthtmlcssvue.jsvuejs2

Dealing with AngularJS memory leaks caused by jQuery

How can I showcase a custom HTML on an AngularJS page using the given service? app.service('automaticFunctions', function ($timeout) { this.init = function initAutomaticFunctions(scope, $elem, attrs) { switch (scope.content.type) { ...

javascriptjqueryangularjsmemory-leaks

Anchoring links on a webpage that provide users with a clear indication of their current position within the page

In the scenario of a single-page website with various sections (divs) and a header containing links to different anchors on the page, there is a desire to have an indicator highlight which anchor the user is currently viewing. An example of this can be s ...

javascriptcsshtmlhyperlink

Deactivate the dependent picklist functionality on a Visualforce page

After successfully disabling all input and select elements on my page using the following code: $('input').prop('disabled',true); $('select').prop('disabled',true); I encountered an issue with two picklist fields i ...

javascriptjquerysalesforcevisualforcepicklist

Guide to aligning a div element along the right edge of the webpage

I'm struggling to align this div all the way to the right side of the screen. Below is the HTML: <html> <head> title></title> <link rel="stylesheet" type="text/css" href="../css/style.css"/> </head> <h1&g ...

htmlcss

Navigating jQuery Tabs by Linking to a Specific Tab in a Separate File

I am currently using Bootstrap 3 to develop a basic website. On the about.html page, I have set up Tabs with various content. <ul class="nav nav-tabs" id="TabSomos"> <li class="active"><a href="#somos" data-toggle="tab">About Us</a> ...

javascriptjqueryhtmltwitter-bootstraptabs

Transmitting a sequence of JSON information from php to JavaScript,

I am struggling to fetch a series of JSON data from PHP to my JavaScript file. Initially, I have multiple JSON data stored in an array in PHP, and I am echoing each one by looping through the array in my JavaScript file. <?php $result = array('{ ...

javascriptphpjqueryarraysjson

jquery logic for iterating through all elements in a select menu encountering issues

In search of a solution to iterate through all options in a dropdown list using code, comparing each to a variable. When a match is found, I aim to set that particular value as the selected item in the dropdown and then exit the loop. Here's what I&ap ...

javascriptjqueryajax

Unusual actions from the jQuery Steps extension

I am currently utilizing the jQuery Steps plugin (FIND IT HERE). The issue I'm facing lies within an IF statement that is causing the wizard to return to the first step instead of staying on the current indexed step. While all other IF statements are ...

javascriptjqueryhtml

jQuery width property does not seem to be functional on menus that do not contain any dropdown

I am currently working on creating a menu that displays arrows underneath the items when hovered over or when the .active class is added to the menu. Everything is working fine, except for the fact that it only works on menus with drop-downs and the child ...

javascriptjqueryhtmlcss