I want to resize an iframe with my other website inside while keeping it centered. Scaling is working fine, but centering has been a challenge for me.
I've attempted using flex with justify-items: center & align-items: center on the parent element, but the iframe remains stuck in the top left corner. I also tried using margin: auto, but it didn't work as expected. Adding margin-left did shift it slightly. I am puzzled why setting margin: auto wouldn't center it when there's available margin and the parent has 100% width.
Below is the snippet of HTML/JSX:
import './Desktop.css';
import desktopMockup from '../../assets/desktop.png';
const Desktop = ({ site }) => {
const
return (
<div className="desktop">
<div className="iframeDesktop">
<iframe src={site} scrolling="no" title="desktop" width="1920" height="1080"></iframe>
</div>
{/* <img src={desktopMockup} alt="desktop mockup" /> */}
</div>
);
};
export default Desktop;
And this is the accompanying CSS code:
.desktop {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
}
.iframeDesktop {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-items:center;
}
iframe {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
transform: scale(0.17);
transform-origin: top left;
min-width: 1920px;
min-height: 1080px;
}