I was doing some simple coding and my site's font suddenly changed. I never set a font-family, so the font was a default serif. Then it changed to a monospace font. The weirdest thing is that the previously coded text stayed the same serif font. I have no idea what It could be. I also apologize for the poor design, it's a WIP. Here's a screenshot:
As you can see, the bottom and the left text are all in that monospace, but the right isn't quite working
CSS:
html,body {
width: 100%;
height: 100%;
font-family: serif;
}
body {
background-color: #00adc4;
}
.center {
text-align: center;
}
/* Home */
/* Logo */
img.logo {
width: 8%;
height: auto;
float: left;
}
/* Logo */
/*Navigation Bar */
nav {
background-color: turquoise;
border-radius: 10px;
width: 80%;
display: block;
margin: 0px auto;
}
nav a {
text-decoration: none;
color: teal;
font-size: 60%;
text-shadow: 0.5px -0.5px;
display: inline;
margin: 2%;
text-align: center;
}
nav a:visited {
color: teal;
}
/*Navigation Bar */
/* Header */
h1.header {
text-align: center;
font-size: 150%;
}
/* Header */
/* Main Content */
.main {
border: 1px solid black;
border-radius: 5px;
background-color: #00dddd;
width: 40%;
float: right;
max-height: 40% !important;
overflow-y: auto;
margin: 2%;
padding: 1%;
}
/* Main Content */
/* Sidebars */
aside.aside1 {
height: 20%;
width: 40%;
margin: 2%;
padding: 1%;
/* background-color: teal; */
/* border: 1px solid black; */
float: left;
border-radius: 5px;
}
h3.specials {
margin: 0%;
text-align: center;
}
/* Sidebar Images */
img.thumbnail_1 {
width: 30%;
height: auto;
margin: 0% 2%;
}
img.thumbnail_2 {
width: 20%;
height: auto;
margin: 0% 2%;
}
img.thumbnail_3 {
width: 27%;
height: auto;
margin: 0% 2%;
}
/* Sidebar Images */
/* Sidebars */
/* Mailing List */
div.coupon {
height: 20%;
width: 40%;
background-color: teal;
border-radius: 3px;
-webkit-animation: animation 2s;
animation: animation 2s;
margin-left: 3%;
}
/* Mailing Liist */
/* Multimedia */
audio.contest {
width: 100%;
}
/* Multimedia */
/* Home */
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Special Deals - The Jumpin' Juice Company</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="finalmobile.css">
<link rel="stylesheet" media="only screen and ( min-width: 30em )" href="finaltablet.css">
<link rel="stylesheet" media="only screen and ( min-width: 48em )" href="final.css">
<script type="text/javascript" src="project.js"></script>
</head>
<body>
<img src="images/logo.jpg" alt="Logo" title="Jumpin' Juice" class="logo">
<header>
<h1 class="header">The Jumpin' Juice Company</h1>
</header>
<hr>
<nav>
Home
Contact Us
FAQ
Coupons
Specials
Locations
</nav>
<hr>
<section class="main">
<h3 class="news">News</h3>
<h4 style="color: grey;"><b>Annual Audio Contest</b></h4>
<p style="font-size: small; color: black;">This contest is a chance for you to win a year's supply of juice, all on us. Submit the best music relating to juice to win!</p>
<h5>Last Year's Winner:</h5>
<audio class="contest" controls>
<source src="multimedia/AmTronic_-_Caribbean_Dub.mp3">
<source src="multimedia/AmTronic_-_Caribbean_Dub.ogg">
Your browser doesn't support .mp3 or .ogg extensions
</audio>
<p style="font-size: small; color: red;">The deadline for entries has been reached<code></p>
</section>
<aside class="aside1">
<h3 class="specials">Specials!</h3>
<img class="thumbnail_1" src="images/juices/orange_juice.jpg" alt="orange juice" title="Orange Juice">
<img class="thumbnail_2" src="images/juices/cranberry_juice_tea.jpg" alt="cranberry juice tea" title="Cranberry Juice Tea">
<img class="thumbnail_3" src="images/juices/berrymadness.jpg" alt="berry madness" title="Berry Madness">
<p style="font-size: 50%; display: inline;">Orange Juice</p>
<p style="font-size: 40%; display: inline;">Cranberry Juice Tea</p>
<p style="font-size: 50%; display: inline;">Berry Madness</p>
</aside>
<br><br><br><br><br><br>
<div class="coupon">
<p class="animation">Check out this</p>
</div>
<br><br><br>
<footer>
<p style="font-size: small; text-align: center;">© Jumpin' Juice Company, 2017</p>
</footer>
</body>
</html>
You are only using serif as your default font-family.
It's better to use commonly used font combinations.
For serif fonts:
font-family: "Times New Roman", Times, serif;
For sans-serif fonts:
font-family: Arial, Helvetica, sans-serif;
More details here: https://www.w3schools.com/cssref/css_websafe_fonts.asp
You also can use Google Web Fonts.
Here is an example with Roboto Font:
On your HTML file:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
On your CSS file:
font-family: 'Roboto', sans-serif;
More information about how to use Google web Fonts:
https://developers.google.com/fonts/docs/getting_started
Related
I apologize if this is not the most descriptive, as I only have 7 weeks experience of coding with HTML. So I have encountered an issue with optomizing my webpage for a mobile device using a media query. My Nav bar goes off the screen, my form gets all smashed at the bottom, and my table on a seperate page disappears at 700ish pixels. I will copy and paste the code below for each page that is giving me issues!
Home page with Nav bar and Form issues:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ZabelFitness</title>
<meta charset ="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel= "stylesheet" href= "fitness.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>ZabelFitness</h1>
</header>
<nav>
<ul>
<li><b>Home</b></li>
<li><b>About ZabelFitness</b></li>
<li><b>When To Workout</b></li>
<li><b>Exercises</b></li>
<li><b>Diets</b></li>
<li><b>Supplements</b></li>
<li><b>References</b></li>
</ul>
</nav>
<main>
<div class="row">
<div class="column">
<img id="homeimage" src="pose.jpg" alt="Big Muscles" title="Yours Truly striking a pose!" style="width:100%">
</div>
</div>
<h2> LEAVE HERE KNOWING MORE THAN YOU USED TO!!</h2>
<p> <span class= "resort"> ZabelFitness </span> is a one-stop shop for athletes of all skill levels. This site exsits to condense<br>
key information that many have to look for over many different sites! I want to make your life easier!!<br> That's why I created this site (named after my Instagram page) to give all athletes legit information<br>they will want or need in their fitness journey!!</p>
</main>
<h2 id="h2home" > Reach Out For Fitness Advice!!</h2>
<h3> Contact Me</h3>
<p>Required fields are marked with an asterisk *</p>
<form method="post" action="mailto:zabel2#ivytech.edu">
<label for="myFName">*First Name:</label>
<input type="text" name="myFName" id="myFName" required="required">
<label for="myLName">*Last Name:</label>
<input type="text" name="myLName" id="myLName" required="required">
<label for="myEmail">*E-mail:</label>
<input type="email" name="myEmail" id="myEmail" required="required" size="35">
<label for="myPhone">Phone:</label>
<input type="tel" name="myPhone" id="myPhone" maxlength="12">
<label for="myComments">Additional Comments:</label>
<textarea name="myComments" id="myComments" rows="2" cols="20"></textarea>
<input type="submit" id="mySubmit" value="Submit">
</form>
<footer>
<small> <i> Copyright © 2021 ZabelFitness<br>
zabel2#ivytech</i></small>
</footer>
</div>
</body>
</html>
exercise page with wonky table:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ZabelFitness::About </title>
<meta charset ="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel= "stylesheet" href= "fitness.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>ZabelFitness</h1>
</header>
<nav>
<ul>
<li><b>Home</b></li>
<li><b>About ZabelFitness</b></li>
<li><b>When To Workout</b></li>
<li><b>Exercises</b></li>
<li><b>Diets</b></li>
<li><b>Supplements</b></li>
<li><b>References</b></li>
</ul>
</nav>
<main>
<table>
<tr>
<th colspan="8">Guide To Exercises</th>
</tr>
<tr>
<td>Muscle Group</td>
<td>Chest</td>
<td>Triceps</td>
<td>Biceps</td>
<td>Back</td>
<td>Quads</td>
<td>Calves</td>
<td>Hamstrings</td>
</tr>
<tr>
<td>Exercise</td>
<td>Dumbbell/Barbell Bench PressPush-UpsDecline Dumbbell/Barbell Bench PressIncline Dumbbell/Barbell Bench Press</td>
<td>sds</td>
<td>ssds</td>
<td>sds</td>
<td>sds</td>
<td>sd</td>
<td>sd</td>
</tr>
</table>
</main>
<footer>
Copyright © 2021 ZabelFitness <br>
zabel2#ivytech
</footer>
</div>
</body>
</html>
CSS for all my jank:
header { background-color: #36454F;
padding-top:10px;
height: 120px;
text-align: center;
color: #FFFFFF ;
font-family: Verdana, Arial, sans-serif;
text-shadow: 2px 2px 8px #000000;
background-position: right;
background-repeat: no-repeat;
margin-bottom: 0%;
padding: 1em;
background-image: url(weights2.jpg);
background-size: 100%;
}
body { background-color: #404040;
color: #666666 ;
font-family: Verdana, Arial, sans-serif;
}
#container { margin-left: auto ;
margin-right: auto;
width: 80% ;
}
nav a{
text-decoration: none; color:#000000;
}
h1 a{text-decoration: none; color:#FFFFFF;}
h1 a:link{color:#FFFFFF;}
h1 a:hover{color:#A52A2A;}
h1 { color: #FFFFFF ;
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
text-align: center;
font-size: 1.5em;
}
nav a:link{color:#000000;}
nav a:visited{color:#344873;}
nav a:hover{color:#A52A2A;}
nav ul {list-style-type: none;
display: flex;
flex-direction: column;
margin: 0;
padding-left: 0;
max-width:1800px;
text-align: center;
}
nav {text-align: center;}
nav li {padding-top: 1em;
display: inline-block;
padding-left: 3em;
padding-right: 3em;
width: 100%;
border-bottom: 1px solid;
font-size: 1.2em;
text-align: center;
max-width:1800px;
}
h2{ color: #A52A2A ;
font-family: Verdana, Arial, sans-serif ;
line-height: 200% ;
padding-top: 2.5em;
padding-bottom: 2em;
}
h3 {font-family: Georgia, 'Times New Roman', Times, serif;
}
dt { font-weight: bold;
color: #002171
}
main {
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
padding-bottom: 0;
}
#homeimage {
float:center;
width: 240px;
height: 300px;
}
#homehero {
background-size: 200% 100%;
background-repeat: no-repeat;
}
#abouthero{
height: 300px;
background-size: 200% 100%;
background-repeat: no-repeat;
}
#aboutimage{width:480px;
height: 480px;
}
}
#trailhero{
height: 300px;
background-image: url(trail.jpg);
background-size: 200% 100%;
background-repeat: no-repeat;
}
.resort { font-size: 1.2em;
color: #000033;
}
#wrapper {
background-color: #BEBEBE;
background-image: linear-gradient(#FFFFFF, #BEBEBE);
padding: 1em;
}
footer { font-size: .70em;
padding: 1em;
font-style: italic;
text-align : center;
}
* {box-sizing: border-box;}
section {
padding-left:.5em;
padding-right: .5em;
}
#mobile {display: inline;}
#desktop {display: none;}
#media (min-width: 600px) {
h1{font-size: 2em; letter-spacing: .25em;}
nav ul{flex-direction: row; justify-content: space-around; padding-right: .5em;}
nav li{width: 12em; border-bottom: none;}
section{padding-left: 2em; padding-right: 2em;}
#flow{display:flex; flex-direction:column;}
#mobile{display:none;}
#desktop{display:inline;}
#homehero{background-size: 100% 100%;}
#yurthero{background-size: 100% 100%;}
#trailhero{background-size: 100% 100%;}
#reshero{background-size:100% 100%}
input[type="submit"]{width:9em; grid-column:2/3;}
form{width:60%;
display:grid;
grid-gap:0.5em;
grid-template-columns: 10em 1fr;}
}
#media (min-width: 1801px) {
body{background-color: linear-gradient(to bottom, #FFFFFF 20%, #90C7E3 60%, #FFFFFF 100%);}
nav ul{padding-right: 10%; padding-left: 10%; padding-bottom:3em;}
#wrapper{margin:auto; width: 80%;}
#aboutimage{width:360px; height: 360px;}
header{background-image:100% 100%}
#homeimage{width:360px; height: 360px; float: center; }
#media (min-width: 1080px) {
table thead {
display: none;
}
table td {
display: flex;
}
table td::before {
content: attr(label);
font-weight: bold;
width: 120px;
min-width: 120px;
}
}
textarea, input{margin-bottom:.5em; width: 400px;}
.column {
float: left;
width: 33.33%;
padding: 5px;
padding-top: 10px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
table{
margin: auto;
text-align: center;
border: 1px solid #3399CC;
width: 90%;
border-collapse: collapse;
}
td, th{
color: #000;
padding: 5px;
border: 1px solid #3399CC;
}
td{text-align: center;}
.text{
text-align: left;
}
tr:nth-of-type(odd){ background-color: #B0B0B0;}
tr:nth-of-type(even){ background-color: #696969;}
THANK YOU IN ADVANCE!!! :)
You should only place the max-width in the body tag along with a min-width in your css. You are setting your ul to a max-width of 1800px which is for a desktop. When you set a min-width to the body it will adjust for phones.
body{
max-width: 1800px;
min-width: 200px;
}
If your code is specific to phones only where they would not be viewed in a browser on a laptop or desktop, you could set the max-width:400px. Thus on a phone the browser will span only 400px and if the user minimized the window, the smallest it would get is 200px;
My example means a laptop/browsers will only expand to 1800px on a 1900 resolution screen and then when I minimized the browser on my laptop or in a phone 200px is minimum.
You can play around with the values testing in your browser to see how your data flows. You may have to adjust other tags to flow.
On W3Schools in regards to flex boxes it mentions this
/* Responsive layout - makes a one column layout instead of a two-column layout */
#media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
W3 Schools Flexbox Responsive webpages
I am recreating website to practice my html and css skills.
I am doing mobile first, and when i set my device width/height on Iphone 6/7/8 ( 375x667 ) (and of course it may be the case for other widths ) body content spills to the right of viewport border.
I know this may be too much code but i am really stuck on this and i don't really know what is causing this problem.
I am previewing it in Opera Developer Tools.
Thanks in advance .
CSS:
body {
background-color: #fff;
font-family: sans-serif;
overflow: auto;
}
/* NAVIGATION HEADER */
header {
display: flex;
height: 80px;
max-width: 100%;
}
.logo {
flex-basis: 27%;
padding: 14px 5px;
}
.menu {
list-style-type: none;
flex-basis: 70%;
}
.menu li {
display: inline-block;
padding: 20px 3px;
}
.menu a {
text-decoration: none;
color: #595959;
font-size: 20px;
}
/* HERO */
.hero {
position: relative;
text-align: center;
}
h1 {
font-size: 39px;
font-weight: 800;
text-align: center;
line-height: 1;
margin-top: 55px;
}
.hero h3 {
text-align: center;
font-size: 19px;
font-weight: normal;
color: #595959;
word-wrap: normal;
margin: 20px 20px;
}
.button {
/* position: absolute; */
display: inline-block;
background-color: #e54545;
padding: 8px 26px;
padding-top: 13px;
border-radius: 60px;
color: white;
line-height: 1.5;
font-size: 18px;
text-align: center;
font-weight: 400;
}
/*
.seework {
top: 230px;
left: 30%;
}
*/
.bckgrnd {
position: relative;
display: inline-block;
background-image: url("pozadina.png");
background-size: cover;
background-position: center;
width: 100%;
height: 250px;
top: -50px;
z-index: -1;
margin: 0;
}
.strelica {
display: inline-block;
position: relative;
font-size: 30px;
font-weight: bold;
color: #595959;
z-index: 2;
text-align: center;
top: 80%;
border: 2px solid #595959;
box-sizing: border-box;
padding: 1px 12px 6px;
border-radius: 50%;
}
/* SIVI SKROL*/
.skrol {
position: relative;
left: 0;
background-color: #595959;
padding: 20px;
margin: 0;
min-width: 100%;
}
#media(min-width: 750px) {
.logomob {
display: none;
}
}
#media(max-width: 750px) {
.logodesk {
display: none;
}
}
HTML:
<!DOCTYPE html>
<html lang="en">
<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">
<title>nLight - User Experiance & User Interface Design Studio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">
<img src="logomob.png" alt="nLight logo" class="logomob hidedesk">
<img src="logodesk.png" alt="nLight logo" class="logodesk hidemob">
</div>
<nav>
<ul class="menu">
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="hero">
<h1>Independent Interface design studio.</h1>
<h3>We are located in sunny Novi Sad, Europe, and work with people worldwide</h3>
<div class="button seework">See Work</div>
<div class="bckgrnd"> <div class="strelica"> ↓ </div> </div>
</section>
<section class="skrol">
<div class="skrolhed">
<h2> Simple solutions to complex problems. </h2>
<p> User Experience / Interface Design & Front-end Development.
One man studio. 10+ years of experience.
</p>
</div>
<div class="skrolbox1">
<em>DESIGN</em>
<h3>We do Interface design and we are serious about it.</h3>
<p>Web applications, SAAS, marketing web sites. From discovery, prototyping, and design, through iterations to final product.</p>
</div>
<div class="skrolbox2">
<em>DEVELOPMENT</em>
<h3>Front-end Development</h3>
<p>Creating front end strategy that scales. Including living style guide, documentation and methodology to on-board new developers.</p>
</div>
<div class="button about">About Us</div>
</section>
<footer>
<img src="logofut.png" alt="nLight logo" class="logofut">
<p>© 2019 nLight. Hand Made in Europe.</p>
</footer>
</body>
</html>
Not sure if this is the fix you are looking for, but replacing min-width: 100% by max-width: 100% for skrol seems to do it.
.skrol {
position: relative;
left: 0;
background-color: #595959;
padding: 20px;
margin: 0;
max-width: 100%; /*instead of min-width*/
}
I am having an issue with my project for my coding bootcamp.
Problem: My website seems to be scrollable even thought all my content fits on the page. I have tried to edit height, but it only throws the whole site out of wack.
Does anyone have a solution will prevent scrolling when it is not needed?
Thank you so much in advance.
Rob Connolly
html, body {
height: 100%;
}
#wrap {
margin: 0 auto;
text-align: center;
width: 960px;
background-color: white;
}
#firstName {
color: white;
margin: 0 auto;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: white;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
line-height: 125px;
display: flex;
justify-content: space-between;
align-items: center;
}
hr {
clear: both;
border-bottom-style: solid;
margin: 0 auto;
width: 100%;
align-self: center;
}
#backgroundTest {
background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
background-repeat: repeat;
padding: 70px;
height: 100%;
}
#wrap2 {
margin: 0px auto;
width: 960px;
background-color: white;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
#aboutMeHeading {
clear: both;
color: #4aaaa5;
margin: 15px 0 15px 15px;
}
#grayLine {
margin: 15px auto;
color: #dddddd;
width: 930px;
border-width: 1px;
align-self: center;
}
#footerBox {
margin-top: 50px;
width: 100%;
background-color: #666666;
height: 2.5rem;
border-top-style: solid;
border-top-color: #4aaaa5;
border-top-width: 10px;
align-self: center;
bottom: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#copyright {
text-align: center;
color: white;
overflow: hidden;
}
body {
margin: 0 auto;
}
#robImage {
width: 200px;
height: 200px;
float: left;
margin: 0px 15px 0px 15px;
}
p {
color: #777777;
text-align: left;
margin-left: 15px;
margin-right: 15px;
word-spacing: 3px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
}
#footerLine {
color: #4aaaa5;
}
#cr1 {
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<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">
<title>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework/myportfolio/assets/css/style.css">
</head>
<body>
<!-- this div contains the header-->
<div id="wrap">
<header>
<!-- name in header-->
<h1 id="firstName">
Rob Connolly
</h1>
<!-- Header-->
<div id="menu">
<span>
About
</span>
<span>
Portfolio
</span>
<span>
Contact
</span>
</div>
</div>
</header>
<!-- clear fix cleard float-->
<hr id="clearfix">
<!-- background image-->
<div id="backgroundTest">
<!-- Wrap2 wraps abouy me section-->
<div id="wrap2">
<!-- About Me Heading-->
<h2 id="aboutMeHeading">
About Me
</h2>
<!-- gray line in about me section-->
<hr id="grayLine">
<!-- Image of Rob-->
<img id="robImage" src="https://lh3.googleusercontent.com/Y0NrDdrtQbttFKexILjcVZ4tPrV55AoKy_jaCB0-lL-QkCfk9FjbYoWXfyLF6gZsz3lwXBSYwjunxjEC0Ti8r-zUe99lezpZXFyL5ReR7Xsf1enfVNYPTg0Fk9R8M3rm-OXNqCDYJgTojq1kl8sADXpR2-24UdZU5hrOMHTpULMyPMcxTu3PIaId-Nfgd4cTzNJ5qtY2YGzFqVL2JjOHukvKah7mWNfcbjEDuQ7iH13Ax4FmolxJcdT7lm6Z25b8gbKoecazzKpMzpwiatuOM8MrHkDG04z9JXlRbrK_BcrsZmzt6b5u79-YKK9siwnWIT_-LlRldygCWsDgPAjoB0EMSsS9D-dbS7nWXJ01SwHaUaLbtu5UgfixRdO6H1FSqJeMv-E1xA4K1MTrUPLLdSZ65_cxzCSzdkKU2Ny4lwWYo5ZvT09kjYLW56XWl7H5BalG0mHzOt4HsKY-XtPRGFC0Nw85ECbpZsEJvBPJDGui8SOS-FDMcHmjdgZNsIGxxG7yaQeK34Cc1MlxnHSzwba5RS-PMbynkuXdTb2Va_QDe_cAFhm-hE9tzgMfn_LWMcnUhrH0bIdq6s4NgwqQ7zz03bBZyXuiKS1zCJRnYobGHUeVJPdXQvR0ZbVl0NyJ_EgI0pm0bhUKYxS9d0ez81LzGcK81yG15SnjuvUjLpK9vSlJB7w0=s960-no" alt="rob connolly photo">
<p>Welcome to my portfolio page. I would like to first thank you for taking the time to learn more about who I am. I love to build and scale companies. I have founded two previous companies, one was recently acquired. I am very fourtante to have had the opportunity to learn from my previous failures and successes.
</p>
<p>This year I made the decision that I want to be in a position to help other start-ups looking to grow and scale their own companies. I made the decision to go to the University of California, San Diego's, Full-Stack Coding Bootcamp program to sharpen my development skills.
</p>
<p>If you have any questions about me, start-up questions, or how many games Notre Dame is going to win this season in football, please use the contact form above.
</p>
</div>
</div>
<!-- Start of footer-->
<div id="footerBox">
<!-- Text for footer-->
<p id="cr1"> © Copyright</p>
</div>
</body>
</html>
There are two things you'll want to resolve to get it working correctly.
First set your box-sizing property, because you currently do not have one and the size of your boxes is being affected as a result. border-box is the preferred method. You can read the W3 Schools writeup on this if you'd like to better understand what border-box does: https://www.w3schools.com/css/css3_box-sizing.asp
The height of your #backgroundTest element is 100% height, and since it's a direct child of the <body> element it will be that height. It's 87px taller than you'd like because the #wrap element and the header inside it are 85px in height, plus the hr#clearfix that is 2px in height. If you adjust your #backgroundTest to account for this, it will be resolved. Change height to calc(100% - 87px)
On a side-note I recommend not adding a set height on your #footerBox element because the text is being cut off (height isn't enough, so just remove height property altogether and let it create its own height based on font-size, line-height, padding, etc.)
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
#wrap {
margin: 0 auto;
text-align: center;
width: 960px;
background-color: white;
}
#firstName {
color: white;
margin: 0 auto;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: white;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
line-height: 125px;
display: flex;
justify-content: space-between;
align-items: center;
}
hr {
clear: both;
border-bottom-style: solid;
margin: 0 auto;
width: 100%;
align-self: center;
}
#backgroundTest {
background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
background-repeat: repeat;
padding: 70px;
height: calc(100% - 87px);
}
#wrap2 {
margin: 0px auto;
width: 960px;
background-color: white;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
#aboutMeHeading {
clear: both;
color: #4aaaa5;
margin: 15px 0 15px 15px;
}
#grayLine {
margin: 15px auto;
color: #dddddd;
width: 930px;
border-width: 1px;
align-self: center;
}
#footerBox {
margin-top: 50px;
width: 100%;
background-color: #666666;
height: 2.5rem;
border-top-style: solid;
border-top-color: #4aaaa5;
border-top-width: 10px;
align-self: center;
bottom: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#copyright {
text-align: center;
color: white;
overflow: hidden;
}
body {
margin: 0 auto;
}
#robImage {
width: 200px;
height: 200px;
float: left;
margin: 0px 15px 0px 15px;
}
p {
color: #777777;
text-align: left;
margin-left: 15px;
margin-right: 15px;
word-spacing: 3px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
}
#footerLine {
color: #4aaaa5;
}
#cr1 {
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<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">
<title>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework/myportfolio/assets/css/style.css">
</head>
<body>
<!-- this div contains the header-->
<div id="wrap">
<header>
<!-- name in header-->
<h1 id="firstName">
Rob Connolly
</h1>
<!-- Header-->
<div id="menu">
<span>
About
</span>
<span>
Portfolio
</span>
<span>
Contact
</span>
</div>
</div>
</header>
<!-- clear fix cleard float-->
<hr id="clearfix">
<!-- background image-->
<div id="backgroundTest">
<!-- Wrap2 wraps abouy me section-->
<div id="wrap2">
<!-- About Me Heading-->
<h2 id="aboutMeHeading">
About Me
</h2>
<!-- gray line in about me section-->
<hr id="grayLine">
<!-- Image of Rob-->
<img id="robImage" src="https://lh3.googleusercontent.com/Y0NrDdrtQbttFKexILjcVZ4tPrV55AoKy_jaCB0-lL-QkCfk9FjbYoWXfyLF6gZsz3lwXBSYwjunxjEC0Ti8r-zUe99lezpZXFyL5ReR7Xsf1enfVNYPTg0Fk9R8M3rm-OXNqCDYJgTojq1kl8sADXpR2-24UdZU5hrOMHTpULMyPMcxTu3PIaId-Nfgd4cTzNJ5qtY2YGzFqVL2JjOHukvKah7mWNfcbjEDuQ7iH13Ax4FmolxJcdT7lm6Z25b8gbKoecazzKpMzpwiatuOM8MrHkDG04z9JXlRbrK_BcrsZmzt6b5u79-YKK9siwnWIT_-LlRldygCWsDgPAjoB0EMSsS9D-dbS7nWXJ01SwHaUaLbtu5UgfixRdO6H1FSqJeMv-E1xA4K1MTrUPLLdSZ65_cxzCSzdkKU2Ny4lwWYo5ZvT09kjYLW56XWl7H5BalG0mHzOt4HsKY-XtPRGFC0Nw85ECbpZsEJvBPJDGui8SOS-FDMcHmjdgZNsIGxxG7yaQeK34Cc1MlxnHSzwba5RS-PMbynkuXdTb2Va_QDe_cAFhm-hE9tzgMfn_LWMcnUhrH0bIdq6s4NgwqQ7zz03bBZyXuiKS1zCJRnYobGHUeVJPdXQvR0ZbVl0NyJ_EgI0pm0bhUKYxS9d0ez81LzGcK81yG15SnjuvUjLpK9vSlJB7w0=s960-no" alt="rob connolly photo">
<p>Welcome to my portfolio page. I would like to first thank you for taking the time to learn more about who I am. I love to build and scale companies. I have founded two previous companies, one was recently acquired. I am very fourtante to have had the opportunity to learn from my previous failures and successes.
</p>
<p>This year I made the decision that I want to be in a position to help other start-ups looking to grow and scale their own companies. I made the decision to go to the University of California, San Diego's, Full-Stack Coding Bootcamp program to sharpen my development skills.
</p>
<p>If you have any questions about me, start-up questions, or how many games Notre Dame is going to win this season in football, please use the contact form above.
</p>
</div>
</div>
<!-- Start of footer-->
<div id="footerBox">
<!-- Text for footer-->
<p id="cr1"> © Copyright</p>
</div>
</body>
</html>
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.
So I'm trying to create a landing page exactly like this (FYI, to work on my HTML/CSS skills, I have decided to exactly imitate this landing page just for practice!)
http://oi67.tinypic.com/b8qp8i.jpg
However, as you can see from what I did, the full background picture (sailing boat + ocean) does not show up in the first column: http://oi66.tinypic.com/o7ktgl.jpg
Another issue is that on the left side of the background image on the third column, I keep seeing on a small "broken page" icon (I don't know why it's there but it's really been annoying) ... is it an image problem or something wrong with the image file?
Help would be much appreciated, thank you!
Here is my full HTML and CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta name="description" content="Your description goes here">
<meta name="keywords" content="one, two, three">
<title>Relaxr</title>
<!-- external CSS link -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="mainColumn">
<header>
<h1>Relaxr</h1>
<h2>Get piece of mind with a single tap</h2>
</header>
<span>
<button id="getButton">Get it Now</button>
</span>
</div>
<div id="secondColumn">
<header>
<h1>Benefits</h1>
<p>The perfect personal assistant. Relaxr does your job<br>for you so you can enjoy life as it is meant to be.</p>
<ul class="benefitss">
<li>Schedule meetings for you</li>
<li>Excel automation to complete your <br>work for you</li>
<li>Responds to e-mails on your behalf</li>
<li>Does all yor work for you with our<br>revolutionary technology</li>
</ul>
</header>
</div>
<div id="thirdColumn">
<img src="../images/testimonial_bg.jpg">
<p>“Relaxr changed my life. I’ve been able<br> to travel the world, spend limited time<br> working and my boss keeps thanking<br>me for crushing work.”</p>
<p>- Amanda, Intuit</p>
</div>
<div id="fourthColumn">
<button id="signupButton">Sign Up Now!</button>
</div>
<div id="fifthColumn">
<p>Relaxr</p>
<div id="footer">
<p>Copyright 2015. Relaxr.</p>
</div>
</div>
</body>
</html>
CSS:
/******************************************
/* SETUP
/*******************************************/
/* Box Model Hack */
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
}
/* Clear fix hack */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear {
clear: both;
}
.alignright {
float: right;
padding: 0 0 10px 10px; /* note the padding around a right floated image */
}
.alignleft {
float: left;
padding: 0 10px 10px 0; /* note the padding around a left floated image */
}
/******************************************
/* BASE STYLES
/*******************************************/
body {
color: #000;
font-size: 12px;
line-height: 1.4;
font-family: Open Sans;
background: url(../images/header_bg.jpg) no-repeat center top;
background-size: cover;
}
/******************************************
/* LAYOUT
/*******************************************/
/*MAIN COLUMN*/
#mainColumn {
width: 100%;
height: 450px;
text-align: center;
}
#mainColumn h1 {
color: white;
padding-right: 80%
}
#mainColumn h2 {
color: white;
font-size: 24px;
font-weight: 600;
letter-spacing: 1px;
margin-top: 50px;
text-align: center;
}
header {
height: 40%;
}
/*GET IT NOW BUTTON*/
#getButton {
background-color: yellow;
border-radius: 3px;
border-style: none;
font-size: 14px;
font-weight: 700;
height: 30px;
width: 130px;
}
/*SECOND COLUMN*/
#secondColumn {
width: 100%;
margin: auto;
height: 360px;
background-color: white;
}
#secondColumn h1 {
padding-left: 65px;
padding-top: 60px;
color: navy;
font-size: 20px;
font-weight: 700;
}
#secondColumn p {
font-size: 13px;
padding-left: 70px;
}
.benefitss {
margin-left: 80px;
padding-top: 20px;
font-size: 13px;
}
.benefitss li{
padding-top: 2px;
}
/*THIRD COLUMN*/
#thirdColumn {
width: 100%;
height: 250px;
}
#thirdColumn p:nth-child(2) {
color: #ffffff;
font-style: italic;
font-size: 15px;
text-align: center;
}
#thirdColumn p:nth-child(3) {
color: #ffffff;
font-size: 18px;
font-weight: 700;
text-align: center;
}
/*FOURTH COLUMN*/
#fourthColumn {
background-color: yellow;
width: 100%;
height: 75px;
}
/*SIGN UP BUTTON*/
#signupButton {
background-color: #000040;
color: white;
border-radius: 3px;
border-style: none;
font-size: 12px;
font-weight: 800;
height: 30px;
width: 150px;
margin-left: 42.9%;
margin-top: 25px;
}
#fifthColumn {
background-color: #000000;
width: 100%;
height: 225px;
position: absolute;
}
#fifthColumn p {
color: yellow;
text-align: center;
font-size: 24px;
font-weight: 800;
}
#footer p {
font-size: 9px;
color: #ffffff;
text-align: center;
padding-top: 11%;
}