How to make this iframe code responsive

Question

Hi I want to make fix this iframe into the center between the left table and right table. I'm having trouble with making my site responsive and it appears different on different resolutions: (http://footkick.16mb.com/)

As I said, I wanted this to be bang in the center of the left and right table regardless of resolution. If you can help me out: THANKS SO MUCH

[<]iframe class="channels" src="http://www.bbc.co.uk/sport/football/fixtures" scrolling="yes" style="height: 990px; width: 619px;margin: 45px 0px 0px 115px; border:2px solid black; outline-style: solid; outline-color: green; ">

css:

height: 990px;
width: 619px;
margin: 45px 0px 0px 115px;
border: 2px solid black;
outline-style: solid;
outline-color: green;

Well done with your site! – Jethro Hazelhurst Mar 11 '17 at 21:53 — Jethro Hazelhurst, Mar 11 '17 at 21:53
Cheers, Jethro Hazelhurst – Taimoor Ahmed Mar 11 '17 at 22:10 — Taimoor Ahmed, Mar 11 '17 at 22:10

score 0 · Answer 1 · edited May 23 '17 at 12:09

0

On your Iframe element remove: margin: 45px 0px 0px 115px; and add margin: 0 auto; display:block;.

Display block:

Margin: 0 auto

Also please learn about why inline css is a bad practice

edited May 23 '17 at 12:09

Community

1
1

answered Mar 11 '17 at 21:45

Jethro Hazelhurst

3,230
7
38
80

Mad help, cheers for that. Yeah I still have a lot learn about CSS// HTML – Taimoor Ahmed Mar 11 '17 at 22:13

score 0 · Accepted Answer · answered Mar 11 '17 at 21:46

0

Try adding this to your CSS:

margin: 45px auto 0px;
display: block

answered Mar 11 '17 at 21:46

lumio

7,428
4
40
56

score 0 · Answer 3 · answered Mar 11 '17 at 21:55

0

turn the iframe to a block element like so

  .your-frame {
 display: block;
width: 80%;
margin: 2% auto;
}

answered Mar 11 '17 at 21:55

How to make this iframe code responsive

3 Answers3