I have a problem on my Website. I have made an awesome header and some text over it but for some reasin that is the one thing that doesnt get made repsonsive on my site. please help guys <3 you.
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="container">
<div class="background"><img src="IMG/Background.jpg">
<h1 class="BackgroundText fadeInLeft animated">More than 1000+</br>Templates</h1>
<a class="Button" href="#1">Templates</a>
</div>
</div>
CSS:
.container {
width: 960px;
margin: 0 auto;
}
.background {
margin-top: 0px;
box-shadow: 10px 10px 5px #888888;
width: 100%;
margin-left: -470px;
}
.BackgroundText {
margin-top: -550px;
font-size: 100px;
color: #94c42f;
margin-left: 300px;
}
.Button {
margin-left: 400px;
font-size: 50px;
background-color: #94c42f;
padding: 5px;
border-radius: 10px;
color: #ffffff;
box-shadow: 0px 5px 0px #678920;
}
id start with making
.container
a responsive width. I'd changewidth:960px
to: