As I work on creating a basic website for my football team, I am facing an issue with the text placement in different screen sizes. While the Jumbotron background image resizes perfectly according to the screen size, the text outside of the Jumbotron doesn't stay close to the background image when the screen size is small (less than 576px).
I want the text to follow the background image as the screen size changes. Here is the code I'm using:
html {
… // CSS properties
}
body {
… // CSS properties
}
.site-wrapper {
… // CSS properties
}
.container {
… // CSS properties
}
…
<html>
<head>
<title>Ansty FC Home Page</title>
<link rel="stylesheet" type="text/css" href="Home.css">
... // other links and stylesheets
</head>
<body>
<div class="site-wrapper">
... // navigation bar and content
</div>
</body>
</html>