Question 257957 in Html Question posted in
Some basic documentation can be found here.

Html – How do you embed two or more external content sources next to each other?

I want to embed two pinterest pins next to each other. Pinterest gives you the html code to do this which looks like this:

<iframe src="https://assets.pinterest.com/ext/embed.html?id=424605071137135326" height="531" width="345" frameborder="0" scrolling="no" ></iframe>

I can then easily add this to my website. However, I want to add two or sometimes three of these next to each other. Is there a way to easily do this?

Thanks in advance!

I haven’t tried anything and have no idea where to start

Tags:

2

Answers


  2. 0

    Jeah, you could use Flexbox or Grid!

    Here an example for Grid

    <!DOCTYPE html>
<html>
<head>
<style>
  .pin-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Adjust the number to display 2 or 3 pins */
    grid-gap: 10px; /* Adjust the gap between pins */
  }

  .pin {
    width: 100%; /* Adjust the width as needed */
  }
</style>
</head>

<body>
<div class="pin-container">
  <div class="pin">
    <!-- Pinterest Pin 1 HTML code -->
    <a data-pin-do="embedPin" href="https://www.pinterest.com/pin/464997042352611810/"></a>
  </div>
  <div class="pin">
    <!-- Pinterest Pin 2 HTML code -->
    <a data-pin-do="embedPin" href="https://www.pinterest.com/pin/214625356997407101/"></a>
  </div>
  <!-- Add more pin divs as needed -->
</div>

<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
</body>
</html>

    Or the flexbox variety

    /* html */
<div class="pin-container">
  <iframe src="https://assets.pinterest.com/ext/embed.html?id=424605071137135326" height="531" width="345" frameborder="0" scrolling="no"></iframe>
  <iframe src="https://assets.pinterest.com/ext/embed.html?id=ANOTHER_PIN_ID" height="531" width="345" frameborder="0" scrolling="no"></iframe>
</div>

    .pin-container {
  display: flex;
  justify-content: space-between;
}

.pin-container iframe {
  margin-right: 10px; /* Optional: Add some spacing between the iframes */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search