CODEWITHSUNDEEP
htmlcss
Anuj
Anuj

Reputation: 178

Adding border to DIV content

I have been trying to add a border to my emded twitter post
But it is not working.
I used the auto emded generator from official twitter site
copied the code and paste it.
I have created DIV for the code I copied.
Now When I try to put a border around the frame
Its simply now working. 

.twitter_page {
    /*float: right;*/
    padding: 0 218px 0 0;
        /* border: solid; */
    margin-right: -60px;
    /*margin-left: 54px;*/
    margin-top: -410px;
    border : solid 2px grey;
}
<div class="social_page">

<div class="twitter_page">
              
                <a class="twitter-timeline" data-width="350" data-height="400" href="https://twitter.com/AZLily_official?ref_src=twsrc%5Etfw">Tweets by AZLily_official</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

<div class="facebook_page">
                            
                     <iframe src="https://www.facebook.com/plugins/page.php? 
                    href=https%3A%2F%2Fwww.facebook.com%2FAZLily.yuri&tabs=timeline&width=350&height=400&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="350" 
                    height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
  </div>



  </div>

If I do this way, Whole DIV gets border and I cant seem to reduce the width of the DIV ,
But I am not trying to border the DIV, Instead I am trying to border >br> the twitter frame.
Is it possible?

Upvotes: 1

Views: 76

Answers (3)

icelimon
icelimon

Reputation: 1

In twitter_page class, Set

padding: 0px;
display: inline-block;

This should work.

Upvotes: 0

Sumanth Rao
Sumanth Rao

Reputation: 378

This should solve the problem.
1) Changing the size of twitter div tag by setting width and height (inline/through CSS).
2) Setting the position:relative property to adjust position arbitrarily.

.twitter_page {
    /*float: right;*/
    padding: 0px 0 0;
        /* border: solid; */
    margin-right: 0px;
    position:relative;
    left:20%;
    /*margin-left: 54px;*/
    margin-bottom: 30px;
    border : solid 2px grey;
}
<div class="social_page">

<div class="twitter_page" style="width:350px;height:350px;">
              
                <a class="twitter-timeline" data-width="350" data-height="400" href="https://twitter.com/AZLily_official?ref_src=twsrc%5Etfw">Tweets by AZLily_official</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

<div class="facebook_page">
                        <br/>  <br/>
                     <iframe src="https://www.facebook.com/plugins/page.php? 
                    href=https%3A%2F%2Fwww.facebook.com%2FAZLily.yuri&tabs=timeline&width=350&height=400&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="350" 
                    height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
  </div>



  </div>

Here is the jsfiddle link.

Upvotes: 1

Abu Bin Oalid
Abu Bin Oalid

Reputation: 31

You can try this... (just add a inner div in twitter_page and set border)

.twitter_page {
    /*float: right;*/
    padding: 0 218px 0 0;
        /* border: solid; */
    margin-right: -60px;
    /*margin-left: 54px;*/
    margin-top: -410px;
}

.in_twitter_page {
    border : solid 2px grey;
}
<div class="social_page">

<div class="twitter_page">
  <div class="in_twitter_page">
  <a class="twitter-timeline" data-width="350" data-height="400" href="https://twitter.com/AZLily_official?ref_src=twsrc%5Etfw">Tweets by AZLily_official</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  </div>
</div>

<div class="facebook_page">
                            
                     <iframe src="https://www.facebook.com/plugins/page.php? 
                    href=https%3A%2F%2Fwww.facebook.com%2FAZLily.yuri&tabs=timeline&width=350&height=400&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="350" 
                    height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
  </div>



  </div>

Upvotes: 0

Related Questions