Я собираюсь ответить на этот вопрос на концептуальной основе, поскольку у вас нет HTML предоставленного
Так как вы сказали, что все становится грязно, когда вы изменяете ширину браузера, поэтому мы должны Первая работа над тем, чтобы сделать его отзывчивым. Так что просто go к вашему Html файлу и создайте div-оболочку или контейнер , который будет содержать как ваше изображение, так и теги абзаца , например, что-то похожее на это :
<div class="container">
<img src="files/exampleimg.png" id="pic">
<p id="text">This is something</p>
</div>
Теперь в вашем файле CSS удалите поле left-left или margin-right, которое вы использовали для позиционирования изображения и тегов абзаца, и используйте flex или grid или что-нибудь подобное, чтобы сделать его быстро позиционируемым, Я собираюсь go с flex, так что вот так:
.container{
display:flex;
justify-content: space-between; /*putting img to left and paragraph to right*/
}
#pic {
padding-left: 50px; /*as per your requirement*/
}
#text {
padding-right: 50px; /*as per your requirement*/
}
и это в значительной степени это для отзывчивой части, все, что мы должны сделать сейчас, это сделать коробку изображений более тонкой, так что для этого это:
#firstborder{
border: 1px solid #707070; /*this would make it slimmer but play with it to find out what suits best*/
}
вы изменяете 1px на 4 px, он становится толще, и вы проворачиваете его, и он становится стройнее, вот вам go, теперь у вас есть отзывчивая страница и ваш блок изображения похудела.
и, о, для вашей легендарной части добавьте это к своему HTML
<img src="files/legend.png" id="legend">
CSS:
.container{
display:flex;
justify-content: space-between;
position: relative; /*binding up the legend with container*/
}
#legend {
padding-left: 50px;
position: absolute; /*stiching the legend to that pic*/
top: 40px; /*as per your requirement*/
}