Parse Error CSS3 Validation - css

So I am trying to validate my website and keep getting a parse error for one of my media queries section of my style sheet. When I just copy and paste that section of code into the W3 CSS Validator it shows its fine but when the whole sheet is up it finds an error somewhere in there. Here is what I have:
/* CSS Document for:
Chris Quantrell: Illustration, Graphic and Web Design
By: Chris Quantrell
*/
.primaryContainer {
height: auto;
margin-left: auto;
margin-right: auto;
min-height: 100%;
background-image: url(../img/shattered_#2X.png);
background-attachment: scroll;
background-size: auto;
background-size: auto;
background-position: 0% 0%;
background-repeat: repeat repeat;
font-family: source-sans-pro, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 100;
font-size: 16px;
color: rgba(18, 18, 18, 1.00);
}
#logo_container {
float: none;
height: auto;
margin: 12px;
clear: none;
width: 1050px;
min-width: 0px;
margin-left: auto;
margin-right: auto;
}
#bear_logo {
float: left;
width: 100%;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
clear: none;
color: rgb(0, 0, 0);
min-width: 0px;
}
#contact_info_stripe {
background-color: #E2231A;
width: 100%;
}
#contact_info_box {
float: none;
height: auto;
margin-left: auto;
margin-top: 0px;
clear: none;
width: 1050px;
margin-right: auto;
background-color: #E2231A;
padding: 10px;
color: white;
text-align: right;
font-size: 140%;
}
/* about me section */
#about_me_box {
float: none;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
clear: none;
width: 1050px;
min-height: 0px;
padding-left: 157px;
padding-right: 10px;
background-color: white;
background-image: url(../img/bear_aboutme.png);
background-size: 100%;
background-repeat: no-repeat;
}
#about_me_box p {
width: 575px;
height: auto;
margin-left: auto;
margin-top: 0px;
text-align: justify;
padding: 10px;
font-size: 110%;
}
/* Gallery Stuff */
#gallery_container {
float: none;
height: auto;
margin: 0px auto;
clear: none;
width: 1050px;
min-height: 0px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 100px;
background-color: white;
}
.gallery_cell {
width: 320px;
height: 320px;
float: left;
margin: 10px;
display: block;
border: thick #F00;
}
a:hover.gallery_cell {
border: 10px rgba(255, 0, 4, 1.00);
}
/* Button Stuff */
.button {
display: block;
height: 80px;
width: 275px;
background: #E2231A;
font-weight: 800;
font-size: 200%;
color: white;
text-align: center;
padding-top: 16px;
float: right;
margin-left: 16px;
margin-bottom: 16px;
}
a.button {
text-decoration: none;
}
a:visited.button {
text-decoration: none;
color: white;
}
a:hover.button {
color: white;
}
/* Headline Section */
h1 {
font-size: 360%;
font-weight: 900;
text-align: right;
}
h2 {
font-size: 160%;
font-weight: 500;
margin-top: 0px;
margin-bottom: 4px;
}
h3 {
font-size: 200%;
font-weight: 800;
margin-top: 32px;
margin-bottom: -10px;
color: #E2231A;
text-align: right;
margin-right: 12px;
}
h4 {
font-size: 200%;
font-weight: 800;
margin-top: 32px;
margin-right: 10px;
color: #E2231A;
text-align: right;
margin-bottom: 12px;
}
/* Tablet Styles */
#media only screen and (max-width: 1049px) {
.primaryContainer {
background-image: url(../img/shattered.png);
}
#logo_container {
width: 100%;
margin-bottom: 12px;
}
#contact_info_box {
width: 100%;
}
#about_me_box {
width: 100%;
padding-right: 10px;
padding-left: 20%;
background-size: 60%;
background-position: left 36px;
}
#about_me_box p {
width: 100%;
padding-left: 10%;
}
.button {
width: 43.5%;
margin-left: 1%;
margin-right: 1%;
height: 54px;
font-size: 150%;
padding-top: 10px;
}
#bear_logo {
width: 98%;
margin-left: 1%;
margin-right: 1%;
float: left;
margin-top: 0px;
clear: none;
}
#gallery_container {
width: 100%;
}
#gallery_grid {
margin-left: auto;
margin-right: auto;
display: block;
}
.gallery_cell {
width: 30%;
height: 30%;
margin-left: 1%;
margin-top: 15px;
}
/*Phone Styles*/
#media only screen and (max-width: 640px) {
#logo_container {
margin-top: 4px;
margin-left: 1%;
clear: none;
width: 98%;
margin-right: 1%;
}
#about_me_box {
margin-right: 1%;
margin-left: 1%;
padding-left: 1%;
padding: 1%;
width: 98%;
background-image: none;
}
#about_me_box p {
width: 98%;
margin-left: 1%;
margin-right: 1%;
padding-left: 0px;
}
.button {
width: 100%;
height: 54px;
font-size: 150%;
padding-top: 10px;
}
#bear_logo {
width: 100%;
}
#contact_info_box {
width: 98%;
margin-right: 1%;
margin-left: 1%;
padding: 1%;
}
#gallery_container {
width: 98%;
margin-right: 1%;
margin-left: 1%;
padding: 1%;
}
.gallery_cell {
width: 48%;
height: 48%;
margin-left: 1%;
margin-right: 1%;
margin-top: 8px;
}
}
#media only screen and (max-width: 400px) {
.gallery_cell {
width: 98%;
height: 98%;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
}
}
Any and all help would be greatly appreciated!

