Facebook iframe at left of page

user_11550565 0
Viewed 126

I want the facebook iframe embed to sit at the left of the text. Not sure how to do that using CSS or something. Can someone help? It currently seems like the embed is inline with the text and sits on the left hand side. I want it to continue to sit on the left but I want to have the text next to it starting at the same height. I also want it to center itself in the margin on the left of the text. 

   <template>
  <div>
    <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FAirCombatGroup%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" align="center" width="50%" height="500" style="border:none;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
    <div class="headerHome">
    <h1>Welcome to the Air Combat Group</h1>
  </div>
    <div class="homeText">
      <p>
      The Air Combat Group consists of both Allied and Axis squadrons under a single operational umbrella flying with full realism settings. We are an English and German speaking group located in Europe, the Americas and Australia and meet on our own Teamspeak 3 and Discord servers. 
    </p>
  </div>
  </div>
</template>

<script>
SNIP
</script>

<style scoped>

  .homeText{
    width: 50%;
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
  }

  .headerHome{
    width: 50%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

</style>

enter image description here

vue.js iframe css
1 Answers

You could choose to use the CSS property 'position: fixed;'. This allows you to position the element anywhere, but it will remain at that exact position.

Start off with giving the Facebook iframe an ID, you can simply add the ID-attribute like this:

<iframe id="facebook_box" ... ></iframe>

Then add the CSS rules within the <style>-element. You can also tell the element to be positioned off the top and left (or bottom and right, etc). The code will look like this

#facebook_box {
    top: 20px;
    left: 20px;
    position: fixed;
    display: inline-block;
}

I hope this helps you on your way.

user_116647170
Related