RESPONSIVE IMAGE ON RIGHT SIDE

Question

Im trying to position my image on the right side of my screen and my text on the left, but make the image responsive as i resize my browser.

 #fmap{ position: absolute; right: 0%; margin-right: 0; display:block; margin:10px; width: 100%; height: auto; border: 12px double #d3d3d3; max-width:850px; }

 <div class="maptext" id="facilitymap"> <p><a href="https://www.google.co.uk/maps/dir//Colman+House,+University+of+East,+Norwich+NR4+7TJ/@52.6212166,1.244658,17z/data=:4m9.4m8.1m0:1m5.1m1.1s0x47d9e1e20deda5b1.0x60290452cbfc9649!2m2!1d1.2468467!2d52.6212134!3e0"> <img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="" id="fmap" > </a> </p> </div>

Answer 1

Here is one way using flexbox on the parent div ;

 .container { /*this makes the parent container into a flex container*/ /*divs within this parent container become responsive flex items*/ display: flex; }.left { padding: 20px; } #facilitymap { width: 100%; } img { width: 100%; } @media screen and (max-width: 600px) {.container { /*switch to column view when screen is 600px or smaller*/ flex-direction: column; } }

 <div class="container"> <div class="left"> <p>left side text</p> </div> <div class="maptext" id="facilitymap"> <a href="https://www.google.co.uk/maps/dir//Colman+House,+University+of+East,+Norwich+NR4+7TJ/@52.6212166,1.244658,17z/data=:4m9.4m8.1m0:1m5.1m1.1s0x47d9e1e20deda5b1.0x60290452cbfc9649!2m2!1d1.2468467!2d52.6212134!3e0"> <img src="https://cdn.pixabay.com/photo/2020/07/27/14/34/stars-5442598__340.jpg" alt="" id="fmap"> </a> </div> </div>