1

I already added tweets into my HTML page, but i'd like to have both of the tweets side by side.

Style code: 

<head>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body,h1 {font-family: "Raleway", Arial, sans-serif}
        h1 {letter-spacing: 6px}
        .w3-row-padding img {margin-bottom: 12px}
    </style>
</head>

My code is:

    <p style="text-align: center;">&nbsp;</p>
    <p style="text-align: center;">In this area you can easily see tweets about movies!</p>
    <p style="text-align: center;">Have fun!</p>



        <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Sunsets don&#39;t get much better than this one over <a href="https://twitter.com/GrandTetonNPS">@GrandTetonNPS</a>. <a href="https://twitter.com/hashtag/nature?src=hash">#nature</a> <a href="https://twitter.com/hashtag/sunset?src=hash">#sunset</a> <a href="EXAMPLE">pic.twitter.com/YuKy2rcjyU</a></p>&mdash; US Dept of Interior (@Interior) <a href="https://twitter.com/Interior/status/463440424141459456">May 5, 2014</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>


        <blockquote class="twitter-tweet"><p lang="en" dir="ltr">10 years before Kirk, Spock and the Enterprise, there was <a href="https://twitter.com/hashtag/Discovery?src=hash">#Discovery</a>.  <a href="EXAMPLE2">pic.twitter.com/wrKF3KXeOT</a></p>&mdash; IMDb (@IMDb) <a href="https://twitter.com/IMDb/status/864981989358657536">May 17, 2017</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

In the example below, i'd like to have both of those tweets side by side.

Example of the website

Cœur
  • 37,241
  • 25
  • 195
  • 267
LuísA
  • 59
  • 3
  • 10

3 Answers3

0

in <style> add for class twitter-tweet

.twitter-tweet{
    display:inline-block;
}

blockquote is a block element and you want them inline

Oleg Markoff
  • 321
  • 2
  • 7
0

If you use a framework like Bootstrap you can wrap the elemens in a <div class="row"> and then add class="col-sm-6" into the tag for each one. This will group the elements into a row and for them predetermined width.

Gabriel Centeno
  • 1
  • 1
0

Option 1:

.twitter-tweet {
  display: inline-block !important;
}


body,
h1 {
  font-family: "Raleway", Arial, sans-serif
}

h1 {
  letter-spacing: 6px
}

.w3-row-padding img {
  margin-bottom: 12px
}

.twitter-tweet {
  display: inline-block !important;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;">In this area you can easily see tweets about movies!</p>
<p style="text-align: center;">Have fun!</p>



<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">Sunsets don&#39;t get much better than this one over <a href="https://twitter.com/GrandTetonNPS">@GrandTetonNPS</a>. <a href="https://twitter.com/hashtag/nature?src=hash">#nature</a> <a href="https://twitter.com/hashtag/sunset?src=hash">#sunset</a>    <a href="EXAMPLE">pic.twitter.com/YuKy2rcjyU</a></p>&mdash; US Dept of Interior (@Interior) <a href="https://twitter.com/Interior/status/463440424141459456">May 5, 2014</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>


<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">10 years before Kirk, Spock and the Enterprise, there was <a href="https://twitter.com/hashtag/Discovery?src=hash">#Discovery</a>.  <a href="EXAMPLE2">pic.twitter.com/wrKF3KXeOT</a></p>&mdash; IMDb (@IMDb) <a href="https://twitter.com/IMDb/status/864981989358657536">May 17, 2017</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Option 2:

twitterwidget {
  display: inline-block !important;
}


body,
h1 {
  font-family: "Raleway", Arial, sans-serif
}

h1 {
  letter-spacing: 6px
}

.w3-row-padding img {
  margin-bottom: 12px
}

twitterwidget {
  display: inline-block !important;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;">In this area you can easily see tweets about movies!</p>
<p style="text-align: center;">Have fun!</p>



<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">Sunsets don&#39;t get much better than this one over <a href="https://twitter.com/GrandTetonNPS">@GrandTetonNPS</a>. <a href="https://twitter.com/hashtag/nature?src=hash">#nature</a> <a href="https://twitter.com/hashtag/sunset?src=hash">#sunset</a>    <a href="EXAMPLE">pic.twitter.com/YuKy2rcjyU</a></p>&mdash; US Dept of Interior (@Interior) <a href="https://twitter.com/Interior/status/463440424141459456">May 5, 2014</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>


<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">10 years before Kirk, Spock and the Enterprise, there was <a href="https://twitter.com/hashtag/Discovery?src=hash">#Discovery</a>.  <a href="EXAMPLE2">pic.twitter.com/wrKF3KXeOT</a></p>&mdash; IMDb (@IMDb) <a href="https://twitter.com/IMDb/status/864981989358657536">May 17, 2017</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
Dalin Huang
  • 11,212
  • 5
  • 32
  • 49
  • @Luís for more about `block` and `inline-block` read here: http://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block – Dalin Huang May 18 '17 at 00:32