Positioning and then making it responsive <p>Hey I'm currently working on a responsive web design for school and it is a disaster. Currently setting up the website before making it responsive and the text and images aren't going where I need them to go. This is my coding for css so far: </p> <pre><code>body{ background-color: #cd76dd; font-family: 'Raspoutine Medium'; color:white; } #page-wrap{ width: 950px; margin: 0 auto; } #containerIntro h1{ font-family: 'AlphaClouds'; background-color: #7ac8ff; color:white; font-size: 45px; width: 100%; padding-bottom: 10px; position: static; bottom: 0; left: 0; } #containerIntro p{ font-family: 'AlphaClouds'; background-color: #7ac8ff; color:white; text-align: left; font-size: 70px; width: 100%; } h1: hover{ text-shadow: 0px 0px 20px white; } h1 p: hover{ text-shadow: 0px 0px 20px white; } h1{ position: absolute; left: 0; bottom: 0; } p{ background-color:#ffa1ff; color:white; text-align: left; padding-top: 20px; padding-bottom: 20px; padding-left: 10px; font-size: 17px; width: 450px; height: 100%; } h2{ background-color: #ffa1ff; color:white; text-align: left; padding-top: 20px; padding-left: 10px; font-size: 20px; border: 2px #ffa1ff solid; width: 450px; height: 100%; } h3{ background-color: #ffa1ff; color:white; text-align: left; font-size: 20px; padding-left: 10px; border: 2px #ffa1ff solid; width: 450px; height: 100%; } .gummy{ float: right; } .bubble{ float: right; position: relative; right: -130px; padding-top: 15px; } .pink{ float: left; position: relative; top: -145px; } .blue{ float: right; position: relative; top: -145px; } p.select{ background-color: #5d75ed; text-align: right; padding-bottom:10px; padding-top: 10px; font-size: 17px; width: 170px; float: right; margin-top: -850px; } p.archives{ background-color: #f9e075; text-align: right; padding-bottom: 10px; padding-top: 10px; padding-left: 10px; font-size: 17px; width: 170px; float: right; margin-top: -600px; } p.resources{ background-color: #ef5b66; padding-bottom: 10px; padding-top: 10px; font-size: 17px; width: 170px; float:right; margin-top: -500px; } div{ height: 287; width: 198; } </code></pre> <p>mock up for what it will look like</p> <p><a href="https://i.stack.imgur.com/YJLUV.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/YJLUV.jpg" alt="enter image description here"></a></p>