'Centering CSS grid divs with iFrame and Img

So I want to create a grid on my site that has 2 i frames at the top and 2 imgs below e.g

X X
X X

I have managed to get some code working, but it doesn't look quite right, right now the grid is stuck to the left-hand side of the page and in mobile view it just goes off the screen and doesn't fit to a mobile version, another issue is there is a random gap between each column. E.g below.

iframe {
  border: 1px solid;
}

.plotly-charts {
  justify-content: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px;
}
<div class="plotly-charts">
  <div class="charts">
    <iframe width="600px" height="500px" frameborder="0" scrolling="no" src="someframe"></iframe>
  </div>
  <div class="charts">
    <iframe width="600px" height="500px" frameborder="0" scrolling="no" src="someframe"></iframe>
  </div>
  <div class="charts">
    <img src="https://dummyimage.com/300x300/525eff/ffffff" alt="Word Cloud Positive" style="width:300px; height:300px;">
  </div>
  <div class="charts">
    <img src="https://dummyimage.com/300x300/525eff/ffffff" alt="Word Cloud Negative-Neutral" style="width:300px; height:300px;">
  </div>
</div>
htmlcssiframe


Solution 1:[1]

The best way is to use Bootstrap.. Or you should use media queries including some Javascript... Bootstrap is easy tho

<!--Import bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<!--Add classes to your elements-->
<!--No need of grids instead use div classes-->

<div class="text-center d-flex col-md-4">
<h1>hello world</h1>
</div>

<!--Bootstrap script-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

that's it

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 TrainerCheese

Related Questions