google maps responsive
<style>
.map-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
</style>
<div class="map-responsive">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3003.65302474174!2d-8.622871484603664!3d41.16392197928525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd2465ac0e521635%3A0x6e4f143809534218!2sRua%20de%20Serpa%20Pinto%2C%20Porto!5e0!3m2!1spt-PT!2spt!4v1603461184237!5m2!1spt-PT!2spt" width="550" height="350" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>