I've been working on my website the entire day but now I suddenly noticed that in mobile format my buttons (the logo and the menu button they are called #logo and #menu-icon) don't work anymore. The used to work some time ago. And in the desktop (over 768 pixel wide) version they all work fine.
/*--------STYLE.CSS--------*/
#import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:300,500,700');
* {
margin: 0;
padding: 0;
border: 0;
}
html {
height: 100%;
}
body {
height: 100%;
background: #424949;
color: #f5f5f5;
font-family: 'Alegreya Sans', sans-serif;
margin: 0;
}
h2 {
font-size: 250%;
font-weight: 700;
text-align: center;
padding-top: 2%;
}
p {
font-size: 160%;
font-weight: 500;
line-height: 150%;
padding: 3%;
text-indent: 2%;
text-align: justify;
}
img {
max-width: 100%;
height: auto;
width: auto;
margin-bottom: -4px;
}
header {
background-color: #1a1a1a;
width: 100%;
height: 86px;
}
#header-inner {
max-width: 1200px;
margin: 0 auto;
}
#logo {
margin: -5px 0 -5px 20px;
padding: 0 10px 0 10px;/*top right bottom left*/
float: left;
width: 96px;
height: 96px;
background: url(img/logohead96x.png) no-repeat center; /*org img/logo128x.png*/
}
nav {
float: right;
padding: 4px 20px 0 0;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(img/nav.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul {
list-style-type: none;
margin-right: 10px;
}
nav ul li {
font-family: 'Alegreya Sans', sans-serif;
font-size: 150%;
display: inline-block;
float: left;
margin-top: 35px;
}
nav ul li a {
color:#f5f5f5;
text-decoration: none;
padding: 25px;
}
nav ul li a:hover {
color: #707b7c;
}
.current {
color: #707b7c;
}
.container {
overflow: hidden;
width: 100%;
height: auto; /*calc(100% - 86px - 29px)*/
background-color: #1a1a1a;
}
.container-inner {
height: 100%;
max-width: 1100px;
margin: 0 auto;
}
.container img {
max-height: 100%;
min-width: 100%;
height: 100%;
}
.container video {
max-height: 100%;
min-width: 100%;
height: 100%;
}
footer {
background: #1a1a1a;
width: 100%;
}
.social {
list-style-type: none;
text-align: center;
}
.social li {
display: inline;
}
.social i {
font-size: 460%;
margin: 1%;
padding: 5% 5% 5% 4%;
color: #707b7c
}
.social i:hover {
color: #f5f5f5;
}
footer.second {
background-color: #424949;
margin: 0;
}
footer.second p {
margin: 4px 0 0 0; /*top right bottom left*/
padding: 0 0 0 0;
text-align: left;
font-size: 130%;
font-family: 'Alegreya Sans', sans-serif;
}
/*--------MEDIA--------*/
#media screen and (max-width: 768px) {
h2 {
font-size: 150%;
}
p {
font-size: 120%;
}
header {
position: absolute;
}
#logo {
margin: -5px 5px -5px 5px;
background: url(img/logohead64x.png) no-repeat center;
}
#menu-icon {
display: inline-block;
}
nav {
padding: 25px;
}
nav ul, nav:active ul {
display: none;
z-index: 1;
position: absolute;
padding: 20px;
background: #1a1a1a;
right: 20px;
top: 60px;
border: 3px solid #ffffff;
border-radius: 10px 0 10px 10px;
width: 40%;
}
nav:hover ul {
display: block;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0 10px 0;
}
.banner {
padding-top: 86px;
}
.social i {
font-size: 180%;
}
}
<!-- Home page of slothy.cloud -->
<!DOCTYPE html>
<html>
<!--
My small cozy website.
© veryslothysloth 2018
-->
<head>
<!-- Links -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#2e86c1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Open Graph Protocol -->
<meta property="og:url" content="://slothy.cloud" />
<meta property="og:type" content="website" />
<meta property="og:title" content="slothy.cloud | by veryslothysloth" />
<meta property="og:description" content="A small slothy website." />
<meta property="og:image" content="img/slothyicon.png" />
<meta property="og:image:secure_url" content="img/slothyicon.png" />
<!-- Twitter card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="slothy.cloud |by veryslothysloth">
<meta name="twitter:description" content="A small slothy website.">
<meta name="twitter:image" content="img/slothyicon.png">
<meta name="twitter:image:src" content="img/slothyicon.png">
<!-- Data -->
<title>slothy.cloud | by veryslothysloth</title>
<meta charset="utf-8">
<meta name="description" content="A small slothy website.">
<meta name="keywords" content="sloth,slothy,veryslothysloth,file,upload,hosting,lolisafe">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#aed6f1">
</head>
<body>
<header>
<!-- Header -->
<div id="header-inner">
<nav>
<ul>
<li>Home</li>
<li>Cloud</li>
<li>Stat</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<!-- Main Body -->
<div class="container">
<video loop>
<source src="img/alley.mp4" type="video/mp4">
</video>
<!--<div class="container-inner">
<p>Test Text</p>
</div>-->
</div>
<!-- Footer -->
<footer>
<ul class="social">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-steam"></i></li>
<li><i class="fa fa-at"></i></li>
</ul>
</footer>
<!-- Second Footer -->
<footer class="second">
<p>© veryslothysloth</p>
</footer>
</body>
</html>
This may be a completely stupid mistake or small typo but I'm quite tired and can't seem to figure this out myself with my really limited coding skills... I'm quite new to all this. Thanks in advance!
The div .container lies over the nav and menu-icon. So the hover doesnt works.
add a z-index to the header to solve it
header {
z-index: 99;
}
I'm not 100% sure what "they don't work" means, but it does stand out that one of the links is to index.html and the other is to #. The first will reload the current page (assuming the HTML you provided is index.html, the second will scroll the current page to the top. What behavior are you seeing, and what behavior are you looking for?
Related
I want the header which is position:fixed to not move when I put a margin on the #main section. I have seen to try and add padding to the top element, but that did not help. I even tried giving the #email-section some top-margin, but that did not work either. It's almost like the header and main elements are attached. I am a self-taught and self-learning website developer. I'm sorry if this does not make sense. I will try and help you out with any information you want to know about the code. Thank you.
body {
background: url(marble_background_backup.jpg);
}
header {
position: fixed;
display: flex;
width: 100%;
flex-direction: row;
align-items: center;
}
header #header-img {
width: 100px;
margin-left: 20px;
}
header h1 {
font-family: "Abril Fatface";
font-size: 42px;
margin-left: 2%;
width: 60%;
}
#media (max-width: 1550px) {
header h1 {
width: 40%;
}
}
header li {
display: inline;
font-size: 30px;
font-weight: 500;
font-family: "Abril Fatface";
}
header li a {
text-decoration: none;
color: brown;
}
#main {
width: 100%;
margin-top: 100px;
}
#main #email-section {
width: 20%;
margin: 0 auto;
text-align: center;
font-family: "Bebas Neue";
font-size: 30px;
}
#main #email-section h2 {
margin-bottom: 0px;
letter-spacing: 0.05em;
}
#main #email-section input {
width: auto;
margin: auto;
font-size: 20px;
margin-top: 15px;
border: 3px solid brown;
color: brown;
border-radius: 5px;
display: block;
}
#main #email-section input[type=submit] {
background-color: lightyellow;
}
#main #email-section input:hover, #main #email-section input:focus {
background-color: blanchedalmond;
}
#facts {
display: flex;
flex-direction: column;
width: 50%;
margin: 8% auto 0 auto;
font-size: 28px;
}
#facts .facts-boxes {
display: flex;
flex-direction: row;
margin: 3%;
}
#facts .facts-boxes img {
width: 100px;
margin-right: 5%;
}
#facts .facts-boxes #bean-pic {
border-radius: 50%;
}
#facts .liner {
width: 50%;
height: 6px;
background-color: brown;
margin: 0 0 0 auto;
padding: 0;
transform: skewX(-40deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/styler.css">
<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=Abril+Fatface&family=Pacifico&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<title>Lion's Club Product Page</title>
</head>
<body>
<header>
<img id='header-img' src="lion1.png">
<h1>Lions Club Coffee House</h1>
<ul>
<li>| Learn</li>
<li> | Pricing</li>
<li> | About |</li>
</ul>
</header>
<main id="main">
<section id="email-section">
<h2>Know where your coffee comes From</h2>
<form action="#">
<input type="email" id="email" placeholder="Enter your email">
<input type="submit" id="submit" value="keep me informed">
</form>
</section>
<section id="facts">
<div class="facts-boxes"><img src="/plant.svg" alt="plant picture"><h3>Ethically sourced from trusted coffee farms</h3></div>
<hr class="liner">
<div class="facts-boxes"><img src="/coffee_bean.jpg" id="bean-pic"><h3>New Varieties Weekly</h3></div>
<hr class="liner">
<div class="facts-boxes"><img src="/trophy.svg"><h3>Trained Baristas inhouse</h3></div>
<hr class="liner">
<div class="facts-boxes"><img src="/medal_first.svg"><h3>Quality Unmatched</h3></div>
<hr class="liner">
</section>
set top:0; to your header
it will probably fixed, if not try adding another element with same height as your header... an empty div can help and it won't be visible because it will be under header only works as you want
The fixed <header> element is getting its default position based on the layout of the page (which includes the margins). If you want to explicitly specify its position, you can just do:
header {
top: 0;
}
I need some help with my messy code (excuse me for having lot of text in my native language). I need to fit the IFRAME in between head and footer of the site, so it will look the same on every monitor (resolution).
Thanks!
body {
margin: 0;
background-image: linear-gradient(to right, #292c33, #a0b2d0, #dee9f6, #a0b2d0, #292c33);
}
p{
color: #272727;
text-align: left;
display: block;
font-family: 'Montserrat', sans-serif;
padding-left: 14px;
font-size: 12px;
text-decoration: none;
// nadefinování písma na stránce
}
.nav{
background-color: #eaeaea;
overflow: hidden;
}
.nav a{
float: left;
display: block;
color: #272727; // barva fontu
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 100%;
border-bottom: 3px solid transparent;
font-family: 'Montserrat', sans-serif;
height: 30px;
}
.nav a:hover{
border-bottom: 3px solid #310a0b;
}
.nav a.active{
border-bottom: 3px solid #b50c0f;
}
.fotka{
display: block;
float: right;
width: 5%;
height: 5%;
margin: 12px;
}
footer{
padding: 1px;
background-color: #eaeaea;
color: #272727;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
position: fixed;
bottom: 0;
width: 100%;
}
.zvideo{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 0%;
}
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='icon' href='favicon.ico?' type='image/x-icon'/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<title>Hlavní stránka</title>
</head>
<body>
<div class="nav">
<a class="active" href="index.html">Domů</a>
Zaklínač
Hry
Knížky
<img class="fotka" alt="logo stránky" src="logo.png">
</div>
<!--NÁSLEDUJE DIV IFRAMU-->
<div class="zvideo">
<iframe class="zvideo" src="https://www.youtube.com/embed/hquuwfa3FCo?autoplay=1&mute=1" width="1152px" height="648px" frameborder="0" allow="autoplay"></iframe>
</div>
<footer>
<p>Autor: Jan Michalisko</p>
<p>Můj email: hachikolp#gmail.com</p> <!--mailto: mi přišel velmi barbarský, takže jsem tam nechal jenom paragraf-->
</footer>
</body>
</html>
I hope that you will be able to identify what is footer, head etc., i am really not a good at coding yet, lol. Thank you for help!
According to the comments, you just trying to center an iframe. The I in iframe stands for inline. So the correct name for the <iframe> tag is: inline frame. As the name indictaes, it is not a block level element but an inline element. As such it can not be centered by using margin: 0 auto; by default. So you need to add display: block; first, in order to change the iframe into a block level element.
iframe {
display: block;
margin: 0 auto;
background-color: blue;
}
<iframe src="">Just a Test</iframe>
I am currently making my study project page. I want it to be responsive as it is a part of it.
However, when the screen size is to small words in head, section and body are overlapping. I can't make the words go to another line if there is not enough space for all of them (for whole sentence). I've tried using word-break, but it didn't work. Does anyone have idea what can I do to change it?
<html lang="pl-PL">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="css.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="My hobby page.">
<meta name="keywords" content="books, hobby">
<meta name="author" content="Bogna Gondek">
<link rel="stylesheet" href="css.css">
<script type="text/javascript" src="js.js"></script>
<title>Książki Moje Hobby | Witamy</title>
</head>
<body>
<header>
<h1>Książki Moje Hobby</h1>
<nav>
<ul>
<li><a class="aktywny" href="strona_główna.html">Strona Główna</a></li>
<li>Kontakt</li>
</ul>
</nav>
</header>
<div id="wnętrze">
<section>
<h2>„Bajki są więcej niż prawdą: nie dlatego, że mówią nam, że smoki istnieją, ale dlatego, że mówią, że smoki można pokonać.”</h2>
<h3>― Neil Gaiman, „Coraline"</h3>
</section>
</div>
<footer>
Książki Moje Hobby, Copywright © 2019
</footer>
</body>
</html>
body
{
font-family: Times, Courier, Verdana, Comic, Arial;
font-size: 20px;
line-height: 2px;
padding:0;
margin: 0;
background-color: white;
}
header
{
width: 100%;
margin: auto;
overflow: hidden;
padding-top: 20px;
min-height: 70px;
background-color: #404040;
}
header h1
{
margin-left: 20px;
float:left;
color: #f2f2f2;
}
header nav
{
float:right;
margin-top:10px;
margin-right: 20px;
margin-bottom: 20px;
}
header li
{
float:left;
display:inline;
padding: 0 20px 0 20px;
}
header a
{
text-decoration: none;
color: #f2f2f2;
font-size: 22px;
}
header a:hover
{
font-weight: bold;
}
header .aktywny
{
color: #b3b3b3;
}
div#wnętrze
{
max-width:100%;
height: 100%;
margin: auto;
overflow: hidden;
background:url("obrazki/glownyobrazek.jpg") no-repeat 0;
color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
section
{
background-color: red;
max-width: 80%;
word-wrap: break-all !important;
}
footer
{
padding: 20px;
margin-top: auto;
background-color: #404040;
text-align: center;
color: #f2f2f2;
}
The issue is the line-height you have set on the body.
body
{
font-family: Times, Courier, Verdana, Comic, Arial;
font-size: 20px;
line-height: 1;
padding:0;
margin: 0;
background-color: white;
}
I have 3 items (boxes) within my flexbox that I want to use as hyperlinks. However, when I wrap the in tags it completely breaks the layout. How can I set each item (box) as a hyperlink so that users can click the entire area and it takes them to another website? As of now, I have the text within the boxes set as links. But I want to use the entire box as a link.
Here is a codepen for it: https://codepen.io/mrhoward/pen/dqqOxj
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="shortcut icon" href="img/misc/favicon.png">
<meta name="description" content="">
<meta name="author" content="">
<title>Flexbox Problem.</title>
<link href="css/ton.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
</head>
<body>
<h1 class="col">Each Square as Hyperlink</h1>
<h2 class="col">This is getting annoying</h2>
<div class="maincontain">
<div class="col gaming"><h3 class="title">1</h3></div>
<div class="col music"><h3 class="title">2</h3></div>
<div class="col dev"><h3 class="title">3</h3></div>
</div>
</body>
</html>
CSS:
body {
background: #333;
color: #fff;
padding: 20px;
}
a {
text-decoration: none;
}
/* FLEXBOX */
* {
box-sizing: border-box;
}
.col {
padding: 20px;
}
.maincontain {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: space-between;
}
.maincontain .col {
width: 32%;
height:400px;
align-items: stretch;
}
#media only screen and (max-width: 40em) {
.maincontain {
flex-direction: column;
height: 300px;
margin: 0 0 10px 0;
}
}
#media only screen and (max-width: 40em) {
.maincontain .col {width: 100%;}
.maincontain h3 { font-size: 1.3vh}
}
/* Item Stylig */
.gaming {
background: #d836eb;
}
.music {
background: #0000ff;
}
.dev {
background: #00ff00;
}
/* Font Styling */
h1 {
font-size:5vw;
font-family: 'Open Sans', sans-serif;
font-weight: lighter;
text-align: center;
padding: 50px;
}
h2 {
font-size:2vw;
font-family: 'Press Start 2P', cursive;
text-align: center;
padding: 0px 0px 20px 0px;
}
h3 {
font-size: 1.3vw;
font-family: 'Press Start 2P', cursive;
padding-top: 10px;
object-fit: cover;
}
.title{
color: white;
text-shadow: 1px 1px 4px #000000;
}
check this example:
<div id="select">
<p class="options left">
<a id="leftq" href="#selectionSet">the quick brown fox jumps over the lazy</a>
</p>
<p class="options right">
<a id="rightq" href="#selectionSet">dog</a>
</p>
</div>
#select {
color: #fff;
float: left;
height: 188px;
width: 631px;
}
#select p.options {
color: #FFFFFF;
float: left;
font-family: 'ComfortaaBold',cursive;
font-size: 20px;
height: 100%;
margin: 0 auto;
text-align: center;
width: 48%;
}
p.options.left {
align-items: center;
background: none repeat scroll 0 0 #EBEBEB;
border-bottom-left-radius: 100px;
border-right: 2px solid #FFFFFF;
border-top-left-radius: 100px;
display: flex;
justify-content: center;
padding-left: 5px;
padding-right: 5px;
}
p.options.right {
align-items: center;
background: none repeat scroll 0 0 #EBEBEB;
border-bottom-right-radius: 100px;
border-left: 2px solid #FFFFFF;
border-top-right-radius: 100px;
display: flex;
justify-content: center;
padding-left: 5px;
padding-right: 5px;
}
#select p.options a {
color: #636363;
padding: 80px 0;
text-decoration: none;
display:block;
width:100%;
}
#select p.options a:hover {
color: #FFFFFF;
}
p.options.right:hover, p.options.left:hover {
background-color: #00AEEF !important;
}
.rightq {
width: 100%;
}
Below is a link to a pen I forked and saved =>
https://codepen.io/kipomaha/pen/OooWXL
Below is the HTML, I changed the class from the div and put it onto the a element that I wraps the div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="shortcut icon" href="img/misc/favicon.png">
<meta name="description" content="">
<meta name="author" content="">
<title>Flexbox Problem.</title>
<link href="css/ton.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
</head>
<body>
<h1 class="col">Each Square as Hyperlink</h1>
<h2 class="col">This is getting annoying</h2>
<div class="maincontain">
<div><h3 class="title">1</h3></div>
<div><h3 class="title">2</h3></div>
<a class="col dev" href="#"><div><h3 class="title">3</h3></div></a>
</div>
</body>
</html>
Try adding the <a> tag inside <h3> element like below
<h3><a hrer =""><a></h3>
With
. maincontain a{
display :block;
}
Cheers! So I've got this page, you know? And I'm practicing some of this html/css stuff in my spare time, it looks fun, and I've got this title on my front page and I want to add a subtitle under it, that is aligned to the left of the title, but I've got no idea and I can't find it anywhere on the web. I've got knackered, and I'm no longer in the mood. I marked the place where I want to slap the text.
<!DOCTYPE html>
<html lang="ro">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Anime-uri online, cu subtitrare în limba română." />
<meta name="author" content="Redd" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<title>Taciturn | 沈黙寡言</title>
<link rel="stylesheet" type="text/css" href="/assets/css/bss.css" />
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1>沈黙寡言</h1>
<a class="button" href="/portal.php">Portal</a>
</div>
</div>
</section>
</body>
#import url('https://fonts.googleapis.com/css?family=Raleway');
#import url('https://fonts.googleapis.com/css?family=Oswald');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background: url(/assets/img/biX0.jpg) no-repeat;
display: table;
top: 0;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
max-width: 500px;
margin: 0 auto;
text-align: center;
}
.content h1 {
font-family: 'Raleway', sans-serif;
color: #AE070A;
text-shadow: 0px 0px 300px #000;
font-size: 600%;
-webkit-text-stroke: 0.5px #FFF;
}
.button {
border-radius: 9px;
font-family: 'Oswald', sans-serif;
color: #036AB1;
font-size: 140%;
padding: 10px 20px;
border: solid #036AB1 3px;
text-transform: uppercase;
text-decoration: none;
}
.button:hover {
color: #AE070A;
border: solid #AE070A 3px;
}
/* Paragraph
p {
font-size: 160%;
line-height: 210%;
text-align: justify;
margin: 3%;
font-family: sans-serif;
}
Paragraph */
#media screen and (max-width: 768px) {
.content h1 {
font-size: 250%;
}
.button {
font-size: 110%;
padding: 7px 15px;
}
p {
font-size: 100%;
line-height: 160%;
}
}
align left in css will do, but you need put your sub title inside same code block.