I am replicating the Twitter profile page, but I am facing an issue where the text and images get jumbled together whenever I resize my browser. This results in a messy appearance of the page. How can I ensure that the text and images stay in the same relative position and shrink proportionally when I resize the browser? I tried using percentages for the widths and heights of divs, but the text lines broke and overflowed from the containers. Switching to 'vh' instead of 'px' made the containers thinner when the page was resized, which was not ideal. Does anyone have any solutions to this problem? Just to mention, I am using Bootstrap 4.0.
Here is a snippet of my HTML code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
...
</head>
<body>
...
</body>
</html>
And this is a snippet of my CSS code:
a, a:hover {
color: rgb(29,161,242);
}
...