I am making a website using HTML and CSS and the heading displays fine in full screen but when I make it half the screen size the header (h1) changes to the default font and aligns to the left instead of the center as it should.
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<title>Home page</title>
<link type="text/css" rel="stylesheet"
href="css/filesheet1.css"/>
</head>
<body>
<nav>
<ul>
<li>Home page</li>
<li>About us</li>
<li>Our songs</li>
<li>See us play</li>
<li>Contact us</li>
<li>Merchandise</li>
<li>Playing a concert</li>
</ul>
</nav>
<h1>Home</h1>
</body>
</html>
Here is my CSS code (sorry if there's a lot as I have no idea whats causing this issue I have put it all there):
/* set sizing to border box method */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* set maximum and minimum widths for the body and centre within the viewport */
body {
text-align: center;
border: solid;
border-radius: 15px;
border-color: #CACFD2;
box-shadow: 0 0 100px 0 #888888;
background-color: #CACFD2;
font-family: 'Inconsolata', monospace;
margin-left: auto;
margin-right: auto;
max-width: 1024px;
min-width: 256px;
padding-top: 8px;
padding-bottom: 24px;
padding-left: 24px;
padding-right: 24px;
}
html, html body{
height: 100%;
}
html{
background-color: white;
}
/* header */
header{
}
header p {
float: left;
font-size: 16px;
font-weight: bold;
margin-top: 0px;
}
header h1 {
font-size: 16px;
text-align: center;
}
/* the menu */
nav ul {
text-align: center;
list-style-type: none;
background-color: none;
border: none;
font-family: 'Inconsolata', monospace;
font-weight: 400;
padding: 16px;
}
nav ul li {
display: inline;
border-right: 2px solid #111111;
padding-right: 8px;
padding-left: 8px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
text-decoration: none;
color: #111111;
}
nav li.selected{
color: #606060;
}
nav ul li a:hover {
font-weight: 900;
}
/* biographies */
section {
background-color: #FFFFFF;
margin-bottom: 24px;
min-height: 320px;
padding-left: 24px;
padding-right: 24px;
}
/* the aside */
aside {
}
/* footer */
footer {
}
footer p.copyright {
float: left;
margin-top: 0px;
}
footer p.contact {
text-align: right;
}
/* small images are set to 200px in height */
img.small {
float: left;
height: 200px;
margin-bottom: 24px;
margin-right: 24px;
}
/* medium images can be 50% of the container element’s width, up to 360px */
img.medium {
max-width: 360x;
width: 50%;
}
/* large images are 100% of the container element’s width */
img.large {
width: 100%;
}
/* add the same style of border to the elements which are to have borders */
section, img {
border: 2px solid #B1B1B1;
border-radius: 16px;
}
/* the bits that are specific to a wide viewport (over 56em) */
#media{
min-width: 900px
}
article {
float: left;
width: 66%;
}
aside {
float: left;
padding-left: 24px;
width: 34%;
}
footer {
clear: both;
}
h1{
text-align: center;
font-family: 'Inconsolata', monospace;
}
/* Styles go here */
/* set sizing to border box method */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* set maximum and minimum widths for the body and centre within the viewport */
body {
text-align: center;
border: solid;
border-radius: 15px;
border-color: #CACFD2;
box-shadow: 0 0 100px 0 #888888;
background-color: #CACFD2;
font-family: 'Inconsolata', monospace;
margin-left: auto;
margin-right: auto;
max-width: 1024px;
min-width: 256px;
padding-top: 8px;
padding-bottom: 24px;
padding-left: 24px;
padding-right: 24px;
}
html, html body{
height: 100%;
}
html{
background-color: white;
}
/* header */
header{
}
header p {
float: left;
font-size: 16px;
font-weight: bold;
margin-top: 0px;
}
header h1 {
font-size: 16px;
text-align: center;
}
/* the menu */
nav ul {
text-align: center;
list-style-type: none;
background-color: none;
border: none;
font-family: 'Inconsolata', monospace;
font-weight: 400;
padding: 16px;
}
nav ul li {
display: inline;
border-right: 2px solid #111111;
padding-right: 8px;
padding-left: 8px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
text-decoration: none;
color: #111111;
}
nav li.selected{
color: #606060;
}
nav ul li a:hover {
font-weight: 900;
}
/* biographies */
section {
background-color: #FFFFFF;
margin-bottom: 24px;
min-height: 320px;
padding-left: 24px;
padding-right: 24px;
}
/* the aside */
aside {
}
/* footer */
footer {
}
footer p.copyright {
float: left;
margin-top: 0px;
}
footer p.contact {
text-align: right;
}
/* small images are set to 200px in height */
img.small {
float: left;
height: 200px;
margin-bottom: 24px;
margin-right: 24px;
}
/* medium images can be 50% of the container element’s width, up to 360px */
img.medium {
max-width: 360px;
width: 50%;
}
/* large images are 100% of the container element’s width */
img.large {
width: 100%;
}
/* add the same style of border to the elements which are to have borders */
section, img {
border: 2px solid #B1B1B1;
border-radius: 16px;
}
/* the bits that are specific to a wide viewport (over 56em) */
#media all and (min-width: 900px) {
}
article {
float: left;
width: 66%;
}
aside {
float: left;
padding-left: 24px;
width: 34%;
}
footer {
clear: both;
}
h1{
text-align: center;
font-family: 'Inconsolata', monospace;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<title>Home page</title>
<link type="text/css" rel="stylesheet"
href="style.css"/>
</head>
<body>
<nav>
<ul>
<li>Home page</li>
<li>About us</li>
<li>Our songs</li>
<li>See us play</li>
<li>Contact us</li>
<li>Merchandise</li>
<li>Playing a concert</li>
</ul>
</nav>
<h1>Home</h1>
</body>
</html>
This should work for you now.
Related
I am trying to create a responsive website. I had a navigation bar on top of the page with links on the right and social media icons on the left. When I make the browser smaller it pushes the links under the navigation bar as if it was being pushed into another div.
I believe the social icons are causing the problem. They are two different div's inside multiple div's. If I remove the social icons it works but I would like to keep the social icons top left.
<body>
<div id="outerWrapper"> </div>
<div id="navWrapper">
<div id="navInnerWrapper">
<div id="topSocials">
<img alt="facebook icon" src="images/fb_social.png">
<img alt="linkedin icon" src="images/linkedin_social.png">
</div>
<div id="navBar">
<ul>
<li>About</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</div>
</div>
#outerWrapper {
width: 100%;
height: auto;
display: block;
position: relative;
color: #333333;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu
Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 14px;
text-align: left;
line-height: 20px;
}
#navWrapper {
width: 100%;
height: 45px;
display: block;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
clear: both;
border-bottom: 3px solid #000000;
background-color: #9FA2B2;
}
#navInnerWrapper {
width: auto;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
clear: both;
padding-right: 200px;
}
#topSocials {
width: 231px;
display: block;
position: relative;
float: left;
height: auto;
padding-top: 5px;
padding-left: 50px;
}
#navBar {
width: 600px;
display: block;
position: relative;
float: right;
height: auto;
color: #FFFFFF;
text-align: right;
text-transform: uppercase;
}
ul {
list-style-type: none;
}
ul li {
display: inline;
padding-left: 40px;
}
#navBar a:link {color: #16262E; text-decoration: none; }
#navBar a:visited {color: #16262E; text-decoration: none; }
#navBar a:hover {color: #FFFFFF; text-decoration: none; }
#navBar a:active {color: #16262E; text-decoration: none; }
This is what it looks like when I make the browser smaller.
https://imgur.com/a/BLSilIp
Want the navigation to be responsive with links on the right and social icons on the left.
You have a very bad code. See how many properties I fixed and added to you in CSS. Learn better.
#navWrapper {
width: 100%;
/* height: 45px; */
/* display: block; */
/* padding-top: 10px; */
/* padding-bottom: 10px; */
/* position: relative; */
/* clear: both; */
border-bottom: 3px solid #000000;
background-color: #9FA2B2;
box-sizing: border-box;
}
#navInnerWrapper {
/* width: auto; */
/* height: auto; */
/* display: block; */
/* margin-left: auto; */
/* margin-right: auto; */
/* position: relative; */
/* clear: both; */
/* padding-right: 200px; */
/* padding: 20px 0; */
display: flex;
flex-flow: wrap;
justify-content: space-between;
align-items: center;
}
#topSocials {
/* width: 231px; */
/* display: block; */
/* position: relative; */
/* float: left; */
/* height: auto; */
/* padding-top: 5px; */
/* padding-left: 50px; */
display: flex;
flex-direction: row;
padding: 10px;
}
#topSocials a {
margin-right: 10px;
}
#navBar {
/* width: 600px; */
/* display: block; */
/* position: relative; */
/* float: right; */
/* height: auto; */
/* color: #FFFFFF; */
/* text-align: right; */
text-transform: uppercase;
padding: 10px;
}
ul {
list-style-type: none;
display: flex;
flex-flow: wrap;
padding: 0;
margin: 0;
}
ul li {
/* display: inline; */
/* padding-left: 40px; */
margin-left: 20px;
}
ul li:first-child {
margin-left: 0px;
}
#navBar a:link {
color: #16262E;
text-decoration: none;
}
#navBar a:visited {
color: #16262E;
text-decoration: none;
}
#navBar a:hover {
color: #FFFFFF;
text-decoration: none;
}
#navBar a:active {
color: #16262E;
text-decoration: none;
}
<div id="navWrapper">
<div id="navInnerWrapper">
<div id="topSocials">
<img alt="facebook icon" src="images/fb_social.png">
<img alt="linkedin icon" src="images/linkedin_social.png">
</div>
<div id="navBar">
<ul>
<li>About</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</div>
</div>
I'm working on my final project for my HTML/CSS class. I'm trying to (potentially over ambitious) create a collapsible accordion style menu. I've managed to get it hid and only show up with a hover, but for some reason, there is an element causing the boxes to have spaces between them, and I'm unsure how to contain the text in the boxes. Thank you in advance for any ideas you have!
Screenshot:
How to remove the area with the red background?
EDIT: Sorry first time posting here, wasn't sure how much code to post.
HTML Code
#charset "utf-8";
/* HTML Styles */
/*Body Styles*/
html {
background-image: url(../images/sushi_wallpaper.jpeg);
}
body {
display:block;
width: 100%;
max-width: 1040px;
margin-left: auto;
margin-right: auto;
background-color: white;
border: 7px solid rgb(149,54,0);
border-top: none;
border-bottom: none; /* BODY BORDER, RE-ADDRESS WITH COLORS */
position: static;
border-collapse: collapse;
}
/*Navigation Styles*/
nav {
font-family: 'Times New Roman', serif;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav.horizontalnavigation li {
/*BUTTON SIZES */
display: block;
float: left;
width: 25%;
text-decoration: none;
line-height: 2;
padding-bottom: 1em;
}
nav.horizontalnavigation li a:hover {
background-color:rgb(255,198,73);
}
/* COLLAPSE ABLE MENU */
ul.collapse {
display: none;
}
a.accord:hover+ul.collapse, ul.collapse:hover {
display: block;
float: left;
width: 100%;
}
.collapse > .submenu {
width: 100%;
background-color: red; }
ul.collapse li {
width: 80%;
float: right;
border: none;
line-height: initial;
}
nav.horizontalnavigation > ul > li:hover:nth-of-type(4):after {
text-decoration: underline;
content: #collapse;
}
nav.horizontalnavigation > ul > li:target {
display: block;
}
nav.horizontalnavigation a {
/*"BUTTONS" STYLES HERE */
display: block;
color: black;
text-decoration: none;
background-color: white;
border: 3px solid rgb(149,54,0);
box-shadow: 0 0 1em .3em rgb(255,198,73) inset;
}
/* Header Styles */
h1 {
font-family: 'Times New Roman', Times, serif;
font-size: 2.2em;
font-weight: normal;
margin: 0.5em 0;
}
/*Font Styles */
#font-face {
font-family: speedingBrush;
src: url("../fonts/SpeedingBrush.ttf") format("truetype");
}
cite {
font-style: italic;
}
/* Paragraph Styles */
p {
display:block;
font-size: 1em;
line-height: 1.375;
text-indent: 8%;
}
/*Images Styles*/
body > header > img.banner {
display:block;
width: 100%;
}
/* DIV & Section Styles */
/*List Styles */
/*Footer Styles*/
footer {
display: block;
text-align: center;
width: 100%;
border: 2px solid rgb(149,54,0);
line-height: 2;
margin-top: 15em;
clear: both;
}
<nav class="horizontalnavigation">
<ul>
<li>Popular Types of Sushi</li>
<li>Where can I get sushi?</li>
<li>FREE Sushi Catalog</li>
<li>Additional Resources
<ul class="collapse">
<li class="submenu">WWWWWWWWWWWWWWW</li>
<li class="submenu">WWWWWWWWWWWWWWWWWWWWWWWWW</li>
<li class="submenu">WWWWWWWWWWWW</li>
</ul>
</li>
</ul>
</nav>
Just add
ul.collapse li.submenu{
padding: 0;
}
Remove padding-bottom: 1em; and it will solve your issue.
nav.horizontalnavigation li {
/*BUTTON SIZES */
display: block;
float: left;
width: 25%;
text-decoration: none;
line-height: 2;
padding-bottom: 1em; // <----- This is causing the spacing
}
I'm pretty sure it's going to be something stupid, but I'm not being able to find the issue myself.
Does anyone knows why my website mobile version looks like this
My mobile version
Instead of this...
How it should look like
Your help is very much appreciated =)
#mobile {
display: none;
}
#desktop {
display: inline;
}
#media only screen and (max-width: 1024px) {
body {
margin: 0px;
background-image: none;
}
#wrapper {
width: auto;
min-width: 0px;
margin: 0px;
padding: 0px;
box-shadow: none;
}
header {
border-bottom: 5px solid #fef6c2;
}
h1 {
margin-top: 0px;
margin-bottom: 1em;
padding-top: 1em;
padding-bottom: 1em;
font-size: 2.5em;
}
nav {
float: none;
width: auto;
padding-top: 0px;
margin: 10px;
font-size: 1.3em;
}
nav li {
display: inline-block;
}
nav a {
padding: 1em;
width: 5em;
font-weight: bold;
border-style: none;
}
nav ul,
#heroroad,
#heromugs,
#heroguitar {
margin: 0px;
padding: 0px;
}
main {
padding: 0px;
margin: 0px;
font-size: 90%;
}
}
#media only screen and (max-width: 768px) {
header {
background-image: url(images/javajammini.jpg);
height: 128px;
}
h1 {
font-size: 2em;
text-align: center;
padding-left: 0px;
}
nav {
margin: 0px;
}
nav a {
display: block;
padding: 0.2em;
width: auto;
border-bottom: 1px #fef6c2;
}
nav li {
display: block;
}
main {
padding-top: 1px;
}
h2 {
padding: 0.5em 0em 0em 0.5em;
margin-right: 0.5em;
}
.details {
padding-left: 0px;
padding-right: 0px;
}
#heroroad,
#heromugs,
#heroguitar {
background-image: none;
height: auto;
}
.floatleft {
padding-left: 0.5em;
padding-right: 0.5em;
}
#mobile {
display: inline;
}
#desktop {
display: none;
}
}
* {
box-sizing: border-box;
}
header,
nav,
main,
footer {
display: block;
}
body {
background-color: #FCEBB6;
color: #221811;
font-family: Arial;
background-image: url(images/background.gif);
}
header {
background-color: #D2B48C;
height: 150px;
background-image: url(images/javajamlogo.jpg);
background-repeat: no-repeat;
}
nav {
text-align: center;
font-weight: bold;
padding-top: 10px;
font-size: 1.5em;
float: left;
}
nav a {
text-decoration: none;
width: 200px;
}
nav a:link {
color: #FEF6C2;
}
nav a:visited {
color: #D2B48C;
}
nav a:hover {
color: #CC9933;
}
nav ul {
padding-left: 3em;
list-style: none;
}
main {
padding: 0em 0em 2em 0em;
display: block;
margin-left: 200px;
background-color: #FEF6C2;
}
main h2,
main h3,
main h4,
main p,
main div,
main ul,
main dl {
padding: 0em 2em 0em 3em;
}
footer {
background-color: #D2B48C;
font-style: italic;
font-size: .60em;
text-align: center;
padding-bottom: 10px;
border-bottom: 2px solid #221811;
border-top: 2px solid #221811;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: #231814;
min-width: 900px;
max-width: 1280px;
box-shadow: 10px 10px 5px #888888;
}
h1 {
padding-top: 45px;
padding-left: 220px;
font-size: 3em;
}
h4 {
background-color: #d2b48c;
font-size: 1.2em;
padding-left: 10px;
padding-bottom: 5px;
text-transform: uppercase;
border-bottom: solid 2px black;
padding-bottom: 0em;
clear: left;
}
.details {
padding-left: 20%;
padding-right: 20%;
overflow: auto;
}
img {
padding-left: 10px;
padding-right: 10px;
}
#heroroad {
background-image: url(images/heroroad.jpg);
background-size: 100%;
height: 250px;
}
#heromugs {
background-image: url(images/heromugs.jpg);
background-size: 100%;
height: 250px;
}
#heroguitar {
background-image: url(images/heroguitar.jpg);
background-size: 100%;
height: 250px;
}
.floatleft {
float: left;
padding: 0px 20px 20px 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaJam Coffee House</title>
<meta charset="utf-8">
<link rel="stylesheet" href="javajam.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- [if lt IE 9]>
<script src="html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<div>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Music</li>
<li>Jobs</li>
</ul>
</div>
</nav>
<main>
<div id="heroroad"></div>
<h2>Follow the Winding Road to JavaJam</h2>
<p>We're a little out of the way, but take a drive down Route 42 to JavaJam today! Indulge in our locally rosted free-trade coffee and home-made pastries. You'll feel rigth at home at JavaJam!</p>
<h3>JavaJam Coffee House features</h3>
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night</li>
</ul>
<p>12312 Main Street<br>Mountain Home, CA 93923<br><a id="mobile" href="tel:1-888-555-5555">1-888-555-5555</a> <span id="desktop">1-888-555-5555</span> </p>
</main>
<footer>
<p>JavaJam Copyright © 2013 Coffee House<br>name#email.com</p>
</footer>
</div>
</body>
</html>
Put your (#media) blocks bottom of whole css.
Try this...
#mobile {
display: none;
}
#desktop {
display: inline;
}
* {
box-sizing: border-box;
}
header,
nav,
main,
footer {
display: block;
}
body {
background-color: #FCEBB6;
color: #221811;
font-family: Arial;
background-image: url(images/background.gif);
}
header {
background-color: #D2B48C;
height: 150px;
background-image: url(images/javajamlogo.jpg);
background-repeat: no-repeat;
}
nav {
text-align: center;
font-weight: bold;
padding-top: 10px;
font-size: 1.5em;
float: left;
}
nav a {
text-decoration: none;
width: 200px;
}
nav a:link {
color: #FEF6C2;
}
nav a:visited {
color: #D2B48C;
}
nav a:hover {
color: #CC9933;
}
nav ul {
padding-left: 3em;
list-style: none;
}
main {
padding: 0em 0em 2em 0em;
display: block;
margin-left: 200px;
background-color: #FEF6C2;
}
main h2,
main h3,
main h4,
main p,
main div,
main ul,
main dl {
padding: 0em 2em 0em 3em;
}
footer {
background-color: #D2B48C;
font-style: italic;
font-size: .60em;
text-align: center;
padding-bottom: 10px;
border-bottom: 2px solid #221811;
border-top: 2px solid #221811;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: #231814;
min-width: 900px;
max-width: 1280px;
box-shadow: 10px 10px 5px #888888;
}
h1 {
padding-top: 45px;
padding-left: 220px;
font-size: 3em;
}
h4 {
background-color: #d2b48c;
font-size: 1.2em;
padding-left: 10px;
padding-bottom: 5px;
text-transform: uppercase;
border-bottom: solid 2px black;
padding-bottom: 0em;
clear: left;
}
.details {
padding-left: 20%;
padding-right: 20%;
overflow: auto;
}
img {
padding-left: 10px;
padding-right: 10px;
}
#heroroad {
background-image: url(images/heroroad.jpg);
background-size: 100%;
height: 250px;
}
#heromugs {
background-image: url(images/heromugs.jpg);
background-size: 100%;
height: 250px;
}
#heroguitar {
background-image: url(images/heroguitar.jpg);
background-size: 100%;
height: 250px;
}
.floatleft {
float: left;
padding: 0px 20px 20px 0px;
}
#media only screen and (max-width: 1024px) {
body {
margin: 0px;
background-image: none;
}
#wrapper {
width: auto;
min-width: 0px;
margin: 0px;
padding: 0px;
box-shadow: none;
}
header {
border-bottom: 5px solid #fef6c2;
}
h1 {
margin-top: 0px;
margin-bottom: 1em;
padding-top: 1em;
padding-bottom: 1em;
font-size: 2.5em;
}
nav {
float: none;
width: auto;
padding-top: 0px;
margin: 10px;
font-size: 1.3em;
}
nav li {
display: inline-block;
}
nav a {
padding: 1em;
width: 5em;
font-weight: bold;
border-style: none;
}
nav ul,
#heroroad,
#heromugs,
#heroguitar {
margin: 0px;
padding: 0px;
}
main {
padding: 0px;
margin: 0px;
font-size: 90%;
}
}
#media only screen and (max-width: 768px) {
header {
background-image: url(images/javajammini.jpg);
height: 128px;
}
h1 {
font-size: 2em;
text-align: center;
padding-left: 0px;
}
nav {
margin: 0px;
}
nav a {
display: block;
padding: 0.2em;
width: auto;
border-bottom: 1px #fef6c2;
}
nav li {
display: block;
}
main {
padding-top: 1px;
}
h2 {
padding: 0.5em 0em 0em 0.5em;
margin-right: 0.5em;
}
.details {
padding-left: 0px;
padding-right: 0px;
}
#heroroad,
#heromugs,
#heroguitar {
background-image: none;
height: auto;
}
.floatleft {
padding-left: 0.5em;
padding-right: 0.5em;
}
#mobile {
display: inline;
}
#desktop {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaJam Coffee House</title>
<meta charset="utf-8">
<link rel="stylesheet" href="javajam.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- [if lt IE 9]>
<script src="html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<div>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Music</li>
<li>Jobs</li>
</ul>
</div>
</nav>
<main>
<div id="heroroad"></div>
<h2>Follow the Winding Road to JavaJam</h2>
<p>We're a little out of the way, but take a drive down Route 42 to JavaJam today! Indulge in our locally rosted free-trade coffee and home-made pastries. You'll feel rigth at home at JavaJam!</p>
<h3>JavaJam Coffee House features</h3>
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night</li>
</ul>
<p>12312 Main Street<br>Mountain Home, CA 93923<br><a id="mobile" href="tel:1-888-555-5555">1-888-555-5555</a> <span id="desktop">1-888-555-5555</span> </p>
</main>
<footer>
<p>JavaJam Copyright © 2013 Coffee House<br>name#email.com</p>
</footer>
</div>
</body>
</html>
Put both of your media queries at the bottom of your CSS code.
Put CSS code for #media only screen and (max-width: 1024px)
and then put CSS code for #media only screen and (max-width: 768px)
Order is important in CSS.
Hello guys my navigation is going under the navigation bar after a certain width how can I make it stay there at all times? code on fiddle
https://jsfiddle.net/mohamedkna/0cm7zquh/
just decrease the width of the right-bottom corner of js fiddle and you will c that the <ul> goes under the main navigation bar disappears (It goes under the nav)
My solution with this was the float right but I can't drop the float right so any alternatives
HTML :
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Turbo</title>`
</head>
<body class="body">
<nav class="nav">
<div class="nav-container">
<img src="includes/img/main_logo.png">
Sign In
<ul class="navigation">
<li>Get Started</li>
<li>Products & Pricing</li>
<li>Help</li>
<li>Tools & Tips</li>
<li>After You File</li>
</ul>
</div>
</nav>
</body>
</html>
CSS :
*, ::after, ::before {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; }
body {
color: #000305;
font-size: 87.5%;
font-family: Arial;
text-align: left; }
a {
text-decoration: none; }
a:link, a:visited {
color: #0082c3; }
a:hover, a:active {
text-decoration: underline;
color: #004f76; }
.nav {
width: 100%;
background-color: #0082C3;
height: 75px; }
.nav-container {
width: 84.7%;
margin: 0 auto;
height: 40px;
clear: both; }
.nav img {
height: 40px;
margin-top: 18px;
vertical-align: middle; }
.navigation {
float: right;
list-style: none;
margin: 0px; }
.navigation li {
display: inline;
float: left; }
.navigation li a {
display: inline-block;
line-height: 60px;
color: #fff;
padding: 16px 15px 0 15px;
font-weight: 200;
font-size: 118%; }
.sign-in {
color: #fff;
float: right;
padding: 6px 12px;
margin: 26px 14px;
width: 75px;
font-size: 110%;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.75);
line-height: 25px;
font-weight: 200;
background-color: #FF8000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px; }
#color {
color: #fff; }
/*# sourceMappingURL=style.css.map */
Your link bar is not disappearing, it is being pushed down below your other images.
If you set your .nav height to 160px, you will see the menu.
This won't help resolve your problem, but you can at least see where it is going.
#media screen and (max-width: 992px) {
.nav-container {
width: 95%;
}
}
this works and we can change the max-width with the width in relative to our needs
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.