Я пытался переместить какой-то текст в правую часть изображения и сделать текст отзывчивым, чтобы, если кто-то с меньшим экраном, чем я, посетил сайт, размер текста изменился бы, чтобы соответствовать экрану, а не перекрывать друг друга каксейчас (но не перекрывается для краткого изложения, не знаю, почему это единственный, который работает)
Мое изображение и текстовый код:
<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")
?>
css для вопроса:
.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;
}