You aren't closing the tablet styles #media with a }.
/* Tablet Styles */
#media only screen and (max-width: 1049px) {
.primaryContainer {
background-image: url(../img/shattered.png);
}
#logo_container {
width: 100%;
margin-bottom: 12px;
}
#contact_info_box {
width: 100%;
}
#about_me_box {
width: 100%;
padding-right: 10px;
padding-left: 20%;
background-size: 60%;
background-position: left 36px;
}
#about_me_box p {
width: 100%;
padding-left: 10%;
}
.button {
width: 43.5%;
margin-left: 1%;
margin-right: 1%;
height: 54px;
font-size: 150%;
padding-top: 10px;
}
#bear_logo {
width: 98%;
margin-left: 1%;
margin-right: 1%;
float: left;
margin-top: 0px;
clear: none;
}
#gallery_container {
width: 100%;
}
#gallery_grid {
margin-left: auto;
margin-right: auto;
display: block;
}
.gallery_cell {
width: 30%;
height: 30%;
margin-left: 1%;
margin-top: 15px;
}
} /* <- Missing that */
/*Phone Styles*/
#media only screen and (max-width: 640px) {
#logo_container {
margin-top: 4px;
margin-left: 1%;
clear: none;
width: 98%;
margin-right: 1%;
}
#about_me_box {
margin-right: 1%;
margin-left: 1%;
padding-left: 1%;
padding: 1%;
width: 98%;
background-image: none;
}
#about_me_box p {
width: 98%;
margin-left: 1%;
margin-right: 1%;
padding-left: 0px;
}
.button {
width: 100%;
height: 54px;
font-size: 150%;
padding-top: 10px;
}
#bear_logo {
width: 100%;
}
#contact_info_box {
width: 98%;
margin-right: 1%;
margin-left: 1%;
padding: 1%;
}
#gallery_container {
width: 98%;
margin-right: 1%;
margin-left: 1%;
padding: 1%;
}
.gallery_cell {
width: 48%;
height: 48%;
margin-left: 1%;
margin-right: 1%;
margin-top: 8px;
}
}
#media only screen and (max-width: 400px) {
.gallery_cell {
width: 98%;
height: 98%;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
}
}
It now validates at the the W3C validator

Related

Mobile optimize this code

