Adaptive Website displayed within an iframe

Currently, I have a responsive website that can be viewed here.

The main objective is to embed this site into an iframe while maintaining its responsiveness.

I attempted embedding my site in JSFiddle for testing purposes, which you can see here.

However, the form seems elongated when viewed on a smartphone screen.

https://i.sstatic.net/ntiGH.png

My aim is to achieve a layout similar to the image displayed above.

https://i.sstatic.net/Ns6Sh.jpg

I have utilized all the responsive design techniques in my toolbox. This includes using the Bootstrap grid system (col-xs-12). Additionally, I have tried placing the following code at the top of my HTML page:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

I am hopeful that someone can point out what I may have overlooked in my approach.

javascripthtmlcsstwitter-bootstrapresponsive-design

Answer №1

Give this a shot:

html,
body {
  height:100%;
  margin:0;
}
iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  margin:0;
  border: 0;
}
<iframe src="http://45.55.92.53/"></iframe>

Answer №2

Attempting to generate it as an HTML file and access it from my mobile device, the responsiveness appears to be functioning properly. Therefore, the problem seems to lie in the rendering of JSFiddle, rather than within your code.

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

The Vue component functions properly after undergoing the Hot Reload process

Spent countless hours searching online for a solution, but to no avail (plus an explanation). I am encountering an issue with my Vue select component that is connected to a Datatable: <select @change="statusChanged()" v-model="active" name="Fi ...

javascriptvue.jsdrop-down-menudatatable

Ensuring DIV Fills without Compromising Aspect Ratio

I am currently attempting to fill a div with an image in both width and height. However, I have only been able to control the width while the height respects the aspect ratio without filling the div completely. I have tried various combinations of backgrou ...

csswordpressbackground-imagefillbackground-size

Retrieve the rendered component color variables exclusively from the global color variable file

color_variables.css: [data-theme='default'] { --avatar_bg: #000; --avatar_text: #fff; --avatar_border: red; --button_bg: blue; --button_text: #fff; --button_border: darkblue; --modal_widget_bg: orange; --footer_bg: yellow; --foo ...

javascriptcssreactjsnpm

What is the best way to implement a constant countdown timer in JQuery that remains unaffected by page refreshes?

I have implemented a time countdown feature in my web app using this jQuery plugin. However, I am facing an issue where the countdown starts from the beginning every time the page is refreshed. I want the countdown to remain consistent for a month (30 days ...

javascriptjquery

index.html: using jquery for selecting colors

I attempted to integrate a jQuery plugin into my application, but it doesn't seem to be working. In the head section of my code, I have included: <link rel="stylesheet" media="screen" type="text/css" href="./style/colorpicker.css" /> <script ...

jquerycss

Efficiently managing modules with requirejs and Backbone.Marionette

After organizing the file structure of my web app, utilizing RequireJs and Backbone.Marionette, it now looks like this: |- main.js |- app.js |- /subapp1 |- subapp1.js |- subapp1.router.js |- /subapp2 |- subapp2.js | ...

javascriptbackbone.jsrequirejsmarionette

React NextJS: Unable to retrieve cookies or properties post redirection

Within my nextJS application, when a user logs in on the login page, a cookie is created with a token and then they are redirected to the main page which utilizes the main component. However, within the Main component, I am encountering an issue where the ...

javascriptreactjscookiesnext.js

What sets Joomla file inclusion apart from the rest?

Can someone please explain the difference between including a JavaScript script file in the following two ways? I created this within a system plugin in Joomla and included the JavaScript file inside the "onAfterInitialise" function. 1) <script type ...

phpjavascriptjoomlajoomla2.5

What is the best way to retrieve a linked filter in Vue from another?

I have created a file to store filters linked to my Vue object, and it is being imported into my App.js. One of the filters I have needs to use another filter: Vue.filter('formatDateTime', value => { if (value) return moment(String(value ...

javascriptvue.jsfilter

Exploring the functionalities of ng-value and ng-model in text input form fields

As I create a form to update information in a database, everything seems to be functioning properly. The selected data is being retrieved correctly; however, it is not displaying in the text inputs on the webpage. Although the information appears correct ...

javascriptangularjs

Which is better for privacy: underscored prototype properties or encapsulated variables?

There's something that's been on my mind lately - it seems like people are aware of something that I'm not. Let's take a look at an example in FOSS (simplified below)... When creating a class in JavaScript, I personally prefer Crockford ...

javascriptinstance-variables

Tips for avoiding content appearing beneath overlapping elements

I am facing an issue with a hero image that has an overlapping box. I want to add content below the box but it ends up appearing behind the box. How can I ensure that the content shows below the box while maintaining responsiveness? .shell { display: ...

htmlcssflexbox

Ways to collect email address or name from an email message

Suppose I send an email to someone with a link at the bottom. The text of the link might be something like click me. When the user clicks on this link, they will be directed to a webpage. On this webpage, a message saying "Thank you" will be displayed a ...

javascriptphpjqueryhtmlemail

Replacing text in the main navigation bar with sIFR

Could this menu layout be improved? <div class="navigation"> <ul id="nav-menu"> <li class="active"> <div class="sifr-r active"><a href="#" title="home" class="top-link"><span class="blue-small">01.</span& ...

htmlcsssifr

Merging multiple observables with RxJs forkJoin

UPDATE : I'm currently facing a challenging issue that I can't seem to resolve. Within my code, there is a list of objects where I need to execute 3 requests sequentially for each object, but these requests can run in parallel for different obje ...

javascriptangulartypescriptrxjsobservable

The typing library for Angular does not properly identify the JQueryStatic object

Encountered an issue with the Angular declaration file: Error TS2304: Cannot locate identifier 'JQueryStatic'. The typings for jQuery are installed and properly declare JQueryStatic as an interface. Looking for solutions to resolve this error. ...

javascriptjqueryangularjstypescripttypescript-typings

The property of undefined map cannot be read

import React from 'react'; import { Card, Text } from "react-native-paper"; import { SafeAreaView, } from "react-native"; class HackerNewsClone extends React.Component { constructor(props) { super(props); this.sta ...

javascriptarraysreactjsreact-nativeapi

When a React component mounts repeatedly, it can lead to complications within the useEffect hook

In our React application, we have implemented a custom hook to send data to Google Analytics. To avoid sending duplicate values, we included a unique "marker" string that captures the value of the data being sent. The hook generates a new "marker" each tim ...

javascriptreactjsreact-hooksreact-state

Should we avoid styling HTML tags?

Would it be considered poor practice, for instance, to apply the following CSS rules to all images on my webpage in order to make them responsive: img { display: inline-block; height: auto; max-width: 100%; } Instead of using img-responsive on each ...

htmlcss

Automatically close the multiselect dropdown when the user interacts outside of it (varied scenario)

For those interested, check out this jsfiddle link: http://jsfiddle.net/jaredwilli/vUSPu/ This specific code snippet focuses on creating a multi-select dropdown feature. When a user chooses options from the dropdown and then clicks outside of the menu are ...

javascriptjquerycssangularjs