title: Is there a way to make iframe embeds more responsive?
body: <p>so I'm somewhat new to front-end development and took it upon myself to learn it through trial and error but it seems as if I've hit a dead-end recently. I'm trying to position two google embeds (Google maps &amp; forms) side-by-side but that only lead to having awkward aspect ratios between the two. My question is how can I align two iframes (Google maps &amp; forms) embed inside of a container to have them display side-by-side when they're on a desktop and vertically on mobile while maintaining a comfortable aspect ratio(responsive width and height) to the user?</p>
  <p>Here's what I have so far:
  <a href="https://i.stack.imgur.com/w7SG5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w7SG5.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/bqbJe.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bqbJe.jpg" alt="enter image description here" /></a></p>
  <p>This is the look I'm going for:
  <a href="https://blondiesdc.com/book-online" rel="nofollow noreferrer">Contact Page with Contact Form and Google Maps embed side-by-side on desktop and vertically aligned on mobile</a></p>