So i got this code witch workins great on desktop, but on mobile it is to small.
I've tried to add more on initial-scale, but is there a better way to fix this on mobile? As you can see i've used divs instead of using the background-property on body. This i did for simply it.
At the moment i've set the initial-cale to 1.
Here is the CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
background-color: black;
}
.background {
background-image: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8) ), url("image");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body > #container > .logo > img {
position: absolute;
width: 15%;
height: auto;
margin-left: 42%;
margin-top: 5%;
}
#container > .text > h1 {
position: absolute;
width: 22%;
height: auto;
margin-left: 38%;
margin-top: 18%;
box-sizing: border-box;
color: white;
text-align: center;
font-size: 2vw;
}
.supported > a > img {
position: absolute;
width: 15%;
height: auto;
margin-left: 41.2%;
margin-top: 38%;
}
.supported-text {
position: absolute;
width: 22%;
height: auto;
margin-left: 38%;
margin-top: 35%;
box-sizing: border-box;
color: white;
text-align: center;
font-size: 2vw;
font-weight: 600;
}
Thanks for any help!
Solution:
#media screen and (max-width: 768px) {
body > #container > .logo > img {
width: 25%;
margin-left: 36%;
}
#container > .text > h1 {
margin-top: 28%;
font-size: 6vw;
width: 55%;
margin-left: 22%;
}
.supported-text {
font-size: 5vw;
width: 35%;
margin-top: 72%;
margin-left: 32%;
}
.supported > a > img {
width: 28%;
margin-top: 80%;
margin-left: 35%;
}
}
You should use media queries.
#media (max-width: 768px) {
// Change your websites values. For example, if you wish that some text will be larger, give him a new font-size attribute.
}
Note that 768px means to phone view. Moreover, Large screen/ Desktop is 992px and Extra large screen / wide desktop is 1200px.

Responsive CSS is not working but works half way

Hi guys I am having a problem with my responsive CSS. It is working fine with max-width:321px but not when I try to do max-width:500px. I am trying to understand why and what I am doing wrong. Please help...
/*/Mobile MAINCSS/*/
img {
max-width: 100%;
height: auto;
}
#media screen and (max-width: 320px) {
/*/Nav and Header/*/
iframe {
width: 100%;
height: 700px;
}
body {
color: red;
}
#nav {
display: none;
width: 100%;
}
#logomain {
width: 100%;
height: auto;
display: none;
}
.logo {
display: none;
}
.logoright {
display: none;
}
.mobile-number {
display: block;
text-align: center;
background:#333399;
}
.mobile-number a:link {
color: red;
text-decoration: none;
}
.mobile-number a:visited {
color: red;
text-decoration: none;
}
#head_wrap {
width: 100%;
height: auto;
}
#head {
width: 100%;
height: auto;
}
/*/Mobile Navigation/*/
#mobilenav {
display: block;
margin: 0 auto;
width: 100%;
height: auto;
background: #333399;
color: white;
font-size: 18px;
text-align: center;
}
.mobile ul {
display: inline;
margin: 0 auto;
width: 100%;
height: auto;
}
.mobile ul li {
display: inline-block;
padding: 10px;
}
.mobile a:link {
color: white;
text-decoration: none;
font-weight: bold;
text-shadow: 1px 1px 1px black;
border-radius: 5px 5px 5px 5px;
padding: 5px;
}
.mobile a:visited {
color: white;
}
}
/*/Content/*/
#content {
width: 100%;
height: auto;
}
#content_wrapper {
width: 100%;
height: auto;
}
#bizmain {
width: 100%;
height: auto;
}
.bizexpress {
float: none;
}
.bizpro {
float: none;
}
.pro {
float: none;
}
/*/Footer/*/
#footer {
width: 100%;
height: auto;
}
/*/Additional Updates 02/28/2015/*/
.main-right {
width: 100%;
height: auto;
text-align: center;
}
.main-left {
width: 100%;
height: auto;
float: none;
text-align: center;
}
.form {
width: 100%;
height: auto;
}
.form-control {
width: 50%;
}
.input-group-addon {
font-size: inherit;
}
/*/Website Design/*/
.evoke {
width: 100%;
height: auto;
}
.evokeemotions {
width: 100%;
height: auto;
}
.resource1 {
float: none;
text-align: center;
}
.resource2 {
float: none;
text-align: center;
}
.resource3 {
float: none;
text-align: center;
}
}
#media screen and (max-width: 500px)
{
}
#media screen and (max-width: 320px)
{
}
You are right no problem please. place 500px Css above 300px

problems with optimization of css for IE 9

i can't seem to get my site css optimized for IE9
frustrating when my costumer uses IE9
website here
looks like theres a problem with float to.
i have tried making all min-height 100% to height 100% but that only fixed some of the problems
have problem with opacity and with a whole div not showing
any suggestions? :)
How it sadly looks in IE9
body {
background-color: lightgray;
background-image: url('img/wall.jpg');
background-size: 100%;
margin: 0;
font-family: "Courier New";
}
#footer a {
color: black;
}
a {
color: white;
}
h1 {
}
p {
margin-top: 64px;
margin-left: 30px;
margin-right: 30px;
color: white;
font-size: 10pt;
font-family: "Courier New";
}
ol {
margin-left: 30px;
margin-right: 30px;
color: white;
font-size: 10pt;
font-family: "Courier New";
}
#navbarWrapper a {
text-decoration: none;
}
#wrapper {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#logo {
background-image: url('img/saefelogo2.png');
height: 40px;
width: 228px;
margin-left: 40px;
margin-top: 30px;
margin-bottom: 30px;
cursor: pointer;
background-size: auto 100%;
background-repeat: no-repeat;
}
#navbarWrapper {
position: absolute;
top: 130px;
left: 0px;
width: 500;
}
.nav {
color: white;
background-color: black;
margin-top: 2px;
margin-bottom: 2px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 40px;
text-shadow: 0px 0px 2px #000000;
width: 400px;
background-color: rgba(0,0,0,0.4);
font-size: 10pt;
}
.nav:hover {
background-color: rgba(0,0,0,0.6);
font-weight: bold;
cursor: pointer;
}
#firma #nav1 {
background-color: rgba(0,0,0,0.6);
font-weight: bold;
}
#natklub #nav2 {
background-color: rgba(0,0,0,0.6);
font-weight: bold;
}
#event #nav3 {
background-color: rgba(0,0,0,0.6);
font-weight: bold;
}
#uniform #nav4 {
background-color: rgba(0,0,0,0.6);
font-weight: bold;
}
#speciel #nav5 {
background-color: rgba(0,0,0,0.6);
font-weight: bold;
}
#overv #nav6 {
background-color: rgba(0,0,0,0.6);
font-weight: bold;
}
#job #nav7 {
background-color: rgba(0,0,0,0.6);
font-weight: bold;
}
#ref #nav8 {
background-color: rgba(0,0,0,0.6);
font-weight: bold;
}
#socialWrapper {
position: absolute;
top: 420px;
left: 35px;
}
#facebook {
height: 30px;
width: 30px;
display: inline-block;
background-image: url('img/facebook.png');
margin: 2px;
background-size: 100%;
opacity: 0.6;
}
#linkdin {
height: 30px;
width: 30px;
display: inline-block;
margin: 2px;
background-image: url('img/linkdin.png');
background-size: 100%;
opacity: 0.6;
}
#linkdin:hover, #facebook:hover {
opacity: 0.9;
cursor: pointer;
}
#footer {
width: 400px;
position: absolute;
bottom: 20px;
left: 40px;
font-size: 13px;
}
#contentWrapper {
position: absolute;
width: 600px;
top: 0px;
left: 500px;
/*height: 100%;*/
background-color: rgba(0,0,0,0.9);
min-height: 100%;
height: 100%;
}
#contentHeader {
padding-bottom: 35px;
height: 45px;
vertical-align: bottom;
color: white;
font-size: 17px;
font-weight: bold;
padding-top: 55px;
padding-left: 30px;
}
#contentHeader2 {
padding-bottom: 35px;
height: 60px;
vertical-align: bottom;
color: white;
font-size: 17px;
font-weight: bold;
padding-top: 40px;
padding-left: 30px;
}
#uoverskrift {
font-size: 15px;
font-weight: normal;
}
#pictureWrapper {
height: 225px;
width: 600px;
}
#index #picture {
background-image: url('img/index.png');
background-size: auto 100%;
height: 225px;
}
#event #picture {
background-image: url('img/event.png');
background-size: auto 100%;
height: 225px;
}
#natklub #picture {
background-image: url('img/natclub.png');
background-size: auto 100%;
height: 225px;
}
#firma #picture {
background-image: url('img/firma.png');
background-size: auto 100%;
height: 225px;
}
#uniform #picture {
background-image: url('img/uniform2.png');
background-size: auto 100%;
height: 225px;
}
#speciel #picture {
background-image: url('img/special.png');
background-size: auto 100%;
height: 225px;
}
#overv #picture {
background-image: url('img/materiel.png');
background-size: auto 100%;
height: 225px;
}
#job #picture {
background-image: url('img/job.png');
background-size: auto 100%;
height: 225px;
}
#ref #picture {
background-image: url('img/ref.png');
background-size: auto 100%;
height: 225px;
}
#textWrapper {
width: 600px;
}
#hstreg1 {
height: 1px;
min-width: 100%;
width: 100%;
background-color: black;
position: absolute;
top: 100px;
left: 0px;
}
#hstreg2 {
top: 393px;
height: 1px;
min-width: 100%;
width: 100%;
background-color: black;
position: absolute;
}
#vstreg1 {
top: 0px;
left: 470px;
min-height: 100%;
height: 100%;
width: 1px;
background-color: black;
position: absolute;
}
#vstreg2 {
top: 0px;
left: 1128px;
min-height: 100%;
height: 100%;
width: 1px;
background-color: black;
position: absolute;
}
#media screen and (max-device-width: 480px){
body{
-webkit-text-size-adjust: none;
}
}
Found a fix
Apperently it is important for IE that the doctype is correctly spelled!
<!DOCTYPE html>

