I'm totally new to web development. I have created a single paged website on my preview server which can be seen at (Lin Removed)
The text padding is not setting up properly in all screen sizes. How to set it up so that it becomes responsive.
Fiddle with the whole code is at http://jsfiddle.net
The CSS code for the taste page is
html {
height: 100%;
}
body
{
margin:0;
padding:0;
background-image:url('../images/bgs/bg.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
margin: 0;
background-size:contain;
padding: 0;
height: 100%;
width: 100%;
position:relative;
bottom:0px;
top:0px;
margin-top:0px;
margin-bottom:0px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
max-height:100%;
max-width:100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bgs/bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bgs/bg.jpg', sizingMethod='scale')";
font-family:Trebuchet MS, Arial, 'Helvetica', sans-serif;
font-size:1em;
}
.header
{
background-color:#212528;
}
.taste
{
background-image:url('../images/bgs/bg2.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
margin: 0;
background-size:contain;
padding: 0;
height: 100%;
width: 100%;
position:relative;
bottom:0px;
top:0px;
margin-top:0px;
margin-bottom:0px;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
max-height:100%;
max-width:100%;
background-position:center;
}
.taste-div
{
padding-left:26em;
width:18.750em;
text-align:justify;
padding-top:1.7em;
padding-bottom:9em;
display:block;
color:#000;
font-family: Arial, 'Helvetica', sans-serif;
}
@font-face {
font-family: "Bebas";
src: url("../fonts/BebasNeue.eot") format("eot"),
url("../fonts/BebasNeue.woff") format("woff"),
url("../fonts/BebasNeue.ttf") format("truetype");
}
.banner {
background-color: #2a2f33;
margin-right:auto;
margin-left:auto;
padding-top:1%;
}
.title {
font-size: 110%;
font-weight: bold;
font-family:'Bebas';
display:block;
}
.title a {
color:#fff;
text-decoration:none;
}
.header {
background-color: #2a2f33;
padding: 10px;
}
.nav{
list-style:none;
margin:0;
padding:0;
text-align:center;
font-family:'Bebas';
font-size:1.9em;
}
.nav li{
display:inline;
color:#fff;
}
.nav a{
display:inline-block;
padding-left:0.4em;
padding-right:0.4em;
}
.nav hover{
color:#cc8568;
}
and the html is
<div class="taste-div">
Everyone is loving the sweet taste, easy drinking wines packed with flavour, fruitiness and fun.</td>
<p><h3>sweet! White 75cl</h3>
<strong>Description!</strong> Sweet peach and apricot fruit flavours with a hint of lychee and tangy citrus. Ripe, fruity and very refreshing. <br />
<strong>Origin!</strong> Western Cape, South Africa<br />
<strong>Grape variety!</strong> Blend of Chenin Blanc, Semillon and Muscat d’Alexandrie<br />
<strong>Alcohol!</strong> 12% by volume</p>
sweet! Red 75cl
Description! Sweet red and black berry flavours with a hint of tropical fruit and mocha spice. Smooth, easy-drinking and moreish. Origin! Western Cape, South Africa
Grape variety! Blend of Merlot, Pinotage and Muscat d’Alexandrie
Alcohol! 13.5% by volume
</div>
Man, your problem is since you are working in responsive design, you have to make padding and margin in percentage and not px or em.
Please look at your style.css file and change the padding-left from 26em to 40%. and use media queries if needed.