How to move text beside image and make text responsive

Question

Iv been trying to move some text to the right side of an image and make the text reponsive so if someone with a smaller screen then mine was to visit the site the text would resize to fit the screen instead of overlapping each other as it does now (but doesnt overlap for the synopsis not sure why thats the only one that works)

My image and text code:

<link id='stylecss' type="text/css" rel="stylesheet" href="css/style.css">



<?php
$title = "WatchFlix";
$style="css/style.css";
/*include is a php fuction which place all codes(php, html) at the location where the include statement is placed.*/
?>
<?php
include("head.php")
?>
<?php
include("nav.php")
?>
<main>
<h2 class="movieheading"> Game of Thrones </h2>
<img class="moviephoto" src="gotimage.jpg" alt="friends"/>

<div class="rating">
<h4> Rating: <span style ="font-weight:normal;">MA 15+</span></h4>
</div>

<div class="release">
<h4> Release Date: <span style ="font-weight:normal;">17 April 2011</span> </h4>
</div>

<div class="cast">
<h4> Cast: <span style ="font-weight:normal;">Peter Dinklage, Lena Headey, Emilia Clarke, Kit Harington, Sophie Turner, Maisie Williams</span></h4>
</div>

<div class="category">
<h4> Category: <span style ="font-weight:normal;"> Action/Adventure/Drama/Fantasy/Romance </span> </h4>
</div>

<div class="moviedetail">
<h4>T.V Show Details:</h4>
</div>

<div class="synopsis">
<p>Years after a rebellion spurred by a stolen bride to be and the blind ambitions of a mad king, Robert of the house Baratheon sits on 
the much desired Iron Throne. In the mythical land of Westeros, nine noble families fight for every inch of control and every drop 
of power. The King's Hand, Jon Arryn, is dead. And Robert seeks out his only other ally in all of Westeros, his childhood friend 
Eddard Stark. The solemn and honorable Warden of the North is tasked to depart his frozen sanctuary and join the King in the 
capital of King's Landing to help the now overweight and drunk Robert rule. However, a letter in the dead of night informs Ned 
that the former Hand was murdered, and that Robert will be next. So noble Ned goes against his better desires in an attempt to 
save his friend and the kingdoms. But political intrigue, plots, murders, and sexual desires lead to a secret that could tear the 
Seven Kingdoms apart. And soon Eddard will find out what happens when you play the Game of Thrones.</p>
</div>

<br><br><br>

</main>

<form action="cart.php" method="post">
   Game Of Thrones Season 1
   <input type = "hidden" name = "id" value = "M01" />
   <br>
  <select name="option">
  <option value="HD">HD</option>
  <option value="Full HD">Full HD</option>
  <option value="Blu-ray">Blu-ray</option>
</select>
<div class="widthc">
   <button class="prod" id="minus">−</button>
<input type="number" name="qty" value="0" id="qty" min="0" max="15"/>
<button class="prod" id="plus">+</button>
<br><br>
<button class="prod" type="submit"> Submit</button>
   </form>



 <script>
const minusButton = document.getElementById('minus');
const plusButton = document.getElementById('plus');
const inputField = document.getElementById('qty');
var currentValue = 0;

minusButton.addEventListener('click', event => {
 event.preventDefault();
  currentValue = Number(inputField.value) >> 0;
  currentValue = currentValue - 1;
  if (currentValue < inputField.min) {
inputField.value = inputField.min;
  } else {
    inputField.value = currentValue;
  }
});

plusButton.addEventListener('click', event => {
  event.preventDefault();
  currentValue = Number(inputField.value) >> 0;
  currentValue = currentValue + 1;
  if (currentValue > inputField.max) {
    inputField.value = inputField.max;
  } else {
    inputField.value = currentValue;
  }
});
</script>


</div>




<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


<?php
include("footer.php")
?>

related css for the question:

.movieheading {
    position:absolute;
    margin-top:25px;
    left:470;
    right:0;
}

.moviephoto {
    position:relative;
    margin-top:25px;
    max-width:100%;
    left:100;
    right:0;
}

div.synopsis {
    position: float;
    margin-top:52px;
    left:400px;
    right:100px;
    width:500px;
    height:150px;
}

div.moviedetail {
    position:absolute;
    margin-top:150px;
    left:470;
    right:500;
    display:inline-block;
}

div.rating {
    position:absolute;
    margin-top:35px;
    left:470;
    right:0;
    display:inline-block;
}
div.release {
    position:absolute;
    margin-top:55px;
    left:470;
    right:0;
    display:inline-block
}

div.cast {
    position:absolute;
    margin-top:75;
    left:470;
    right:0;
    display:inline-block
}

div.category {
    position:absolute;
    margin-top:95px;
    left:470;
    right:0;
    display:inline-block;
}

Answer 1

Well you've got a few things going on. First off, when we are talking about responsive design using position: absolute will always cause more headaches than you want... That being said you can achieve exactly what you're asking for using flex box. Another issues being you have position: realtive on your image moviephoto but you are also attempting to assign absolute positioning through left: 100 and right:0

My suggestion is to rework your html and css to utilize flexbox as it was designed to specifically address the responsive issues you are referring to in your question. If there is a specific reason for using position absolute so much then media queries are your other option. However, my recommendation is to use display: flex as it will allow you to work with generalities with various screen sizes rather than having to refactor code every few steps of screen size.

Here are some resources for flex box: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox