HTML
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Coming Soon</title>
<link href="css/Main.css" rel="stylesheet">
</head>
<body>
<section class="content">
<div style="width:500px;
margin:0 auto;
top:25%;
position:relative">
<img src="img/logo.png">
<img src="img/line.png">
<p class="header large-2 white padding-top-triple">Coming This Fall 2015</p>
<p class="white padding-top"><span class="header">Email: </span>
<a href="mailto:Jethwa96#hotmail.co.uk">
<my-email data-user="Jethwa" data-domain="jedesigns.uk"></my-email>
</a>
</p>
</div>
</section>
</body>
</html>
CSS
/* Typography */
.header {
font-family: "futura-pt", Arial, Helvetica, sans-serif;
font-weight: 700;
font-size: 1.0em;
margin: 0;
padding: 0;
text-transform: uppercase;
letter-spacing: 0.1em;
}
p {
font-family: "futura-pt", Arial, Helvetica, sans-serif;
font-weight: 400;
font-size: 1.0em;
margin: 0;
padding: 0;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* Sizes */
.large-5 {
font-size: 5.0em;
}
.large-4 {
font-size: 4.0em;
}
.large-3 {
font-size: 3.0em;
}
.large-25 {
font-size: 2.5em;
}
.large-2 {
font-size: 1.5em;
}
.large-15 {
font-size: 1.3em;
}
#media screen and (min-width: 768px) {
.large-5 {
font-size: 5.0em;
}
.large-4 {
font-size: 4.0em;
}
.large-3 {
font-size: 3.0em;
}
.large-25 {
font-size: 2.5em;
}
.large-2 {
font-size: 2.0em;
}
.large-15 {
font-size: 1.5em;
}
}
/* Colours */
.white {
color: #fff;
}
.black {
color: #000;
}
/* Spacing */
.padding-top {
padding-top: 2em;
}
.padding-top-double {
padding-top: 2em;
}
.padding-top-triple {
padding-top: 1em;
}
.padding-bottom {
padding-bottom: 1em;
}
/* Links */
a:link,
a:visited,
a:active {
color: #fff;
text-decoration: none;
}
a:hover {
color: #fff;
text-decoration: underline;
}
/* General */
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
background: #fff;
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Structure */
.content {
width: 100%;
position: relative;
height: 1200px;
margin: 0 auto;
border: 3px solid #fff;
background: url(http://jedesigns.uk/img/hd-sunset-river-HD-1200x1920.jpg) no-repeat;
}
.content img {
max-width: 100%;
}
my-email::after {
content: attr(data-domain);
}
my-email::before {
content: attr(data-user)"\0040";
}
I need to know how to fit the background image fully on any screen device so its responsive to any device.
i have tried many ways but it didn't worked so hopefully the people of stack overflow can help :)
You need to use background-size:coverbut propely. That means give 100% height to your .content(and add it to all the parents including html) basically:
html, section {height:100%;}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
background: #fff;
}
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* Structure */
.content{
width: 100%;
position: relative;
height: 100%;
margin: 0 auto;
border: 3px solid #fff;
background:url(http://jedesigns.uk/img/hd-sunset-river-HD-1200x1920.jpg) no-repeat;
background-size:cover;
background-position:center, bottom;
}
.content img {
/* max-width: 100%;*/
}
and I also removed the styles you add inline. .content img is wrong css as you don't have any <img>in the html to call.
JSFIDDLE
Related
This is full css of the code. On tablet and on the computer it looks good but not on the mobile device when the website is published. Logo and h1 are not responsive. This is full css of the code. On tablet and on the computer it looks good but not on the mobile device when the website is published. Logo and h1 are not responsive.
body {
margin: 0;
padding: 0;
}
/* header */
.logo-img {
width: 420px;
}
h1 {
text-align: right;
font-family: 'Abel', sans-serif;
font-size: 35px;
margin-top: 20px;
color: #1a1a1a;
text-transform: uppercase;
}
h2 {
text-align: right;
font-family: 'Abel', sans-serif;
font-size: 21px;
color: #1a1a1a;
font-weight: 100;
text-transform: uppercase;
letter-spacing: 6px;
}
.line {
width: 97.5%;
}
/* end header */
/* content */
.main-img {
width: 100%;
}
p {
text-align: center;
margin-top: 10px;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
font-weight: 100;
color: #1a1a1a;
}
.copy {
font-size: 15px;
font-weight: 100;
font-family: 'Quicksand', sans-serif;
}
/* #map {
width: 55%;
height: 200px;
box-sizing: border-box;
text-align: right;
} */
/* end content */
/* footer */
.footer-img {
width: 350px;
margin-right: 15px;
}
h3 {
text-align: center;
font-family: 'Abel', sans-serif;
font-size: 30px;
color: #5d75ab;
text-decoration: none;
margin-top: 10px;
text-transform: uppercase;
}
h4 {
text-align: center;
margin-top: 30px;
text-transform: uppercase;
letter-spacing: 2px;
font-family: 'Abel', sans-serif;
font-size: 24px;
font-weight: 100;
color: #1a1a1a;
}
h5 {
text-align: center;
margin-top: 30px;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
font-weight: 100;
color: #1a1a1a;
}
a href {
text-align: center;
}
a:link {
color: #5d75ab;
text-decoration: none;
}
a:visited {
color: #5d75ab;
text-decoration: none;
}
a:hover {
color: #5d75ab;
text-decoration: none;
color: #1a1a1a;
}
a:active {
color: #5d75ab;
text-decoration: none;
}
.footer-img-container,
.top-row {
margin-top: 30px;
}
.link {
text-align: center;
display: block;
}
/* end footer */
/* Mobile Phone Responsiveness - Nexus 5 */
#media screen and (max-width: 414px) {
h1 {
font-size: 14px !important;
line-height: 80%;
margin-top: 10px;
}
h2 {
font-size: 11px;
letter-spacing: 1.2px;
}
p {
font-size: 12px;
}
h3 {
font-size: 16px;
}
h4 {
font-size: 10px;
}
h5 {
font-size: 11px;
}
.logo-img {
width: 180px;
position: absolute;
}
.main-img {
width: 100%;
}
.footer-img {
width: 100%;
}
.line {
width: 90%;
}
.copy {
font-size: 10px;
font-weight: 100;
font-family: sans-serif;
}
}
/* Tablet Responsiveness - IPad */
#media screen and (min-width:416px) and (max-width: 768px) {
h1 {
font-size: 25px;
margin-top: 0px;
}
h2 {
font-size: 20px;
letter-spacing: 2px;
}
p {
font-size: 16px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 12px;
}
.logo-img {
width: 250px;
position: absolute;
}
.main-img {
width: 100%;
}
.footer-img {
width: 100%;
}
.line {
width: 95%;
}
.copy {
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
}
}
You can use bootstrap image responsive class.
<img src="images/logo.png" alt="logo" class="img-responsive"/>
And for H1 tag you can use media query to make it responsive font size.
h1 {
font-size: 22px;
}
.img-responsive {
width: 100%;
max-width: 200px
}
#media screen and (max-width: 360px) {
h1 {
font-size: 12px !important;
line-height: 80%;
margin-top: 10px;
}
.img-responsive {
width: 100%;
max-width: 100px
}
}
<img src="https://www.freelancingdesign.com/wp-content/uploads/2015/04/fd-theme-590x300.jpg" alt="logo" class="img-responsive" />
<h1>Logo Goes here</h1>
#media screen and (max-width: 360px) {
h1 {
font-size: 12px !important;
line-height: 80%;
margin-top: 10px;
}
}
Make sure the media query css should be below the main css then it will work, Sequence is matter.
Hope this helpful.
/*Desktop responsive*/
.logo-img {
width: 260px;
}
h1 {
font-size: 58px !important;
line-height: 80%;
margin-top: 10px;
}
/* Mobile Phone Responsiveness */
#media screen and (max-width: 360px) {
h1 {
font-size: 12px !important;
line-height: 80%;
margin-top: 10px;
}
h2 {
font-size: 9px;
letter-spacing: 1.2px;
}
p {
font-size: 12px;
}
h3 {
font-size: 16px;
}
h4 {
font-size: 8px;
}
h5 {
font-size: 11px;
}
.logo-img {
width: 160px;
position: absolute;
}
.main-img {
width: 100%;
}
.footer-img {
width: 100%;
}
.line {
width: 90%;
}
.copy {
font-size: 10px;
font-weight: 100;
font-family: sans-serif;
}
}
<!DOCTYPE html>
<html lang="sh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Frigo MMB</title>
</head>
<body>
<!-- header -->
<div class="container">
<div class="row top-row">
<div class="col-md-6">
<img src="https://www.stickpng.com/assets/images/580b57fcd9996e24bc43c529.png" alt="logo img" class="logo-img">
</div>
<div class="col-md-6">
<h1>Hladjenje & <span style="color: #5d75ab">Klimatizacija</span></h1>
<h2>011.8525636 | 063.7591345</h2>
</div>
</div>
</body>
</html>
May some of the existing code overwriting your h1 tag so i have added !important it will help overwrite the other h1 class.
Hope this snippet will help you.
You can try something like this, if image have width of 400px, then use:
#media screen and (max-width: 400px) {
img {
width: 100%;
}
}
You may need to use different selector for img, same that set the width in your other CSS if you set it.
With header you can put it above the image if it's next to image on desktop.
so I have a fixed bottom navbar with 6 links and 4 icons on it (3 for different social medias and 1 to return the the index), which looks exactly how I want it to when the page is fullscreen but once the window reaches around 60% of maximised, everything goes out of position and isn't aligned.
#import url(http://fonts.googleapis.com/css?family=Raleway:300,400,700);
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
body {
background: #333;
color: #fff;
font-size: 16px;
font-family: 'Raleway', Arial, sans-serif;
}
a {
color: #fff;
text-decoration: none;
font-weight: 700;
outline: none;
}
/* Link Colours */
.fade {
background: #333;
}
.fade a {
color: #fff;
}
a:hover,
a:focus {
color: #333;
}
.social {
float: left;
clear: none;
}
#social {
padding: 5px;
}
/* Buttons */
.Streetworn-demos {
width: 100vw;
background-color: #ff9966;
margin: 0;
text-align: center;
position: fixed;
bottom: 0;
}
.Streetworn-demos a {
text-align: center;
display: inline-block;
margin: 0.5em 0.75em;
line-height: 1;
font-family: 'Raleway', cursive;
letter-spacing: 1px;
}
.about h3 {
font-family: 'Satisfy', cursive;
font-size: 32px;
margin: 5px;
padding-top: 6px;
padding-left: 10px;
border-radius: 5px 25px 25px 5px;
background-color: #ff9966;
}
.about p {
font-family: 'Raleway', cursive;
font-weight: 700;
font-size: 16px;
padding: 10px;
margin: auto;
}
.login {
width: 100%;
margin: auto;
text-align: right;
padding: 10px;
background: #ff9966;
}
#home {
padding: 5px;
}
.home {
float: right;
clear: none;
}
.brands {
padding-top: 13px;
}
.about {
margin-top: -100px;
margin-left: auto;
margin-right: auto;
width: 75%;
padding: 15px;
text-align: justify;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
audio,
canvas,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] {
display: none;
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
outline: 0;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
mark {
background: #ff0;
color: #000;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
pre {
white-space: pre-wrap;
}
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 0;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
button,
input {
line-height: normal;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
vertical-align: top;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
<nav class="Streetworn-demos">
<a class="home" href="index.html"><img id="home" alt="Return to the landing page" src="https://image.ibb.co/m5Fxe7/home2.png" style="height: 36px; width: 36px" onmouseover="this.src='https://image.ibb.co/m5Fxe7/home2.png'" onmouseout="this.src='https://image.ibb.co/m5Fxe7/home2.png'"></a>
<a class="brands" href="#">PALACE</a>
<a class="brands" href="#">GOLFWANG</a>
<a class="brands" href="#">SUPREME</a>
<a class="brands" href="#">BILLIONAIRE'S BOYS CLUB</a>
<a class="brands" href="#">STUSSY</a>
<a class="brands" href="#">ANTISOCIAL SOCIAL CLUB</a>
<div class="social">
<img id="social" alt="Follow Streetworn on Facebook!" src="https://image.ibb.co/hxnXCS/fb2.png" style="height: 36px; width: 36px" onmouseover="this.src='https://image.ibb.co/hxnXCS/fb2.png'" onmouseout="this.src='https://image.ibb.co/hxnXCS/fb2.png'">
<img id="social" alt="Follow Streetworn on Instagram!" src="https://image.ibb.co/hxnXCS/fb2.png" style="height: 36px; width: 36px" onmouseover="this.src='https://image.ibb.co/hxnXCS/fb2.png'" onmouseout="this.src='https://image.ibb.co/hxnXCS/fb2.png'">
<img id="social" alt="Follow Streetworn on Twitter!" src="https://image.ibb.co/hxnXCS/fb2.png" style="height: 36px; width: 36px" onmouseover="this.src='https://image.ibb.co/hxnXCS/fb2.png'" onmouseout="this.src='https://image.ibb.co/hxnXCS/fb2.png'">
</div>
</nav>
How do I go about fixing it so that when the page is resized, the menu items are all centered and maybe make the home icon go below the links, next to the social icons (ignore the icons in the snippet, just needed icons to show what I meant).
Any advice would be appreciated! Thanks, Zane.
you can give a variable to the size of the font with .Streetworn-demos a {... font-size: 1.3vw;} but it is not easy to read on small screens, I recommend using #media all and (max-width: 768px) {}
and position differently for example centered
this
#media all and (max-width:768px){
.Streetworn-demos > a:first-of-type{display: block;width: 100%;margin: 0;padding: 0;}
.Streetworn-demos a{font-size: 1em;display: inline-block;text-align: center;width: 46%;margin: 3px 0;padding: 4px 0;}
.social a{display: inline-block;width: 20px;margin: 0 9px;}
}
or
#media all and (max-width:768px){
.Streetworn-demos a{font-size: 1em;display: inline-block;text-align: center;width: 100%;margin: 3px 0;padding: 4px 0;}
.social a{display: inline-block;width: 20px;margin: 0 9px;}
}
The background on this page isn't displaying and instead just shows the image i have set behind the background. Also I tried centering my table using the methods posted on other threads, but none of them worked for this specifically.
/*
Winter, Edwards, and Boyd style sheet
Filename: styles.css
Author: Justus Self
Date: 4/27/2017
Long giant project
*/
/* reset styles */
html {
font-size: 16px;
}
a, article, audio, body, div, figcaption, figure, footer, header, h1,
h2, h3, img, li, nav, p, section, source, ul, video {
border: 0;
padding: 0;
margin: 0;
}
img, video {
max-width: 100%;
height: auto;
width: auto;
}
ul {
list-style-type: none;
}
/* document-wide styles */
body {
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
}
p {
line-height: 1.4em;
font-size: 1.3em;
}
a:link {
color: black;
}
a:visited {
color: #888;
}
/* skip navigation link */
p.skipnavigation a {
position: absolute;
left: -10000px;
}
p.skipnavigation a:focus {
color: ivory;
background-color: #34180f;
top: 0.4em;
left: auto;
right: 0.4em;
z-index: 2;
}
/* header section */
h1 {
text-align: center;
font-family: Bitter, "Times New Roman", Times, serif;
font-weight: 700;
color: ivory;
background-color: white;
font-size: 2.4em;
}
/* site navigation bar */
nav {
color: #34180f;
text-align: center;
background-color: #B8944D;
}
nav li {
margin: 0.3em 0.5em;
display: inline-block;
font-size: 1.3em;
line-height: 1.4em;
}
nav a:link {
text-decoration: none;
color: #744f42;
}
nav a:visited {
color: #744f42;
}
nav a:hover, nav a:focus {
color: ivory;
}
nav ul, nav div, nav iframe {
display: inline-block;
vertical-align: middle;
}
#AboutUs:hover {
color: ivory;
cursor: pointer;
}
#AboutUs {
color: #744f42;
}
/* main content */
article {
margin: 0 auto;
padding: 1.4em;
background: #7eccec;
background: url("images/bg.jpg");
}
article div {
max-width: 854px;
margin: 0 auto;
padding: 0 3% 1em;
background-color: ivory;
overflow: auto;
}
article div.welcome {
padding-top: 2em;
}
article div figure {
float: left;
padding-right: 2%;
padding-bottom: 2%
margin-top: 20px;
}
.container {
min-width: 600px;
max-width: 800px;
margin: 0 auto;
padding: 0 3% 0;
background-color: darkblue;
overflow: auto;
}
h2 {
padding: 0.4em;
text-align: left;
font-family: Bitter, "Times New Roman", Times, serif;
font-size: 2em;
font-weight: 700;
}
h3 {
margin: 1.4em 0 0;
font-size: 1.6em;
font-family: Bitter, "Times New Roman", Times, serif;
font-weight: 700;
clear: both;
}
h3 iframe.iframes{
border: none;
}
section p {
margin: 1em 0;
}
article figure {
max-width: 100%;
margin-left: 2em;
float: right;
}
article figcaption {
text-align: center;
}
.Bookkeeping {
clear: right;
float: left;
width: 60%;
}
.Testimonial1 {
border: 2px solid black;
background-color: white;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
position: relative;
top: 6em;
}
.Testimonial{
border: 2px solid black;
background-color: white;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
position: relative;
top: 6em;
}
.History {
clear: left;
float: right;
width: 47%;
}
.Olddude {
border-radius: 5px;
border: 1em solid #B8944D;
margin: 1em;
position: relative;
top: 10em;
}
.nonprofit1 {
width: 60%;
clear: left;
float: right;
}
.nonprofit {
margin: 1em;
float: left;
position: relative;
}
/* form styles */
form {
padding: 10px;
}
/* fieldsset styles */
fieldset {
margin-bottom: 0.8em;
}
fieldset fieldset {
margin-top: 1em;
padding: 0.8em;
border: 1px solid #777;
}
/* field styles */
.contactinfo input, #stay-nights, textarea {
border: 1px solid #ccc;
padding: 0.2em;
font-size: 1em;
}
select {
margin-bottom: 0.6em;
}
.contactinfo input {
position: absolute;
left: 5em;
}
.schedule input {
position: absolute;
left: 10em;
}
#nameinput, #emailinput {
width: 25em;
}
#phoneinput {
width: 12em;
}
#stay-nights {
width: 3em;
}
#submit {
border: none;
padding: 0.4em 0.6em;
background-color: #e3d5ba;
font-size: 1.25em;
border-radius: 10px;
}
/* main content table */
th, td {
border: 1px solid black;
padding: 0.5em;
}
th {
background-color: lightblue;
}
.email {
background-color: ivory;
}
.name {
background-color: pink;
}
.degree {
background-color: orange;
}
/* Main Content CSS Table */
.table {
margin: 1em 0;
font-size: 1.3em;
display: table;
}
.row {
display: table-row;
}
.row div {
padding: 0.25em 0.5em;
display: table-cell;
}
.day {
font-weight: bold;
}
/* label styles */
label {
font-size: 1em;
line-height: 1.6em;
}
.contactinfo label {
display: block;
position: relative;
margin: 0.8em 0;
}
.services label, .method label {
margin-right: 1.6em;
}
.schedule p{
width: 9.2em;
float: left;
}
.date-picker label {
position: absolute;
left: -10000px;
}
/* footer section */
footer {
padding: 0.6em;
background-color: darkblue;
color: ivory;
text-align: center;
}
.copyright {
text-align: center;
font-size: .8em;
color: white;
}
/* print styles */
#media print {
body, h1, article, footer {
color: rgb(0,0,0);
background: rgb(255,255,255);
}
body {
max-width: 100%;
}
nav {
display: none;
}
}
#page {
margin: 0.75in;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>WEB Managing Partners</title>
<!--
Winter, Edwards, and Boyd (WEB) main web page
Filename: index.html
Author: Justus Self
Date: 5/2/2017
A Giant Project that makes me really sad
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.40753.js"></script>
<link href='http://fonts.googleapis.com/css?family=Bitter:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body>
<div class="container">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<p class="skipnavigation">Skip navigation</p>
<header>
<h1><img src="images/W.E.B.png" width="501" height="299" alt="Winter, Edwards, & Boyd"></h1>
</header>
<nav class="sitenavigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
</ul>
<ul>
<li>Managing Partners</li>
<li>Company History</li>
<li>Community Involvement</li>
</ul>
<div class="fb-like" data-href="https://facebook.com/cengagebrain"
data-layout="button" data-action="like" data-size="small" data-show-faces="true"
data-share="false">
</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
Tweet<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</nav>
<article id="contentstart">
<h2>Managing Partners</h2>
<h3>Our employees may be contacted using the e-mails shown below</h3>
<br>
<table>
<colgroup>
<col class="name">
<col class="email">
<col class="degree">
</colgroup>
<thead>
<tr>
<th>Employee Name</th>
<th>E-mail</th>
<th>Degree</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mike Edwards</td>
<td>medwards#webcpa.com</td>
<td>Certified Public Accountant</td>
</tr>
<tr>
<td>Julia Winters</td>
<td>jwinter#webcpa.com</td>
<td>Certified Financial Planner</td>
<tr>
<td>Regina Boyd</td>
<td>rboyd#webcpa.com</td>
<td> Certified Public Accountant </td>
</tr>
</tbody>
</table>
<br>
<br>
<footer>
<nav class="sitenavigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<p class="copyright">ⒸJustus Self</p>
<p class="copyright"> CIS 130 – SP16</p>
</footer>
</article>
</div>
</body>
</html>
background property needs height and (max-)width just use the values you want and you are good to go.
/*
Winter, Edwards, and Boyd style sheet
Filename: styles.css
Author: Justus Self
Date: 4/27/2017
Long giant project
*/
/* reset styles */
html {
font-size: 16px;
}
a,
article,
audio,
body,
div,
figcaption,
figure,
footer,
header,
h1,
h2,
h3,
img,
li,
nav,
p,
section,
source,
ul,
video {
border: 0;
padding: 0;
margin: 0;
}
img,
video {
max-width: 100%;
height: auto;
width: auto;
}
ul {
list-style-type: none;
}
/* document-wide styles */
body {
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
}
p {
line-height: 1.4em;
font-size: 1.3em;
}
a:link {
color: black;
}
a:visited {
color: #888;
}
/* skip navigation link */
p.skipnavigation a {
position: absolute;
left: -10000px;
}
p.skipnavigation a:focus {
color: ivory;
background-color: #34180f;
top: 0.4em;
left: auto;
right: 0.4em;
z-index: 2;
}
/* header section */
h1 {
text-align: center;
font-family: Bitter, "Times New Roman", Times, serif;
font-weight: 700;
color: ivory;
background-color: white;
font-size: 2.4em;
}
/* TABLE CENTER*/
table { margin:auto}
/* site navigation bar */
nav {
color: #34180f;
text-align: center;
background-color: #B8944D;
}
nav li {
margin: 0.3em 0.5em;
display: inline-block;
font-size: 1.3em;
line-height: 1.4em;
}
nav a:link {
text-decoration: none;
color: #744f42;
}
nav a:visited {
color: #744f42;
}
nav a:hover,
nav a:focus {
color: ivory;
}
nav ul,
nav div,
nav iframe {
display: inline-block;
vertical-align: middle;
}
#AboutUs:hover {
color: ivory;
cursor: pointer;
}
#AboutUs {
color: #744f42;
}
/* main content */
article {
margin: 0 auto;
padding: 1.4em;
}
article div {
max-width: 854px;
margin: 0 auto;
padding: 0 3% 1em;
background-color: ivory;
overflow: auto;
}
article div.welcome {
padding-top: 2em;
}
article div figure {
float: left;
padding-right: 2%;
padding-bottom: 2% margin-top: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 0 3% 0;
background: url("http://lorempixel.com/1600/900") no-repeat 0 0 / cover;
height: 100vh;
max-width: 100%;
overflow: auto;
}
h2 {
padding: 0.4em;
text-align: left;
font-family: Bitter, "Times New Roman", Times, serif;
font-size: 2em;
font-weight: 700;
}
h3 {
margin: 1.4em 0 0;
font-size: 1.6em;
font-family: Bitter, "Times New Roman", Times, serif;
font-weight: 700;
clear: both;
}
h3 iframe.iframes {
border: none;
}
section p {
margin: 1em 0;
}
article figure {
max-width: 100%;
margin-left: 2em;
float: right;
}
article figcaption {
text-align: center;
}
.Bookkeeping {
clear: right;
float: left;
width: 60%;
}
.Testimonial1 {
border: 2px solid black;
background-color: white;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
position: relative;
top: 6em;
}
.Testimonial {
border: 2px solid black;
background-color: white;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
position: relative;
top: 6em;
}
.History {
clear: left;
float: right;
width: 47%;
}
.Olddude {
border-radius: 5px;
border: 1em solid #B8944D;
margin: 1em;
position: relative;
top: 10em;
}
.nonprofit1 {
width: 60%;
clear: left;
float: right;
}
.nonprofit {
margin: 1em;
float: left;
position: relative;
}
/* form styles */
form {
padding: 10px;
}
/* fieldsset styles */
fieldset {
margin-bottom: 0.8em;
}
fieldset fieldset {
margin-top: 1em;
padding: 0.8em;
border: 1px solid #777;
}
/* field styles */
.contactinfo input,
#stay-nights,
textarea {
border: 1px solid #ccc;
padding: 0.2em;
font-size: 1em;
}
select {
margin-bottom: 0.6em;
}
.contactinfo input {
position: absolute;
left: 5em;
}
.schedule input {
position: absolute;
left: 10em;
}
#nameinput,
#emailinput {
width: 25em;
}
#phoneinput {
width: 12em;
}
#stay-nights {
width: 3em;
}
#submit {
border: none;
padding: 0.4em 0.6em;
background-color: #e3d5ba;
font-size: 1.25em;
border-radius: 10px;
}
/* main content table */
th,
td {
border: 1px solid black;
padding: 0.5em;
}
th {
background-color: lightblue;
}
.email {
background-color: ivory;
}
.name {
background-color: pink;
}
.degree {
background-color: orange;
}
/* Main Content CSS Table */
.table {
margin: 1em auto;
font-size: 1.3em;
display: table;
}
.row {
display: table-row;
}
.row div {
padding: 0.25em 0.5em;
display: table-cell;
}
.day {
font-weight: bold;
}
/* label styles */
label {
font-size: 1em;
line-height: 1.6em;
}
.contactinfo label {
display: block;
position: relative;
margin: 0.8em 0;
}
.services label,
.method label {
margin-right: 1.6em;
}
.schedule p {
width: 9.2em;
float: left;
}
.date-picker label {
position: absolute;
left: -10000px;
}
/* footer section */
footer {
padding: 0.6em;
background-color: darkblue;
color: ivory;
text-align: center;
}
.copyright {
text-align: center;
font-size: .8em;
color: white;
}
/* print styles */
#media print {
body,
h1,
article,
footer {
color: rgb(0, 0, 0);
background: rgb(255, 255, 255);
}
body {
max-width: 100%;
}
nav {
display: none;
}
}
#page {
margin: 0.75in;
}
<body>
<div class="container">
<p class="skipnavigation">Skip navigation</p>
<header>
<h1>
<img src="images/W.E.B.png" width="501" height="299" alt="Winter, Edwards, & Boyd">
</h1>
</header>
<nav class="sitenavigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
</ul>
<ul>
<li>Managing Partners</li>
<li>Company History</li>
<li>Community Involvement</li>
</ul>
</nav>
<article id="contentstart">
<h2>Managing Partners</h2>
<h3>Our employees may be contacted using the e-mails shown below</h3>
<br>
<table>
<colgroup>
<col class="name">
<col class="email">
<col class="degree">
</colgroup>
<thead>
<tr>
<th>Employee Name</th>
<th>E-mail</th>
<th>Degree</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mike Edwards</td>
<td>medwards#webcpa.com</td>
<td>Certified Public Accountant</td>
</tr>
<tr>
<td>Julia Winters</td>
<td>jwinter#webcpa.com</td>
<td>Certified Financial Planner</td>
<tr>
<td>Regina Boyd</td>
<td>rboyd#webcpa.com</td>
<td> Certified Public Accountant </td>
</tr>
</tbody>
</table>
<br>
<br>
<footer>
<nav class="sitenavigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<p class="copyright">ⒸJustus Self</p>
<p class="copyright"> CIS 130 – SP16</p>
</footer>
</article>
</div>
There's white space between my background image and the top of the page, I am trying to complete the code academy course.
Thisis how it should look and here is my code:
html, body {
margin: 0;
}
h1, h2, a {
font-family: 'Oswald', sans-serif;
}
}
a:link {
background:black;
color:white;
text-transform:uppercase;
}
a:hover {
background:gold;
color:white;
text-transform:uppercase;
}
a:active {
background:black;
color:white;
text-transform:uppercase;
}
a:visited {
background:black;
color:white;
text-transform:uppercase;
}
p {
font-family: Helvetica, Arial, sans-serif;
}
.container {
width: 940px;
margin: 0 auto;
}
/* Main */
.main {
background: url("https://s3.amazonaws.com/codecademy-content/projects/move/bg.jpg") no-repeat center center;
background-size: cover;
height: 600px;
}
.main .container {
position:relative;
top:100px;
}
.main {
height: 600px;
}
.main h1 {
font-size: 150px;
}
.main p {
font-size: 18px;
}
/* Supporting */
.supporting {
text-align: center;
padding: 50px 0 80px;
}
.supporting .col {
float: left;
width: 28%;
padding: 10px;
}
.supporting h1,
.supporting h2 {
color: #ffa800;
font-size: 20px;
margin-bottom: 10px;
}
.clearfix {
clear: both;
}
.supporting p {
color: #efefef;
margin-bottom: 20px;
line-height: 20px;
font-size: 12px;
}
.supporting .btn {
background-color: #eee;
color: #1c1c1c;
font-size: 18px;
padding: 8px 30px;
text-decoration: none;
display: inline-block;
}
/* Feature */
.feature {
height: 600px;
}
.feature h1,
.feature h2 {
color: #fff;
font-size: 40px;
margin: 0;
padding:50px 0 0;
}
/* Footer */
.footer {
height: 600px;
}
.footer h1,
.footer h2 {
color: #fff;
font-size: 40px;
margin: 0 0 20px 0;
padding:50px 0 0;
}
.footer p {
color: #fff;
margin: 0 0 20px 0;
font-size: 18px;
}
#media (min-width:600px) {
.main h1 {
font-size: 200px;
}
.supporting .col {
width: 30%;
}
.supporting h2 {
font-size: 40px;
}
.supporting p {
font-size: 14px;
}
.feature h2 {
font-size: 60px;
}
}
<head>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="main">
<div class="container">
<h1>Move</h1>
<p>Form healthy habits fitness blah</p>
Click Here
</div>
</div>
<div class="supporting">
<div class="container">
<div class="col">
<h2>Move</h2>
<p>Become more active by tracking your runs, rides, and walks.</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="feature">
<div class="container">
</div>
</div>
</body>
It's because you have margin's surrounding the text's.
Simply adding margin:0; to h1, h2, a as shown below will fix your problem.
h1, h2, a {
margin:0;
font-family: 'Oswald', sans-serif;
}
.main .container {
position:relative;
top:100px; // Remove
}
html, body {
margin: 0;
padding: 0; // Add
}
Try to change the following in your css file
body {
margin: -10px;
}
This reduces the whitespace from the top of the body.This might not be the actual fix.
I want to build a web responsive website with tapestry, I add the meta data in the head section of the .tml file and used the css for the responsive design. However it doesn't work at all. I tested with an elastic youtube video, which should match the width of the page. I post here the .tml file and the css.
The .tml file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
xmlns:p="tapestry:parameter">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link href="${context:layout/normalize.css}" rel="stylesheet" type="text/css"/>
<title>${title}</title>
</head>
<body>
<!-- start header -->
<div class="header">
<div class="logo">
<h1>
<t:pagelink page="index">com.example:tutorial1</t:pagelink>
version ${appVersion}
</h1>
</div>
<div class="menu">
<ul>
<li t:type="loop" source="pageNames" value="pageName" class="prop:classForPageName">
<t:pagelink page="prop:pageName">${pageName}</t:pagelink>
</li>
</ul>
</div>
<div class="video-container">
<iframe width="560" height="315" src="http://www.youtube.com/embed/R800WcsFj0U" frameborder="0"></iframe>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div class="page">
<!-- start sidebar -->
<div class="sidebar">
<ul>
<li class="search" style="background: none;">
</li>
<li>
<t:alerts/>
</li>
<li t:type="if" test="sidebar">
<h2>${sidebarTitle}</h2>
<div class="sidebar-content">
<t:delegate to="sidebar"/>
</div>
</li>
</ul>
</div>
<!-- end sidebar -->
<!-- start content -->
<div class="content">
<div class="post">
<div class="title">
<h2>${title}</h2>
</div>
<div class="entry">
<t:body/>
</div>
</div>
</div>
<!-- end content -->
<br style="clear: both;"/>
</div>
<!-- end page -->
<!-- start footer -->
<div class="footer">
<p class="legal">
©2012 com.example. All Rights Reserved.
•
Design by
Free CSS Templates
•
Icons by
FAMFAMFAM.
</p>
</div>
<!-- end footer -->
</body>
</html>
The css file:
body {
margin: 0;
padding: 0;
background: #FFFFFF url(images/img01.jpg) repeat-x;
text-align: justify;
font: 15px Arial, Helvetica, sans-serif;
color: #626262;
}
form {
margin: 0;
padding: 0;
}
input {
padding: 5px;
background: #FEFEFE url(images/img13.gif) repeat-x;
border: 1px solid #626262;
font: normal 1em Arial, Helvetica, sans-serif;
}
h1, h1 a, h2, h2 a, h3, h3 a {
margin: 0;
text-decoration: none;
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #444444;
}
h1 {
letter-spacing: -1px;
font-size: 2.2em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h2 {
letter-spacing: -1px;
font-size: 2em;
}
h3 {
font-size: 1em;
}
p, ol, ul {
margin-bottom: 2em;
line-height: 200%;
}
blockquote {
margin: 0 0 0 1.5em;
padding-left: 1em;
border-left: 5px solid #DDDDDD;
}
a {
color: #1692B8;
}
a:hover {
text-decoration: none;
}
/* Header */
div.header {
height: 42px;
}
div.logo h1, div.logo p {
float: left;
text-transform: lowercase;
}
div.logo h1 {
padding: 0px 0 0 40px;
}
div.logo p {
margin: 0;
padding: 14px 0 0 4px;
line-height: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
div.logo a {
text-decoration: none;
color: #D0C7A6;
}
div.menu {
float: right;
}
div.menu ul {
margin: 0;
padding: 0;
list-style: none;
}
div.menu li {
display: block;
float: left;
height: 42px;
}
div.menu a {
display: block;
padding: 8px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-transform: lowercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
color: #CEC5A4;
}
div.menu .last {
margin-right: 20px;
}
div.menu a:hover {
color: #FFFFFF;
}
div.menu .current_page_item A {
text-decoration: underline;
}
div.menu .current_page_item a {
}
/* Page */
div.page {
padding: 40px 40px 0 40px;
}
/* Content */
div.content {
margin-right: 340px;
}
.post {
margin-bottom: 10px;
}
.post .title {
border-bottom: 1px #999999 dashed;
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
}
.post .title h2 {
padding: 30px 30px 0 0px;
text-transform: lowercase;
font-weight: normal;
font-size: 2.2em;
}
.post .title p {
margin: 0;
padding: 0 0 10px 0px;
line-height: normal;
color: #BABABA;
}
.post .title p a {
color: #BABABA;
}
.post .entry {
padding: 20px 0px 20px 0px;
}
.post .links {
margin: 0;
padding: 0 30px 30px 0px;
}
.post .links a {
display: block;
float: left;
margin-right: 10px;
margin-bottom: 5px;
text-align: center;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
}
.post .links a:hover {
}
.post .links .more {
width: 128px;
height: 30px;
background: url(images/img03.jpg) no-repeat left center;
}
.post .links .comments {
width: 152px;
height: 30px;
background: url(images/img04.jpg) no-repeat left center;
}
/* Sidebar */
div.sidebar {
float: right;
width: 300px;
margin-top: 30px;
}
div.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
div.sidebar li {
margin-bottom: 10px;
background: url(images/img10.gif) no-repeat left bottom;
}
div.sidebar li ul {
padding: 0 30px 40px 30px;
}
div.sidebar li li {
margin: 0;
padding-left: 20px;
}
div.sidebar h2 {
padding: 30px 30px 5px 10px;
background: url(images/img09.gif) no-repeat;
text-transform: lowercase;
font-weight: normal;
font-size: 1.6em;
color: #302D26;
}
div.sidebar DIV.sidebar-content {
width: 265px;
margin-left: 10px;
padding-bottom: 1px;
}
div.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
div.video-container iframe,
div.video-container object,
div.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Search */
li.search {
padding: 20px 30px 40px 30px;
}
li.search input {
padding: 0;
width: 70px;
height: 29px;
background: #DFDFDF url(images/img14.gif) repeat-x;
font-weight: bold;
}
li.search #s {
padding: 5px;
width: 150px;
height: auto;
background: #FEFEFE url(images/img13.gif) repeat-x;
border: 1px solid #626262;
font: normal 1em Arial, Helvetica, sans-serif;
}
li.search br {
display: none;
}
/* Categories */
div.sidebar div.categories li {
background: url(images/img12.gif) no-repeat left center;
}
/* Calendar */
div.calendar_wrap {
padding: 0 30px 40px 30px;
}
div.calendar table {
width: 100%;
text-align: center;
}
div.calendar thead {
background: #F1F1F1;
}
div.calendar tbody td {
border: 1px solid #F1F1F1;
}
div.calendar #prev {
text-align: left;
}
div.calendar #next {
text-align: right;
}
div.calendar tfoot a {
text-decoration: none;
font-weight: bold;
}
div.calendar #today {
background: #FFF3A7;
border: 1px solid #EB1400;
font-weight: bold;
color: #EB1400
}
/* Footer */
div.footer {
padding: 70px 0 50px 0;
background: #757575 url(images/img08.gif) repeat-x;
}
div.footer p {
margin-bottom: 1em;
text-align: center;
line-height: normal;
font-size: .9em;
color: #BABABA;
}
div.footer a {
padding: 0 20px;
text-decoration: none;
color: #DDDDDD;
}
div.footer a:hover {
color: #FFFFFF;
}
div.footer .rss {
background: url(images/img18.gif) no-repeat left center;
}
div.footer .xhtml {
background: url(images/img19.gif) no-repeat left center;
}
div.footer .css {
background/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
div.footer .legal a {
padding: 0;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
Thank you very much.
You are missing a closing brace. It goes between the 2nd and 3rd line below.
div.footer .css {
background/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
As Lee Meador already pointed out you are missing the closing braces for your footer declaration, also the background markup is incomplete. it should be something like this (deduced from your other markup):
div.footer .css {
background: url(images/img20.gif) no-repeat left center;
}
#media .... etc.
Instead of rolling your own, I would suggest looking at an existing library that already is responsive, and then customizing it, so save yourself some time instead of re-inventing the wheel.
Bootstrap is one such excellent library. You can also integrate it easily into Tapestry using the tapestry-bootstrap integration project. I have used this combo on multiple responsive applications, some exclusively for mobiles, and have been quite successful.