CODEWITHSUNDEEP
htmlcssiframe
johnstont05
johnstont05

Reputation: 237

How to center an iframe while retaining responsiveness

I went on a website to create this map of the US... how can I center it on my web page and also make it responsive? Here is the embed:

<iframe src="https://www.makeaclickablemap.com/map.php?a9991fe6fc387656aaaab1c63308dbef6b4b7c93" frameborder="0" scrolling="no" height="720" width="960"></iframe>

Upvotes: 2

Views: 276

Answers (1)

itodd
itodd

Reputation: 2373

Add this CSS to your page to center the iframe and make it reponsive:

iframe {
  display: block;
  margin: 0 auto;
  max-width: 960px;
  width: 100%;
}

Remove scrolling="no" to allow iframe to be scrolled when page width is less than iframe width

Upvotes: 2

Related Questions