Centering CSS grid divs with iFrame and Img-CodePudding

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.

index.html

<div >
        <div >
          <iframe width="600px" height="500px" frameborder="0" scrolling="no" src="someframe"></iframe>
        </div>
        <div >
            <iframe width="600px" height="500px" frameborder="0" scrolling="no" src="someframe"></iframe>
        </div>
        <div >
            <img src="cloud.png" alt="Word Cloud Positive" style="width:300px; height:300px;">
        </div>
        <div >
            <img src="cloud.png" alt="Word Cloud Negative-Neutral" style="width:300px; height:300px;">
        </div>
    </div>

index.css

.plotly-charts {
  justify-content: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px;
}

CodePudding user response：

Remove width/height attributes from iframe, make it flexible with CSS, also remove inline styles from you images and make it responsive. Also, make .charts flex. In this case you can align this cells' content.

See CSS Code snippet part comments for more details.

Expand Code snippet to fullpage, to see example

.plotly-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* add grid gaps (gaps between rows and columns) */
  column-gap: 1rem;
  row-gap: 1rem;
}

/* make cell flex */
.charts {
  display: flex;
  justify-content: center;
}

.charts iframe {
  width: 100%;
  /* you can add ratios to your iframe in other way */
  aspect-ratio: 6/5;
}

/* add styles to you images, make it responsive */
.charts img {
  height: auto;
  width: 100%;
}

/* added for example purposes */
.charts iframe, .charts img {
  max-width: 600px;
}

<div >
  <div >
    <iframe frameborder="0" scrolling="no" src="//plotly.com/~mathewsjoyy/3.embed?logo=false&link=false&autosize=true"></iframe>
  </div>
  <div >
    <iframe frameborder="0" scrolling="no" src="//plotly.com/~mathewsjoyy/1.embed?logo=false&link=false&autosize=true"></iframe>
  </div>
  <div >
    <img src="https://dummyimage.com/600x400/000/fff" alt="Word Cloud Positive">
  </div>
  <div >
    <img src="https://dummyimage.com/600x400/000/fff" alt="Word Cloud Negative-Neutral">
  </div>
</div>

CodePudding user response：

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 >
<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