I am trying to add a responsive html email to send to the user a link to reset their password. The left padding is not working and I would like it to be responsive like the right side, to have the container always centered.
What line of code is missing inside my inline css for my left padding to perform?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html" />
<title>StackOverflow</title>
<style>
/*
// MARK: Styling
*/
.button {
border-radius: 4px;
font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
color: white;
padding: 12px 12px;
text-decoration: none;
display: inline-block;
}
.buttonPassword {
margin: auto;
}
#buttonReset {
width: 150px;
margin: auto;
font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
text-align: center;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
}
body {
position: relative;
margin: 16;
font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
}
.container {
display: block;
margin: 16 auto !important;
max-width: 580px;
padding: 10px;
width: 580px;
}
.content {
box-sizing: border-box;
display: block;
margin: 16 auto;
max-width: 580px;
padding: 10px;
}
footer {
width: 100%;
font-family: -apple-system-caption2, BlinkMacSystemFont, sans-serif;
}
header {
margin: auto;
width: 100%;
position: relative;
z-index: 100;
top: 0;
}
html, body {
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 16;
padding: 16;
}
.logo h1 {
font-family: -apple-system-large-title, BlinkMacSystemFont, sans-serif;
display: inline;
}
.logo img {
padding: 16px;
width: 64px;
height: 64px;
vertical-align: middle;
}
p {
font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
}
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0;
}
.right h2 {
font-family: -apple-system-caption2, BlinkMacSystemFont, sans-serif;
text-align: center;
padding: 1em;
}
/*
// MARK: Screen Sizing
*/
#media only screen and (max-width: 620px) {
.logo h1 {
display: inline;
}
.logo img {
padding: 8px;
width: 48px;
height: 48px;
vertical-align: middle;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
}
/*
// MARK: Colors Declaration
// Light Mode
*/
.button {
background-color: #FF9000;
}
#buttonReset {
background-color: #FF9000;
}
.content {
color: #000;
}
header {
background: linear-gradient(#FF9000, #FFA101);
}
.logo h1 {
color: #FFF;
}
.preheader {
color: transparent;
}
.right h2 {
color: #FFF;
}
/*
// Dark Mode
*/
#media (prefers-color-scheme: dark) {
.button {
background-color: #FF9A0A;
}
.content {
color: #FFF;
}
header {
background: linear-gradient(#FF9A0A, #FF9000);
}
.logo h1 {
color: #FFF;
}
.preheader {
color: transparent;
}
.right h2 {
color: #000;
}
}
</style>
</head>
<body>
<span class="preheader">
Email with instructions to reset your password.
</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td> </td>
<td class="container">
<header>
<div class="logo">
<h1><img src="/images/logo.png" alt="logo">StackOverflow</h1>
</div>
</header>
<div id="content">
<br>
<p>
Hello,
<br><br>
A request has been received to change the password for your StackOverlfow account.
<br><br><br>
<p>
<center>
<p>
Click the link below to reset your password.
<p>
</p>
</center>
</p>
</p>
<br>
<div class="buttonPassword">
<center>
<a class="button" href="#(link)">
<strong>Reset password</strong>
</a>
</center>
</div>
<br>
<br>
<p>
The link has a validity of one hour. Ask for a new one after this delay.
<br>
If you did not initiate this request, please contact us immediately at contact#stackoverflow.eu and ignore this
email.
</p>
<br>
<p>
Thank you,
<br>
The StackOverlfow Team
</p>
<br>
</div>
<footer>
<div class="right">
<center>
<p>© 2021 StackOverlfow. All right reserved.</p>
</center>
</div>
</footer>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
Solution 1:
You can make your container centered for every screen and responsive by just changing your container class margin with (0 auto) which centers the div automatically.
.container {
display: block;
margin: 0 auto !important;
max-width: 580px;
padding: 10px;
width: 580px;
}
Watch the final result on my code_pen
Solution 2:
simply add align=center in your table tag.
Add align="center" on table
<table role="presentation" border="0" align="center" cellpadding="0" cellspacing="0" class="body">
https://jsfiddle.net/lalji1051/fgw258dr/
Related
I created a basic, simple HTML website for our clinics, however, the table content keep falling off the grid/margin (or whatever we call them). The view for ipad, web is alright but on phone is so weird.
Please help me.
I tried many way to have this sorted but it seemed so weird. I try to redo it but same thing keep happen.
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Style image */
.img-LHG {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
.img-LCG {
padding-top: 0px;
margin-right: auto;
margin-left: auto;
width: 20%;
}
.img-me{
display: block;
margin-left: auto;
margin-right: auto;
width: 70%;
}
/* Style the body */
body {
font-family: Arial;
margin: 0;
float: inherit;
}
h1{
font-family: Arial, "Time new roman";
font-size: 22px;
text-align: center;
line-height: 40px;
}
h2 {
font-family: Arial, "Time new roman";
font-size: 18px;
text-align: center;
line-height: 20px;
}
h3 {
font-family: Arial, "Time new roman";
font-size: 12px;
text-align: center;
line-height: 20px;
}
p {
font-family: Arial;
font-size: 16px;
text-align: center;
line-height: 30px;
text-indent: 30px;
}
table{
width: 100%;
background-color: white;
}
td{
padding: 1px;
}
/* Header/logo Title */
.header {
text-align: center;
padding: -10px;
text-align: center;
background: white;
text-decoration: none;
}
/* Links Title */
.links {
text-align: center;
font-size: 22px;
font-stretch: expanded;
}
/* Style the top navigation bar */
.wrapper{
margin: 0 auto;
width: 100%;
}
nav {
width: 100%;
height:100px;
background-color: #white;
text-align: center;
}
ul {
}
ul li {
list-style: none;
display: inline-block;
line-height: 100px;
background-color: grey:
text-align: center;
padding: -10px;
text-align: center;
}
ul li a {
text-decoration: none;
font-size: 18px;
font-family: Arial;
color: #1e1e1e;
padding: 0 30px;
text-align: center;
padding: -10px;
text-align: center;
}
ul li a:hover {
color: blue;
}
/* Style the navigation bar links */
.navbar a {
font-family: Arial;
font-size: 15px;
text-align: center;
line-height: 30px;
text-align: center;
text-indent: 30px;
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
.side {
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
background-color: white;
padding: 20px;
}
.fakeimg {
background-color: lightgray;
width: 100%;
padding: 20px;
float: left;
}
/* Footer */
.footer {
padding: 15px;
text-align: center;
background: #ddd;
width: 100%;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
.wrapper{
width: 600px;
}
.header{
width: 500px;
}
.wrapper p {
width: 500px;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
#media screen and (max-width: 400px) {
.row {
flex-direction: column;
}
.wrapper{
width: 300px;
}
.header{
width: 300px;
}
.wrapper p {
width: 300px;
}
}
/* Responsive layout - when the screen is less than 200px wide, make the navigation links stack on top of each other instead of next to each other */
#media screen and (max-width: 200px) {
.row {
flex-direction: column;
}
.wrapper{
width: 100px;
}
.header{
width: 100px;
}
.wrapper p {
width: 100px;
}
.table{
size: 20px;
width: calc(100vh - 100%);
}
.table p{
font-size: 10px;
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>London abc</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div> <a href="https://www.londonclinicgroup.com/index.html">
<img class="img-LHG" src="img/LHG.jpg" alt="LHG"> </div>
<h1>Welcome to London abc</h1>
<p>abc</p>
</div>
<nav>
<div class="wrapper">
<ul>
<li>About Us</li>
<li>Career</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
<div class="row">
<div class="side">
<div class="wrapper">
<h2>About Us</h2>
<p>This is a paragraph.</p>
<br>
<h2>Our Clinics:</h2>
<table class="table">
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td><p>HHC-we are a table content.</p></td>
<th><img class="img-LCG" src="img/HHC.jpg" alt="LHG"></th>
</tr>
<tr>
<td><p>HHC-we are a table content.</p></td>
<th><img class="img-LCG" src="img/LHW.jpg" alt="LHG"></th>
</tr>
<tr>
<td><p>HHC-we are a table content.</p></td>
<th><img class="img-LCG" src="img/LHH.jpg" alt="LHG"></th>
</tr>
<tr>
<td><p>HHC-we are a table content.</p></td>
<th><img class="img-LCG" src="img/OPL.jpg" alt="LHG"></th>
</tr>
</table>
<br>
<h2>Our Goal</h2>
<p> Our clinicians are at the core of our business and we work tirelessly to forge a long term clinical environment.</p>
<br>
<div class="footer">
<h3>Phone 020 xxx | abc</h3>
<h3>©2020 Londonabc</h3>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>London abc</title>
</head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#500&display=swap" rel="stylesheet">
<style>
* {
text-align: center;
text-decoration: none;
list-style-type: none;
margin: 0;
font-family: "Roboto", serif;
box-sizing: border-box;
padding: 0;
}
.header {
display: flex;
align-items: center;
justify-content: center;
align-content: center;
flex-direction: column;
background-color: white;
}
.header img {
width: 60px;
height: auto;
max-width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
}
.header>*,
.wrapper>* {
padding: 8px;
color: black;
}
.nav-links-wrapper {
width: 100%;
height: auto;
padding: 55px;
background-color: #f1f1f1;
}
ul {
display: flex;
align-items: center;
align-content: center;
justify-content: space-evenly;
}
.content-wrapper>* {
padding: 8px;
}
.table {
width: 100%;
}
.table-wrapper {
margin: 15px;
background: #f1f1f1;
}
.img-LCG {
width: 40px;
height: auto;
max-width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
}
.footer {
background-color: #ddd;
}
.footer>* {
padding: 8px;
}
</style>
<body>
<div class="header">
<div>
<a href="https://www.londonclinicgroup.com/index.html">
<img class="img-LHG" src="https://dummyimage.com/600x400/000/fff" alt="LHG"></a>
</div>
<h1>Welcome to London abc</h1>
<p>ABC</p>
</div>
<nav class="nav-links-wrapper">
<div class="wrapper">
<ul>
<li>About Us</li>
<li>Career</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
<div class="row">
<div class="side">
<div class="wrapper">
<div class="content-wrapper">
<h2>About Us</h2>
<p>This is a paragraph.</p>
</div>
<div class="table-wrapper">
<h2>Our Clinics:</h2>
<table class="table">
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td>
<p>HHC-we are a table content.</p>
</td>
<th><img class="img-LCG" src="https://dummyimage.com/600x400/000/fff" alt="LHG"></th>
</tr>
<tr>
<td>
<p>HHC-we are a table content.</p>
</td>
<th><img class="img-LCG" src="https://dummyimage.com/600x400/000/fff" alt="LHG"></th>
</tr>
<tr>
<td>
<p>HHC-we are a table content.</p>
</td>
<th><img class="img-LCG" src="https://dummyimage.com/600x400/000/fff" alt="LHG"></th>
</tr>
<tr>
<td>
<p>HHC-we are a table content.</p>
</td>
<th><img class="img-LCG" src="https://dummyimage.com/600x400/000/fff" alt="LHG"></th>
</tr>
</table>
</div>
<h2>Our Goal</h2>
<p> Our clinicians are at the core of our business and we work tirelessly to forge a long term clinical environment.
</p>
<br>
<div class="footer">
<h3>Phone 020 xxx | abc</h3>
<h3>©2020 Londonabc</h3>
</div>
</body>
</html>
I'm making a website for school, but i have a problem with my css code. I want to place the section1 and the section2 underneath the header so that it looks like that :
WANTED
The problem is that it looks like that (the problem is this enormous gap on the left) :
REALITY
I know that the problem comes from the float on the header and nav bar but i don't know how to keep the header look and having the two boxes ("section1" and "section2", grouped as "content").
The CSS code :
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
color: black;
background-color: white;
font-size: 16px;
text-align:justify;
text-justify:inter-word;
}
.header {
width: 100%;
height: 80px;
display: block;
background-color: #101010;
}
.header_nav {
width: 65%;
height: 100%;
display: block;
margin: 0 auto;
}
.logo {
height: 100%;
display: table;
float: left;
}
.logo h1 {
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: "Trebuchet MS";
font-size: 32px;
font-weight: 600;
}
.nav {
float: right;
height: 50%;
line-height: 70px;
}
.nav ul li {
display: inline-block;
vertical-align: middle;
line-height: normal
}
.nav-option {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family: "Trebuchet MS";
font-size: 20px;
font-weight: 50;
}
.nav-option:hover {
text-decoration: underline;
}
.content {
overflow: hidden;
}
.section1 {
background-color: red;
width: 40%;
height: 300px;
margin: 1%;
float: left;
border: inset #101010 6px ;
}
.section2 {
background-color: blue;
width: 40%;
height: 300px;
float: right;
margin: 1%;
border-left: solid #101010 10px;
}
.section2:hover {
transform: scale(1.05);
}
The HTML code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Histoire de l'Informatique</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<div class="header_nav">
<div class="logo">
<img src="logo.png">
<h1> HISTOIRE DE L'INFORMATIQUE </h1>
</div>
<div class="nav">
<nav>
<ul>
<li>Données</li>
<li>Algorithmes</li>
<li>Langages</li>
<li>Machines</li>
</ul>
</nav>
</div>
</div>
</<div>
<div class= "content">
<section class="section1">
<h1>Données</h1>
<article>
</article>
</section>
<section class="section2">
<h1>Algorithmes</h1>
<article>
</article>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
Thanks for your help !
Your example seems to work for me provided .container has a width: 100% on it.
But for what you want exactly, I would use the following:
.container {
display: flex;
align-items: center;
justify-content: space-evenly; // google all the different options for this
}
// Get rid of the `float` properties on the sections, you won't need them
Below, is your original code in a snippet, and with that width property it's working for me.
But I highly recommend switching to flex box over floats, as it will give you way more control and better results.
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
color: black;
background-color: white;
font-size: 16px;
text-align:justify;
text-justify:inter-word;
}
.header {
width: 100%;
height: 80px;
display: block;
background-color: #101010;
}
.header_nav {
width: 65%;
height: 100%;
display: block;
margin: 0 auto;
}
.logo {
height: 100%;
display: table;
float: left;
}
.logo h1 {
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: "Trebuchet MS";
font-size: 32px;
font-weight: 600;
}
.nav {
float: right;
height: 50%;
line-height: 70px;
}
.nav ul li {
display: inline-block;
vertical-align: middle;
line-height: normal
}
.nav-option {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family: "Trebuchet MS";
font-size: 20px;
font-weight: 50;
}
.nav-option:hover {
text-decoration: underline;
}
.content {
width: 100%;
overflow: hidden;
}
.section1 {
background-color: red;
width: 40%;
height: 300px;
margin: 1%;
float: left;
border: inset #101010 6px ;
}
.section2 {
background-color: blue;
width: 40%;
height: 300px;
float: right;
margin: 1%;
border-left: solid #101010 10px;
}
.section2:hover {
transform: scale(1.05);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Histoire de l'Informatique</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<div class="header_nav">
<div class="logo">
<img src="logo.png">
<h1> HISTOIRE DE L'INFORMATIQUE </h1>
</div>
<div class="nav">
<nav>
<ul>
<li>Données</li>
<li>Algorithmes</li>
<li>Langages</li>
<li>Machines</li>
</ul>
</nav>
</div>
</div>
</div>
<div class= "content">
<section class="section1">
<h1>Données</h1>
<article>
</article>
</section>
<section class="section2">
<h1>Algorithmes</h1>
<article>
</article>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
My website wrapper will not fill in the entire height of the page. I have tried adjusting the min-height to 100%, tried just height 100% as well. I have tried auto height. I am sure it is something simple I am missing but I can't seem to find the solution to this problem. I have also tried just adding the CSS to the HTML page using the tag but that does not work either.
body {
font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
min-height: 100%;
margin: 0;
}
html {
min-height: 100%;
margin: 0;
}
#wrapper {
background-color: #b3c7e6;
width: auto;
min-height: 100%;
overflow: hidden;
}
nav {
float: left;
width: 150px;
padding-top: 50px;
}
#rightcol {
margin-left: 155px;
background-color: #ffffff;
color: #000000;
}
header {
background-color: #869dc7;
color: #00005D;
font-size: 100%;
padding-left: 30px;
padding-bottom: 3px;
padding-top: 3px;
}
h2 {
color: #869dc7;
font-family: arial, sans-serif;
}
main {
display: flex;
padding: 20px 20px 20px;
}
#floatright {
margin: 10px;
float: right;
}
nav a {
margin: 30px;
}
<div id="wrapper">
<nav>
Home <br />
Application<br />
Vehicle<br />
Visa<br />
Loan<br />
Summary
</nav>
<div id="rightcol">
<header>
<img src="Images/GCSCU_Color.png" alt="Logo" style="float:left;width:120px;height:70px; padding-right:10px" />
<h1>CRIF Access</h1>
</header>
<main>
<h2>This is just a test sentence for the main section of the page.</h2>
</main>
</div>
</div>
try it:
html,
body {
height: 100%;
}
body {
font-family: Verdana, Arial, sans-serif;
background-color: #00005d;
min-height: 100%;
margin: 0;
}
html {
min-height: 100%;
margin: 0;
}
#wrapper {
background-color: #b3c7e6;
width: auto;
height: 100%;
overflow: hidden;
}
nav {
float: left;
width: 150px;
padding-top: 50px;
}
#rightcol {
margin-left: 155px;
height: 100%;
background-color: #ffffff;
color: #000000;
}
header {
background-color: #869dc7;
color: #00005d;
font-size: 100%;
padding-left: 30px;
padding-bottom: 3px;
padding-top: 3px;
}
h2 {
color: #869dc7;
font-family: arial, sans-serif;
}
main {
display: flex;
padding: 20px 20px 20px;
}
#floatright {
margin: 10px;
float: right;
}
nav a {
margin: 30px;
}
<div id="wrapper">
<nav>
Home <br />
Application<br />
Vehicle<br />
Visa<br />
Loan<br />
Summary
</nav>
<div id="rightcol">
<header>
<img
src="Images/GCSCU_Color.png"
alt="Logo"
style="float:left;width:120px;height:70px; padding-right:10px"
/>
<h1>CRIF Access</h1>
</header>
<main>
<h2>
This is just a test sentence for the main section of the
page.
</h2>
</main>
</div>
</div>
Please give height: 100%; and margin: 0; for html and body.
Your css will have below changes:
body {
font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
height: 100%;
margin: 0;
}
html {
height: 100%;
margin: 0;
}
#wrapper {
background-color: #b3c7e6;
width: auto;
min-height: 100%;
overflow: hidden;
}
See working jsfiddle - here
Instead of percentage use Viewport units, in this case vh for height:
html, body {
min-height:100vh;
margin:0;
}
body {
font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
}
#wrapper {
background-color: #b3c7e6;
width: auto;
min-height: 100vh;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="CSS/StyleSheet1.css" rel="stylesheet" />
<title>CRIF Access Homepage</title>
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<nav>
Home <br />
Application<br />
Vehicle<br />
Visa<br />
Loan<br />
Summary
</nav>
<div id="rightcol">
<header>
<img src="Images/GCSCU_Color.png" alt="Logo" style="float:left;width:120px;height:70px; padding-right:10px"/>
<h1>CRIF Access</h1>
</header>
<main>
<h2>This is just a test sentence for the main section of the page.</h2>
</main>
</div>
</div>
</body>
</html>
I'm wondering why do you want (or need) the wrapper, you can do the job only with body.
I'm making a portfolio for some projects I've worked on whilst learning to code. I've added a banner to the top of each project's webpage, but I'm having issues with a site which is unresponsive (Jubilee Austen page).
Using the Chrome Inspector tool, it says the banner is 55px tall, but it appears smaller than it does on another project page (Rogue Pickings page), where the height of the banner is also 55px. How could this be?
Jubilee Austen page
Rogue Pickings page
Does anyone know how I can fix this so that both banners appear the same height?
Thanks so much in advance!
/* ===== JUBILLEE AUSTEN ===== */
font-family: atelas;
src :url('../fonts/atelas/atelas.ttf') format('opentype');
}
/* -------- PORTFOLIO BANNER & MANAGEMENT -------- */
.back {
width: 100%;
background-color: #1D2120;
padding: 10px 0;
position: fixed;
top: 0px;
}
.div-link {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
background-image: url('empty.gif');
}
.back-wrap {
width: 90%;
margin: auto;
}
.chevron {
margin: 0;
}
.chevron img {
width: 35px;
float: left;
margin-right: 1.5%;
}
.back-text {
margin: 0 0 0 3%;
font-family: atelas;
font-size: 6em;
color: #e2e2e2;
text-decoration: none;
line-height: 0.8;
display: none;
}
#example {
clear: both;
padding-top: 50px;
}
/* ======== ORIGINAL CSS ======== */
/* -------- START OF ORIGINAL CSS -------- */
body {
font-family: 'Source Sans Pro', sans-serif;
}
#about, #work, #contact {
height: 600px;
}
/***** GRID *****/
.full-width {
width: 1200px;
margin: 0 auto;
}
.half-width {
width: 600px;
float: left;
}
.third-width {
width: 400px;
float: left;
}
/***** HEADER *****/
header {
height: 800px;
background: url('../img/hero.png');
background-size: cover;
}
header h1 {
padding: 50px 0;
font-family: 'Lora', serif;
font-size: 30px;
color: #BBC085;
padding-left: 80px;
}
#nav {
float: right;
padding: 75px 0;
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-transform: uppercase;
text-decoration: none;
font-size: 18px;
color: #828282;
padding-left: 80px;
}
header h2 {
width: 1000px;
clear: both;
font-family: 'Lora', serif;
font-size: 72px;
line-height: 80px;
color: #9a9a9a;
padding: 20px 0 0 80px;
}
header h2 span {
color: #262a2b
}
/***** ABOUT *****/
#about .full-width {
padding: 80px 0;
}
#about h2 {
font-family:'Lora', serif;
font-size: 36px;
}
#about p {
font-size: 21px;
color: #7F7F7F;
line-height: 42px;
padding-right: 50px;
}
/***** WORK *****/
#work {
background: #F9CEB7;
text-align: center;
}
#work .full-width {
padding: 115px 0;
}
#work img {
padding-bottom: 30px;
}
#work h3 {
font-size: 24px;
width: 180px;
margin: 0 auto;
}
#work p {
font-family: 'Lora', serif;
font-size: 18px;
line-height: 30px;
color: #262a2b;
padding: 0 35px;
}
/**** CONTACT *****/
#contact {
background: #EBEBEB;
}
#contact .full-width {
padding: 110px 0;
}
#contact img#contact-img {
border: 16px solid #ffffff;
}
#contact h2, #contact #email-header, #contact #socialmedia-header, #contact ul {
padding-left: 115px;
}
#contact #envelope {
padding: 0 10px 0 115px;
}
#contact h2 {
font-family: 'Lora', serif;
font-size: 36px;
}
#contact #email-header{
font-size: 32px;
font-weight: 400;
margin: -30px 0 5px 0;
}
#contact #socialmedia-header {
font-weight: bold;
font-size: 29px;
margin: 40px 0 0px 0;
}
#contact a {
text-decoration: none;
color: #C49075;
font-weight: bold;
font-size: 28px;
}
#contact ul {
list-style: none;
}
#contact ul li {
display: inline-block;
}
#contact ul img {
font-size: 32px;
padding-right: 48px;
}
/* ======== END ORIGINAL CSS ======== */
/* TABLET */
#media all and (min-width: 768px) {
}
#media screen and (min-width: 940px) {
/* -------- PORTFOLIO BANNER CSS -------- */
.chevron img {
width: 30px;
}
.back-text {
font-size: 3em;
}
}
<!doctype html>
<!-- JUBILEE AUSTEN -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Jubilee Austen | Developer</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- FONTS -->
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- PORTFOLIO BANNER -->
<section class="back">
<a class="div-link" href="../index.html"><span></span></a>
<div class="back-wrap">
<figure class="chevron">
<img src="../img/chevron-b.png" />
<img src="../img/chevron-g.png" />
<img src="../img/chevron-o.png" />
<img src="../img/chevron-r.png" />
</figure>
<p class="back-text">back</p>
</div>
</section>
<!-- START OF ORIGINAL BODY -->
<div id="example">
<!-- NAV/TITLE PANEL -->
<header>
<div class="full width">
<div class="half-width">
<h1>Jubilee Austen</h1>
</div>
<!-- NAV BAR -->
<div class="half-width" id="nav">
<nav>
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
<!-- <span>Hi,</span> used to change colour of just "Hi," text -->
<h2><span>Hi,</span> I'm a developer that loves clean & elegant code.</h2>
</div>
</header>
<main>
<!-- ABOUT PANEL -->
<section id="about">
<div class="full-width">
<h2>A little bit about me.</h2>
<div class="half-width">
<p>I've made my home base in Providence, Rhode Island with my small growing family. My journey into tech started with a degree in journalism. As I started sharing my writing online, I was fascinated with how easily I could get my voice out there. I was hooked and wanted to learn how to build my own site to fit my own specific needs.</p>
</div>
<div class="half-width">
<p>That curiosity then opened a door that could never be shut. When I learned how to build my first website, I realized I found something that gave me the freedom & versatility I was looking for in my work. Now I've made a full switch to front-end development, where I can use my organization skills and eye for detail to write clean, elegant code.</p>
</div>
</div>
</section>
<!-- PROCESS PANEL -->
<section id="work">
<div class="full-width">
<div class="third-width">
<img src="img/icon-html.png" alt="HTML icon"/>
<h3>Hand-Coded HTML</h3>
<p>My focus is writing clean, well-formatted, semantic HTML5 by hand to make sure that the content is easy to read, easy to collaborate, trouble-shoot and accessible.</p>
</div>
<div class="third-width">
<img src="img/icon-css.png" alt="CSS icon"/>
<h3>Well-Organized CSS</h3>
<p>I pride myself on writing CSS that is easy to read and build on. I focus on keeping my CSS lean and fast to load, and I make it a habit to stay up to date on current best practices.</p>
</div>
<div class="third-width">
<img src="img/icon-pencil.png" alt="Pencil icon"/>
<h3>Easy Converting PSD to HTML</h3>
<p>You can trust me to take a designer's PSD and quickly & accurately convert it into a webpage that is pixel-perfect match.</p>
</div>
</div>
</section>
<!-- CONTACT PANEL -->
<footer id="contact">
<div class="full-width">
<div class="half-width">
<img id="contact-img" src="img/contact.png" alt="Person typing at laptop"/>
</div>
<div class="half-width" id="contact-info">
<h2>Like what you see?</h2>
<h3 id="email-header">Let's meet for a cup of coffee.</h3>
<img id="envelope" src="img/icon-envelope.png" alt="mail icon"/>hi#jubileeausten.com
<h4 id="socialmedia-header">Or, find me on the interwebs</h4>
<!-- ICON LINKS -->
<ul>
<li><img src="img/icon-twitter.png" alt="Twitter icon"/></li>
<li><img src="img/icon-tumblr.png" alt="Tumblr icon"/></li>
<li><img src="img/icon-instagram.png" alt="Instagram icon"/></li>
<li><img src="img/icon-linkedin.png" alt="Linkedin icon"/></li>
<li><img src="img/icon-github.png" alt="GitHub icon"/></li>
</ul>
</div>
</div>
</footer>
</main>
<!-- END OF ORIGINAL HTML -->
</div>
</body>
</html>
/* ===== ROGUE PICKINGS ===== */
/* =========================================================================
Author's custom styles
========================================================================== */
#font-face {
font-family: atelas;
src :url('../fonts/atelas/atelas.ttf') format('opentype');
}
/* -------- PORTFOLIO BANNER & MANAGEMENT -------- */
.back {
width: 100%;
background-color: #1D2120;
padding: 10px 0;
position: fixed;
top: 0px;
}
.div-link {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
background-image: url('empty.gif');
}
.back-wrap {
width: 90%;
margin: auto;
}
.chevron {
margin: 0;
}
.chevron img {
width: 35px;
float: left;
margin-right: 1.5%;
}
.back-text {
margin: 0 0 0 3%;
font-family: atelas;
font-size: 6em;
color: #e2e2e2;
text-decoration: none;
line-height: 0.8;
display: none;
}
#example {
max-width: 1200px;
margin: auto;
clear: both;
padding-top: 55px;
}
/* ======== ORIGINAL ROGUE PICKINGS CSS ======== */
html {
font-size:16px;
}
body {
/*max-width: 1200px; --- REMOVED FOR PORTFOLIO BANNER --- */
margin: 0 auto;
font-size: 1em;
font-family: Montserrat, Helvetica, Arial, sans-serif;
}
header {
font-size: 1em;
}
.top-section {
font-size: 1em;
}
.bottom-section {
font-size: 1em;
}
footer {
font-size: 1em;
}
header, .top-section, .bottom-section, footer {
max-width: 90%;
}
h1, h3, h4 {
text-transform: uppercase;
}
h1 {
color: black;
font-size: 1.875em;
text-align: center;
width: auto;
padding: 2.45% 0;
}
h3 {
color: black;
font-size: 1.125em;
text-align: center;
padding: 15px;
}
h4 {
color: black;
font-size: 0.75em;
}
.main-title h3 {
text-align: left;
padding: 5px 0px;
text-transform: uppercase;
color:#77a466;
}
/*The widths are in a percentage!*/
header {
width: 100%;
height: 10%;
margin: 0 auto;
}
header .heading {
border-bottom:3px solid #77a466;
height: auto;
}
header span {
color: #77a466;
}
header nav {
padding: 8% 0px;
margin:auto;
}
header nav a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 0.875em;
padding: 0 10px 20px 10px;
color:#77a466;
display: block;
text-align: center;
}
#last-nav {
padding: 0 10px;
}
/*The widths are in a percentage!*/
.top-section, .bottom-section {
width: 100%;
margin: 0 auto;
clear: both;
}
.main-image {
width: 100%;
height: auto;
float: left;
clear: both;
}
.main-image img {
width: 100%;
border-bottom:3px solid #77a466;
border-top: 3px solid #77a466;
}
.main-title {
width: 100%;
height: auto;
float: left;
}
.main-title p {
padding: 0px;
line-height: 156.25%;
font-size: 1em;
}
.section-one, .section-two, .section-three {
width: 100%;
height: auto;
clear: both;
border-top: 1px solid #eee;
}
.section-one h4, .section-two h4, .section-three h4 {
padding: 10px 30px 10px 0px;
}
.menu {
list-style: none;
padding: 0px 30px 0px 0px;
}
.menu li {
padding: 10px 0;
color:#77a466;
}
.reviews {
color: #333;
line-height: 135%;
font-size: 1em;
}
.address {
font-size: 1em;
line-height: 150%;
}
.reviews, .address {
padding: 0px 30px 0px 0px;
}
/*The widths are in a percentage!*/
footer {
width: 100%;
height: 50px;
border-top:3px solid #eee;
margin: 0 auto;
clear: both;
text-align: center;
}
footer span {
font-family: "Wisdom Script", script;
text-transform: lowercase;
color: #77a466;
font-size: 0.875;
}
#media all and (min-width: 600px) and (max-width: 939px) {
header nav {
padding: 3.75% 0px;
}
}
#media screen and (min-width: 940px) {
/* -------- PORTFOLIO BANNER CSS -------- */
.chevron img {
width: 30px;
}
.back-text {
font-size: 3em;
}
#example {
width: 96%;
padding: 40px 2% 0 2%;
}
/* -------- ORIGINAL CSS -------- */
body {
/*width: 96%; --- REMOVED FOR PORTFOLIO BANNER --- */
/*padding: 0 2%; --- REMOVED FOR PORTFOLIO BANNER --- */
}
header, .top-section, .bottom-section, footer {
max-width: 100%;
}
header h1 {
text-align: left;
float: left;
}
header {
height: 100px;
}
header .heading {
border-bottom: none;
}
header nav {
float: right;
width: auto;
padding: 45px 0px;
}
header nav a {
display: inline;
}
.section-one, .section-two {
border-right: 1px solid #eee
}
.section-one h4 {
padding: 10px 0px;
}
.section-two h4, .section-three h4 {
padding: 10px 30px;
}
.menu {
padding: 0px;
}
.reviews, .address {
padding: 0px 30px;
}
.section-one, .section-two, .section-three {
width: 33%;
height: auto;
clear: none;
float: left;
border-top: 1px solid #eee;
}
}
/* -------- END ORIGINAL CSS -------- */
<!doctype html>
<!-- ROGUE PICKINGS -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Rogue Pickings</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- PORTFOLIO BANNER -->
<section class="back">
<a class="div-link" href="../index.html"><span></span></a>
<div class="back-wrap">
<figure class="chevron">
<img src="../img/chevron-b.png" />
<img src="../img/chevron-g.png" />
<img src="../img/chevron-o.png" />
<img src="../img/chevron-r.png" />
</figure>
<p class="back-text">back</p>
</div>
</section>
<!-- START OF ORIGINAL BODY -->
<div id="example">
<!-- MODULE: Logo & Nav -->
<header>
<div class="heading">
<h1><span>rogue</span> pickings</h1>
</div>
<nav>
About
Menu
Locations
Gallery
Reviews
<a id="last-nav" href="#contact">Contact</a>
</nav>
</header>
<!-- MODULE: Top Section -->
<div class="top-section">
<div class="main-image"><img src="img/download.jpg" />
</div>
<div class="main-title" id="about">
<h3>Welcome to our little corner of the internet!</h3>
<p>Welcome to Rogue Pickings, the roaming truck bringing you the freshest ingredients and ideas in food. Our team works hard so you can be sure our ingredients are always fresh and picked carefully. Our menu changes every day and is made with you in mind. We can't wait to come to you! Check out our locations to see where you can find us. </p>
</div>
</div>
<!-- MODULE: Bottom Section -->
<div class="bottom-section">
<div class="section-one" id="menu"><h4>Today's Specials</h4>
<ul class="menu">
<li>Flaming Hummus & Falafel Salad</li>
<li>Sizzling Bean Burrito</li>
<li>Green Gloves Tamales</li>
</ul>
</div>
<div class="section-two" id="reviews"><h4>Our Awesome Reviews</h4>
<p class="reviews">"I got so excited about the yumminess of the falafel salad that I am typing this review as I inhale my lunch. Yes it is that good.... Service was super friendly and quick. Can't wait see you Rogue Pickings again tomorrow!"</p>
</div>
<div class="section-three" id=contact><h4>Contact</h4>
<p class="address">1001 Potrero Avenue<br>
San Francisco, CA 94110<br>
(415) 206-8000 </p>
</div>
</div>
<!-- MODULE: Footer -->
<footer>
<h4>Powered by lots of <span>fresh</span> ingredients.</h4>
</footer>
<!-- END OF ORIGINAL ROGUE PICKINGS HTML -->
</div>
</body>
</html>
i cant remember if zoom level is persistant on an iphone but it is on desktop browsers, could you have zoomed in/out of one of them? is there a way of making sure you are at 100% zoom?
Edit
is the smaller one contained in a set of tags that is smaller than 55px? as that would cause it to be restricted to the smaller size
Your banner is not responsive, its height is fixed (55px). If the site is being displayed differently - different viewport zoom, your banner will seems to be smaller/larger.
Check the viewport meta tag in those sites:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If the initial-scale is different or if one of the pages is missing the viewport tag it can explain the differences.
As mentioned before, the zoom affects the presented width and this affects the visual size of your banner. If you want it to be responsive, you should change the height units into percentage instead of pixels.
EDIT
The first page is much wider than the second, when you zoom out to see all the page it changes the visual height of your banner.
I'm trying to get my conatiner.png transparent background to apply to my "indexbar" div, but it just simply won't show. It works on my main container, I'm doing it the same way in my style.css but it won't apply.
index.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Reapers Overpoch Store</title>
</head>
<body>
<center>
<div class="banner"><img src="images/banner.png" width="1000" height="400"></div>
<div class="indexbar"><p style="color: #FFF; font-size: 24px">Loadouts | Crates | Buildings | Vehicles & Insurance | Misc</p></div>
<div class="container">
<div class="content">
<h2 style="color: #FFF">Welcome to the Reapers Overpoch Store!</h2>
<p style="color: #FFF">This is where you will find all the donator perks for the Reapers Midnight Recon DayZ servers! All payments are final and specified items will be charged monthly if not cancelled! All items are always up to date and include full details along with pictures.</p>
<p style="color: #FFF"><strong>How to Donate:</strong> If you would like to purchase an item, then click the <strong><i>Buy Now</i></strong> or <strong><i>Donate</i></strong> button associated with it and continue via PayPal.</p>
<p style="color: #FFF"><strong>Delivery Notice:</strong> We do our best to get your items either applied to your character, or added in-game as soon as possible. If there are any delays, it due to unavailability of an admin or coder.</p>
</div>
</div>
</center>
</body>
</html>
style.css:
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-image: url("images/background.jpg");
background-size: cover;
background-attachment: fixed;
margin: 80;
padding: 0;
color: #000;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
font-weight: normal;
}
.container {
width: 1000px;
background-image: url("images/container.png");
margin: 0 auto;
}
.content {
padding: 10px;
font-weight: normal;
margin: 10px;
}
.banner {
height: 400px;
width: 1000px;
margin: 10px;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
.container .content p em {
font-size: 50%;
}
.container .content p {
}
.banner {
margin: 10px;
height: 400px;
width: 1000px;
}
.indexbar {
background-image: url(images/container.png);
margin: 10px;
height: 50px;
width: 1000px;
padding: 10px;
}
Thanks in advance.
You are missing the quotes:
.indexbar {
background-image: url(images/container.png);
margin: 10px;
height: 50px;
width: 1000px;
padding: 10px;
}
Should be:
.indexbar {
background-image: url("images/container.png");
margin: 10px;
height: 50px;
width: 1000px;
padding: 10px;
}
The only difference I see is that you dont have quotes in but that not usually a problem for me
background-image: url(images/container.png);