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.

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

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

What is the best way to modify the state of a particular element in an array when using useState in React?

In my Next.js application, I am using a useState hook to manage state. Here is how my initial state looks like: const [sampleData, setSampleData] = useState({ value1: '', value2: '', value3: [] }); To update the state ...

javascriptreactjsnext.jsreact-hooks

Sending data over a network using Socket and node.js

Trying to update a location on a Google Map using socket.io and node.js. I have 2 different methods for updating the map. There may be some basic issue as I am new to this. 1) Method using an API call that works: app.post('/location', function( ...

javascriptnode.jssockets

Adjusting value of one input field according to the content of another text field in an

Just starting out with Angular and I am looking to dynamically change the value of a hidden input field called 'cc_card' based on the first digit entered in another input field called 'cc_number'. For example, if the user enters 5 in &a ...

javascriptjqueryhtmlangularjs

bespoke theme background hue

I currently have material-ui@next installed and I am attempting to customize the background color of the theme. Here is what I have tried: const customizedTheme = createMuiTheme({ palette: createPalette({ type: 'light', primary: purple ...

javascriptreactjsthemesbackground-colormaterial-ui

Is it possible to disable the timeout for a single call using Axios?

I have set up an axios client instance in my application like this: const backendClient = axios.create({ baseURL: window['getConfig']?.url?.backend, httpsAgent: new https.Agent({ rejectUnauthorized: false }), timeout: window['getConfig ...

javascriptreactjsaxios

Tips for maintaining an open sub menu while hovering over a link

I'm currently working on a navigation menu using jQuery that includes categories, subcategories, and their subsequent subcategories. However, I am facing some issues with it not functioning as intended. To avoid cluttering this space with excessive HT ...

jquerycssdrop-down-menu

Endless Loop of Http Redirects in Node.js with Express

I need assistance with the code below which is meant to redirect all http traffic to https. // Implement redirect logic to ensure usage of https in production, staging, and development environments app.use((req, res, next) => { // Do not redirect to h ...

javascriptnode.jsexpress

The navigation in Framework 7 is causing issues with the on-click functionality

Utilizing the framework's built-in formToJSON() function, I have been able to retrieve form values. By utilizing a click event, I am able to log the values. $$("#query-submit").on("click", function () { var queryForm = app.formToJSON("#query-form ...

javascriptajaxperformancehtml-framework-7

positioning two out of three items in a navigation menu to the right and the remaining one to the left

I am looking to design a navigation bar that spans the full width of the screen, with the logo on the left side serving as a link back to the home page. Additionally, I want to include elements for register/login and cart. The background color should cove ...

csshtml

Toggle between different socket.io servers for seamless connectivity

I'm looking for help with a situation where I need a socket.io client to connect to server A, disconnect, and then connect to server B. Any ideas on how I can achieve this? Thanks in advance! UPDATE: Attached below is the code snippet that's gi ...

javascriptnode.jssocket.io

Setting maxFontSizeMultiplier for all Text components

Is there a way to apply the prop maxFontSizeMultiplier={1} to all instances of <Text/> in my app without the need for a custom component? ...

javascriptreactjsreact-native

Strange spacing below body element discovered while browsing website in Firefox 7

Currently, I am facing an issue on my website in Firefox 7. A margin is causing the gradient in #wrapper to shift upwards from the bottom, disrupting the layout. Despite resetting the margin to 0 on body and html, I am unable to pinpoint the root of the pr ...

htmlcssfirefox7

Vue 3 now allows for disabling the automatic renaming of CSS properties like "top/bottom/left/right" to "inset"

I noticed that Vue (or maybe Vite) automatically changes my css style attributes from "top: 0; right: 0; left: 0; bottom: 0;" to "inset: 0px;" However, this adaptation doesn't work well for older browsers that do not support the i ...

cssvue.jsvuejs3vite

How to toggle the visibility of a div with multiple checkboxes using the iCheck plugin for jQuery

I customized my checkboxes using the icheck plugin to work with both single and multiple checkboxes, including a "Check all" option. Here is an example of how it looks in HTML: HTML : <div>Using Check all function</div> <div id="action" c ...

javascriptjqueryhtmlcssicheck

Are you transitioning from traditional scroll pagination to using ajax?

Is it possible to replace scroll pagination with ajax? I'm looking for an alternative to the large scroll pagination query and wondering if ajax could be used instead. Here is the current code snippet: feeds.scrollFeedPagination({ 'contentPage ...

javascriptjqueryajaxpagination

Troubleshooting: Resolving issues with Vue's global EventBus in my project

I am using Vue.js within a Laravel project and I am encountering an issue with the global event bus. I have created an event-bus.js file and imported it where needed. Although events are being generated upon clicking, there seems to be no reactions from th ...

javascriptlaravelvue.js

Display a div in front of another using Material UI when hovering

Is there a way to display a black transparent div in front of a <MediaCard/> when hovering over it? Below is the code snippet I am using with Material UI: <Box> <Typography variant='h3'>Home Page</Typography> < ...

cssreactjsmaterial-ui

Streamline retrieval of alphanumeric indexing within json

When accessing json data using jquery, I came across an index structure like this: data.rows[0].student_1 data.rows[0].student_2 data.rows[0].student_3 and so on... Now, I'm looking to automate this process by creating a loop that allows me to acces ...

javascriptjqueryjson

Prevent JavaScript from being entered into the form

I'm currently developing an "HTML editor" for one of my webpages. Right now, I want to ensure that the editor only allows input of HTML and CSS elements without any Javascript (or Jquery). I've been attempting to prevent the use of <script> ...

javascriptphpjqueryhtml

What is the best way to showcase the properties of multiple files with the help of

I have been attempting to utilize jQuery to exhibit the specifics of several uploaded files. Below is my code: <!DOCTYPE html> <html> <head> <title>jQuery Multi File Upload</title> </head> <body> <f ...

javascriptjqueryfile-uploadjquery-file-upload