How to stop content from overlapping the footer?

So I am working on a website at the moment, and all the content is arranged in boxes around the page. The css looks like this:
section {
position: static;
bottom: 110px;
}
#topLeft, #topRight, #bottomLeft, #bottomRight, #below {
background-color: white;
padding-left: 10px;
padding-right: 10px;
box-shadow: rgba(0,0,0,0) 0px 2px 3px, inset rgba(0,0,0,0) 0px -1px 2px;
border-radius: 20px;
border: 1px solid #00BFFF;
}
#topLeft, #topRight {
padding-top: 10px;
}
#topLeft {
float: left;
margin-top: 200px;
width: 630px;
height: 310px;
}
#topRight {
float: right;
margin-top: 200px;
width: 300px;
height: 630px;
}
#middle {
clear: left;
position: absolute;
margin-top: 530px;
margin-left: 330px;
width: 320px;
height: 310px;
}
#bottomLeft {
clear: left;
float: left;
margin-top: 10px;
width: 300px;
height: 630px;
}
#bottomRight {
clear: right;
float: right;
margin-top: 10px;
width: 630px;
height: 310px;
}
img {
border-radius: 20px;
}
#topRight img {
margin-top: 25px;
}
#bottomLeft img {
margin-top: 20px;
}
And the footer goes below this, its css looks like this:
footer {
clear: left;
/*position: relative;*/
bottom: 0px;
padding-bottom: 20px;
margin-bottom: 20px;
padding-top: 40px;
height: 110px;
font: normal 12px 'Helvetica', sans-serif;
color: white;
text-align: center;
}
I want to add a new box below the others, but above the footer. Its css looks like this:
#below {
clear: both;
position: absolute;
float: left;
margin-top: 1170px;
width: 960px;
}
The problem is that this box overlaps the footer! And I just cannot work out how to fix this, any ideas?
#below { clear:both }
should be enough

How to stretch website to resolution screen

Im working on website (from psd. to HTML/CSS).
How i can auto match website to resolution of people who watch my website?
PSD template has 1600px width and I set this same width for HTML.
My personal reolution of screen is 1920 x 1080 px, so website for me is not displayed corretly. (browser doesnt stretch website to my resolution)
My HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html"; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Szablon HTML5</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"></div>
</div>
<div id="slider">
<div id="stripe">pasek</div>
<div id="mainpic">obrazek
<div id="podpis">podpis obrazka</div>
</div>
</div>
<div id="content">
<div id="boxes">
<div class="box">
<h2>Perfect Logic</h2>
<h3>All you want your website to do.</h3>
<img src="pictures/minibox.png" class="boxPicture">
<p>Lore ipsum bla sdk wejhhds asdjh, ajsdhahsd qwjehqwe Lore ipsum bla sdk wejhhds asdjh, ajsdhahsd qwjehqwe Lore ipsum bla sdk wejhhds asdjh, ajsdhahsd qwjehqwe</p>
<img src="pictures/przycisk.png" class="przycisk">
</div>
<div class="box">b</div>
<div id="box_c">c</div>
</div>
</div>
<div id="przerywnik"></div>
<footer></footer>
</div>
</body>
</html>
My CSS file:
* {
margin: 0;
padding: 0;
background: #ffffff;
width: 1600px;
height: auto;
}
#wrapper{
width: 1600px;
height: auto;
}
#header{
height: 137px;
width: 1600px;
background-image:url('pictures/headerbg.png');
background-repeat:repeat-x;
}
#logo{
background-image:url('pictures/logo.png');
width: 320px;
height: 137px;
margin-left: 330px;
}
#slider{
height: 426px;
z-index: 2;
}
#stripe{
height: 335px;
background: grey;
z-index: 1;
position: absolute;
background-image:url('pictures/stripe.png');
background-repeat:repeat-x;
}
#mainpic{
position: absolute;
z-index: 3;
width: 940px;
height: 343px;
margin-top:22px;
margin-left: 330px;
background-image:url('pictures/slider.jpg');
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#podpis{
margin-top: 338px;
margin-left: 104px;
font-size: 36px;
width: 700px;
position: absolute;
}
/* Część z boxami */
#boxes{
height: 469px;
width: 940px;
margin-left: 330px;
background: #234f31;
}
.box{
float: left;
height: 469px;
width: 320px;
background: #ffffff;
}
.box h2{
font-size: 18px;
margin-top: 21px;
font-family: Georgia;
color: #11719e;
float:left;
}
.box h3{
font-size: 12px;
margin-top: 2px;
font-family: Helvetica;
color: #8c8c8c;
float:left;
}
.box p{
margin-top: 12px;
margin-left: 2px;
font-size: 13px;
color: #3e3e3e;
width: 299px;
float: left;
}
.przycisk{
margin-top: 20px;
margin-left: 2px;
float: left;
width: 163px;
height: 35px;
}
.boxPicture{
margin-top: 15px;
float: left;
height: 198px;
width: 299px;
}
#box_c{
float: left;
height: 469px;
width: 300px;
background: yellow;
}
/* Footer */
#przerywnik{
height: 10px;
width: 1600px;
background: #4c4c4c;
}
footer{
height: 173px;
width: 1600px;
background: #333333;
}
How i can fix this?
Edit all
width:1600px;
in your css code to
width:100%;
Edit this on your code:
* {
margin: 0;
padding: 0;
background: #ffffff;
width: 1600px;
height: auto;
}
#wrapper{
width: 1600px;
height: auto;
}
By:
* {
margin: 0;
padding: 0;
background: #ffffff;
width: 100%;
height: auto;
}
#wrapper{
width: 100%;
height: auto;
}
EDIT:
Here are the code:
* {
margin: 0;
padding: 0;
background: #ffffff;
width: 100%;
height: auto;
}
#wrapper{
width: 100%;
height: auto;
}
#header{
height: 137px;
width: 100%;
background-image:url('pictures/headerbg.png');
background-repeat:repeat-x;
}
#logo{
background-image:url('pictures/logo.png');
width: 320px;
height: 137px;
margin-left: 330px;
}
#slider{
height: 426px;
z-index: 2;
}
#stripe{
height: 335px;
background: grey;
z-index: 1;
position: absolute;
background-image:url('pictures/stripe.png');
background-repeat:repeat-x;
}
#mainpic{
position: absolute;
z-index: 3;
width: 60%;
min-width:940px;
height: 343px;
margin-top:22px;
margin-left:-30%;
left:50%;
background-image:url('pictures/slider.jpg');
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#podpis{
margin-top: 338px;
margin-left: 104px;
font-size: 36px;
width: 700px;
position: absolute;
}
/* Część z boxami */
#boxes{
height: 469px;
width: 940px;
margin-left: 330px;
background: #234f31;
}
.box{
float: left;
height: 469px;
width: 320px;
background: #ffffff;
}
.box h2{
font-size: 18px;
margin-top: 21px;
font-family: Georgia;
color: #11719e;
float:left;
}
.box h3{
font-size: 12px;
margin-top: 2px;
font-family: Helvetica;
color: #8c8c8c;
float:left;
}
.box p{
margin-top: 12px;
margin-left: 2px;
font-size: 13px;
color: #3e3e3e;
width: 299px;
float: left;
}
.przycisk{
margin-top: 20px;
margin-left: 2px;
float: left;
width: 163px;
height: 35px;
}
.boxPicture{
margin-top: 15px;
float: left;
height: 198px;
width: 299px;
}
#box_c{
float: left;
height: 469px;
width: 300px;
background: yellow;
}
/* Footer */
#przerywnik{
height: 10px;
width: 100%;
background: #4c4c4c;
}
footer{
height: 173px;
width: 100%;
background: #333333;
}
I think would best be suited to the answer here with a given explanation to your problems: How to fit your website for all or at lest most screen resolutions?

Resources