Just completed my very first page for a personal portfolio website. As a novice in web development, I made the width of my site 1600px to match the background image.
Now, my goal is to make the page responsive. However, when I adjusted the width to 100%, the banner div shifted to the left instead of staying centered.
Below is a snippet of my code:
<body>
<div id="banner">
<div class="container_12">
<div class="grid_7 prefix_5" id="navbar">
<ul>
<li><a href="index.html" title="Gelo Lopez">Home</a></li>
<li><a href="Project Management.html" title="Gelo Lopez Work" target="_blank">Portfolio</a></li>
<li><a href="http://gelolopez.wordpress.com">Blog</a></li>
<li><a href="/contact" title="Contact Gelo Lopez">Contact</a></li>
</ul>
</div>
<div class="grid_10" id="bannertext">
<h1>Hello!</h1>
<div class="clear"></div>
<p>Hi, I am Gelo Lopez, an emerging digital marketing and PR Professional. I create stories for brands. I am the social media primmadonna</>
<p id="bannerbutton"><img src="Assets/Images/bannerbutton.png" width="171" height="44" alt="Gelo Lopez Portfolio" /></p>
</div>
</div>
</div><!--end of banner-->
CSS:
body {
width: 100%;
color: #5a5959;
font-size: 18px;
font-family: "Lao UI";
}
/* sections*/
#banner {
background-image: url(../Images/Banner-background.png);
height:660px;
color: #fff;
font-size: 24px;
}
Using a 960 gs template with 12 columns, I placed the container_12 div under the banner id to center the content on the page.
Seeking assistance from anyone who can help me resolve this issue.