How to display the css mobile view resolution of a react.js component on a full screen desktop view without actually minimizing the browser window?

Question

I have 3 different react.js projects integrated into one project. I should display project one on the left side of the screen, project two to the right and project three at the bottom of both. But the web view content of project one is very big in height and width and will get overlapped because of it's design if I try to change its width and make it float left. I'm not supposed to change the actual code of project one. Luckily, I have a mobile screen view of the project one written using css media queries and it looks scaled down in size which is perfect for me to use it.

I need to figure out a way to display the project one mobile resolution breakpoint code I have on the left side of the screen, say width:45% float:left. Somehow make the component/project one to fit into a window(which is positioned on the left of screen like I need) with size of mobile breakpoint or less, so the component inside that window thinks that "the browser window is small and I have to display the mobile view of me", if it makes sense. I tried modifying the head tag of project one - tried changing initial-scale and width of viewport meta tag in the head tag. Nothing seems to work. Not sure if I put it the right way, but if someone could make sense out of it and help, I would highly appreciate it.

handle the resize event of the window and update your current view — Jatin Parmar, Nov 26 '19 at 07:10
Sorry, cannot provide the code due to security concerns. Although will be happy to provide you any clarifications. — dharani kumar, Nov 26 '19 at 07:14
use [`iframe`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)s ? — Gabriele Petrioli, Nov 26 '19 at 07:57
iframes won't work unless the application is hosted I believe. Also it has many cons and is not the suggested option. Let's just say I can't use iframes, is there any other way? — dharani kumar, Dec 04 '19 at 10:07

score 0 · Answer 1 · answered Nov 26 '19 at 08:11

0

You can use iframe to position your project in whatever layout you want. You can fix heigth and width of iframes.

.iframes {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bottom-iframe {
  width: 100%;
  margin: 0 auto;
}

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>repl.it</title>
 <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
 <div class="iframes">
  <iframe width="300" height="300"></iframe>
  <iframe width="300" height="300"></iframe>
 </div>
  <div class="bottom-iframe">
  <iframe width="300" height="300"></iframe>
  </div>
 <script src="script.js">
 </script>
</body>

</html>

answered Nov 26 '19 at 08:11

Lalit Kumar

19
1
7

Do I need to call the component within iframe tag? cuz I don't see any content, just the two empty windows @Lalit Kumar – dharani kumar Nov 26 '19 at 10:57
@dharanikumar yeah, you need to put your components inside the frame tags. Only then you will be able to see the contents. – Lalit Kumar Nov 28 '19 at 17:18
Iframes is not a good way to get the work done. Check this answer [link](https://stackoverflow.com/a/23178537/8740131). and please do let me know if there's another way to do it. Thankyou – dharani kumar Dec 04 '19 at 10:10

How to display the css mobile view resolution of a react.js component on a full screen desktop view without actually minimizing the browser window?

1 Answers1