I have a single paged scrolling website. the problem is that when I check the website on larger or smaller screens the text alignment and on 15 Inch screen its perfect. You can see the preview at (link removed)
Try changing the screen sizes and check the text alignment. I want the text to change its place according to the screen resolution.
The CSS 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;
}
.logo
{
background-image:url('../images/logo.png');
background-repeat:no-repeat;
max-height:auto;
max-width:100% !important;
margin-left: auto;
margin-right: auto;
}
.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;
max-height:100%;
max-width:100%;
background-position:center;
min-height:100%;
min-width:100%;
}
.taste-div
{
padding-left:33%;
width:23%;
text-align:justify;
padding-top:3%;
padding-bottom:8%;
display:block;
color:#000;
font-family: Arial, 'Helvetica', sans-serif;
position: relative;
}
and the relevant HTML is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta name="keywords" content="" />
<meta name="author" content="Aamir Ali Bangash | ATOM Digital" />
<meta name="description" content="" />
<title>Sweet!</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/mobile.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-scrolltofixed.js" type="text/javascript"></script>
<script src="js/smooth-scroll.js"></script>
<script>
$(document).ready(function() {
// Dock the header to the top of the window when scrolled past the banner.
// This is the default behavior.
$('.header').scrollToFixed();
});
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</head>
<body>
<div class="banner">
<div class="main" align="center"><a href="main.html"><img src="images/logo1.png" style="display:block;" border="0"></a></div>
</div>
<div class="header">
<div class="main"><span class="title">
<ul class="nav">
<li><a href="main.html" class="scroll" data-speed="2000" data-easing="easeInOutCubic">THE SWEET! TASTE</a></li>
<li> | </li>
<li><a href="#shaka" class="scroll" data-speed="2000" data-easing="easeInOutCubic">THE SWEET! SHAKA</a></li>
<li> | </li>
<li><a href="#match" class="scroll" data-speed="2000" data-easing="easeInOutCubic">THE SWEET! MATCH</a></li>
<li> | </li>
<li><a href="#hub" class="scroll" data-speed="2000" data-easing="easeInOutCubic">THE SWEET! HUB</a></li>
</ul>
</span></div>
</div>
<!-- taset page -->
<div class="taste" id="taste">
<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>
<p>
<h3>sweet! Red 75cl</h3>
<strong>Description!</strong> 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<br />
<strong>Grape variety!</strong> Blend of Merlot, Pinotage and Muscat d’Alexandrie<br />
<strong>Alcohol!</strong> 13.5% by volume</p>
</div>
<div style="text-align:center;padding-bottom:10px;"><a href="#shaka"><img src="images/lb/bottom.png" border="0" /></a></div>
</div>
</div>
what you want to achieve according to screen size for fonts will be slightly difficult.
I suggest you use
media-queriescombined with font size unitsremandemfor eg:
Alternatively, you can use view ports for your comfort too, using unit
vworvhfor the fontsfor e.g
Note : you will have to set
<meta name="viewport" content="width=device-width" />in your header when using such view-port based typography...EDIT
In the link your provided, the only solution i can see to it is to use media queries to align the text properly!!