I'm trying to make this background image fit the width of the browser window without scrolling horizontally. I'm also running into issues with centering everything on the page because of this. Unfortunately this issue keeps occuring in my recent projects, and I've tried everything I can think of to solve it.
Is it something wrong with my code, the image sizes, am I missing something?
body {
margin: 0 auto;
padding: 0;
width: 100%;
height: 100%;
}
.main-nav {
display: none;
font-family: 'Yantramanav', sans-serif;
}
.logo {
color: #fff;
font-family: 'Yantramanav', sans-serif;
position: absolute;
top: 70;
left: 15;
font-size: .5em;
}
.promo {
position: fixed;
top: 0;
z-index: 99;
padding: 10px;
width: 100%;
height: 60px;
background-color: #000;
color: #fff;
font-size: .7em;
text-align: center;
}
.welcome {
color: #fff;
font-family: 'Yantramanav', sans-serif;
background-color: lightgrey;
background:
linear-gradient(#303030, transparent 90%),
url('../imgs/camerabg.jpg') no-repeat center;
background-size: cover;
height: 100%;
width: 100%;
text-align: center;
margin-top: -10px;
padding: 200px;
}
.welcome h1 {
font-size: 2em;
}
.welcome a {
text-decoration-style: underline;
color: lightgrey;
font-size: 2em;
display: inline-block;
}
.welcome ul {
list-style-type: none;
}
.location {
font-size: 1.5em;
margin-top: 10px;
padding: 10px;
border: 2px solid lightgrey;
color: lightgrey;
}
.products {
font-family: 'Raleway', sans-serif;
height: 150px;
width: 100%;
background-color: #000;
background: linear-gradient(#181818, transparent 90%),
url('../imgs/oldcamera.jpg') no-repeat center;
background-size: cover;
color: #fff;
text-align: center;
padding: 150px;
margin-bottom: 40px;
}
.products h1 {
font-size: 3em;
}
.products a {
padding: 10px;
border: 2px solid lightgrey;
color: lightgrey;
font-size: 2em;
}
/*===============================
Intro
==============================*/
.intro1, .intro2 p {
font-family: 'Yantramanav', sans-serif;
}
.intro1, .intro2 span {
font-family: 'Yantramanav', sans-serif;
}
<DOCTYPE! html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Raleway|Yantramanav" rel="stylesheet">
<link rel="stylesheet" href="styles/stylesheet.css">
<title>TITLE HERE</title>
</head>
<body>
<header>
<div class="promo">
<p>BUY 1 GET 1 Free 1/2 OFF CLOCK FRAME COMBOS<br>
*Offer Valid 5/1/18. May not be combined with another offer or promotion. While supplies last.*<p>
</div>
<div class="logo">
<h1> Name Here</h1>
</div>
<div class="main-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li> Hire Us</li>
</ul>
</div>
<div class="welcome">
<h1>Welcome To Our New Site</h1>
<p>Let us help you with your best moments.</p>
<ul>
<li>Order Now</li>
<li><a class="location" href="#">Find Our New Location</a></li>
</ul>
</div>
</header>
<div class="intro1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</span>
</div>
</body>
</html>
Related
Im having some problems with this web page that I am building out. The code is pasted below but you can also take a look at it here: www.petermingione.com/Webcast2/
When the page loads on mobile devices the page is zoomed in and I have to pinch to get the zoom to the initial scale. I am confused as to why this is happening since I have included the viewport meta-tag:
Thank you very much for any help that you can give me. Pete
HTML:
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Lorem ipsum dolor sit amet</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- strongly recommended by the Bootstrap -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<div class="container">
<header class="header">
<div class="tbl-row">
<div class="header-left">
<h1>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing</span><br/>
Excepteur sint occaecat cupidatat<br/>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
</h1>
</div>
<div class="header-spacer"></div>
<div class="header-right">
<p>Ut enim ad minim veniam, quis nostrud</p>
</div>
</div>
</header>
<div class="small-box"></div>
<!-- CENTER TABLE -->
<div class= "center-table">
<!-- CENTER ROW -->
<div class= "center-row">
<div class="vert-spacer"></div>
<!-- MAIN -->
<main>
<div class="main-body">
<div class="main-body-header">
<p><strong>WEBCAST</strong>TRANSMITTED LIVE ON</p>
<p>Sunday, 9 December 2018, 3:00 (EST) from New York, NY</p>
<div class="hr"></div>
<p><strong>Webcast:</strong><em>To View From Your Home or Office, Register at:</em></p>
<p>www.irure dolor in reprehenderit.com</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
<p class="foot-note">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
<p class="co-chairs"><span>Co-Chairs:</span> John Jones (Brazil), George Orwell (London, England)</p>
<table class="table">
<thead>
<tr class="header">
<th colspan="3">agenda</th>
</tr>
</thead>
<tbody>
<tr>
<td>09:00 – 09:05</td>
<td>Welcome and Introduction</td>
<td>Co-Chairs</td>
</tr>
<tr>
<td>09:05 – 09:30</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>John Jones</td>
</tr>
<tr class="qa">
<td>09:30 – 09:35</td>
<td colspan="2">Q&A</td>
</tr>
<tr>
<td>09:35 – 10:00</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>George Orwell</td>
</tr>
<tr class="qa">
<td>10:00 – 10:05</td>
<td colspan="2">Q&A</td>
</tr>
<tr>
<td>10:05 – 10:30</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>Who Cares</td>
</tr>
<tr class="qa">
<td>10:30 – 10:35</td>
<td colspan="2">Q&A</td>
</tr>
<tr class="break">
<td>10:35 – 11:05</td>
<td colspan="2">Break</td>
</tr>
<tr>
<td>11:05 – 11:30</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>Sam Man</td>
</tr>
<tr class="qa">
<td>11:30 – 11:35</td>
<td colspan="2">Q&A</td>
</tr>
<tr>
<td>11:35 – 12:35</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
<td>Faculty</td>
</tr>
<tr>
<td>12:35 – 12:45</td>
<td>Closing Remarks</td>
<td>Co-Chairs</td>
</tr>
</tbody>
</table>
<!-- /table -->
</div>
<!-- /main-body -->
</main>
<!-- /MAIN -->
<!-- ASIDE -->
<aside>
<div class="main-body">
<p class="list-header">Co-Chairs</p>
<ul class="faculty-list">
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
</ul>
<p class="list-header">faculty</p>
<ul class="faculty-list">
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
<li>
<span>John Jacob</span><br/>
Expert in Stuff<br/>
Lorum ipsum Division<br/>
Department of Lorem Ipsum<br/>
200 Car Talk Tower, Dewey Cheatum & Howe<br/>
Cambridge, MA
</li>
</ul>
</div>
<!-- /main-body -->
</aside>
<!-- /ASIDE -->
</div>
<!-- /CENTER ROW -->
</div>
<!-- /CENTER TABLE -->
<!-- FOOTER -->
<footer>
<p>
Copyright © 2018 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt<br/>
XXX-999999-YY
</p>
<div class="logo">LOGO GOES HERE</div>
</footer>
<!-- /FOOTER-->
</div>
<!-- /container -->
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
html {
font-size: 16px;
}
html, body, p {
margin: 0;
padding: 0;
}
body {
font-family: "Arial Narrow", Helvetica, sans-serif;
color: black;
font-size: 16px;
font-size: 1rem;
}
p {
line-height: 1;
margin: 0;
padding: 0;
}
.container {
padding: 0;
max-width: 1239px;
margin: 0 auto;
margin-bottom: -137px;
width: fit-content;
}
header {
display: table;
vertical-align: top;
height: 200px;
z-index: 1004;
}
.header-left {
display: table-cell;
vertical-align: top;
width: 78%;
color: #fff;
background-color: #00948f;
box-shadow: 7px 15px 18px #aaa;
-webkit-box-shadow: 7px 15px 18px #aaa;
position: relative;
}
.header-left h1 {
font-size: 50px;
font-size: 3.125rem;
margin: 0;
letter-spacing: 2px;
background-color: #00948f;
width: 100%;
padding: 20px 85px 30px 138px;
line-height: 1.1;
margin: 0;
}
.header-left h1 span {
font-size: 30px;
font-size: 1.875rem;
line-height: 1;
display: inline-block;
margin-bottom: 20px;
}
.header-spacer {
display: table-cell;
width: 2%;
}
.header-right {
display: table-cell;
width: 21%;
background-color: #9fd2d0;
box-shadow: 7px 15px 18px #aaa;
-webkit-box-shadow: 7px 15px 18px #aaa;
z-index: 1002;
padding: 175px 61px 0 20px;
line-height: 1.3;
font-size: 28px;
font-size: 1.75rem;
}
.small-box {
width: 8%;
height: 33px;
background-color: #9fd2d0;
z-index: 1005;
padding: 0;
}
.center-table {
display: table;
width: 100%;
margin-top: 10px;
}
.center-row {
display: table-row;
}
.vert-spacer {
display: table-cell;
background-color: #e6e7e8;
z-index: -2;
width: 8%;
}
main {
display: table-cell;
width: 69%;
}
.main-body {
margin-left: 20px;
height: 100%;
}
.main-body p:first-child {
font-size: 44px;
font-size: 2.75rem;
}
.main-body p:nth-child(2) {
font-size: 27px;
font-size: 1.6875rem;
}
.main-body .hr {
border-top: 10px solid white;
margin: 20px 0;
}
.main-body p:nth-child(3) {
font-size: 27px;
font-size: 1.6875px;
}
.main-body-header {
background-color: #9fd2d0;
padding: 10px 25px 15px;
margin-bottom: 20px;
}
.main-body-header p:first-child {
font-size: 44px;
font-size: 2.75rem;
margin-bottom: 10px;
}
.main-body-header p:nth-child(2) {
font-size: 27px;
font-size: 1.6875rem;
}
.main-body-header hr {
border-width: 10px;
}
.main-body-header p:nth-child(4) {
font-size: 30px;
font-size: 1.875rem;
text-align: center;
margin-bottom: 5px;
}
.main-body-header p:nth-child(5) {
font-size: 24px;
font-size: 1.5rem;
text-align: center;
margin-bottom: 10px;
}
.main-body-header p:nth-child(6) {
font-size: 24px;
font-size: 1.5rem;
}
.foot-note {
font-size: 20px !important;
font-size: 1.25rem !important;
margin-bottom: 1.25rem;
}
.co-chairs {
font-size: 22px !important;
font-size: 1.375rem !important;
margin-bottom: 20px;
}
.co-chairs span {
color: #00837c;
}
table {
font-size: 23px;
font-size: 1.4375rem;
border-collapse: collapse;
}
table th {
text-align: left;
padding-left: 20px;
}
table tr td {
padding: 5px;
}
table tr td:first-child {
width: 20%;
}
table tr td:nth-child(2) {
width: 55%;
}
table tr td:nth-child(3) {
width: 25%;
text-align: right;
padding-right: 20px;
}
table tr.header {
text-transform: uppercase;
font-size: 28px;
font-size: 1.75rem;
background-color: #00948f;
color: white;
}
table tr.header th {
border-top: 5px solid black;
}
table tr:not(agenda) td {
border-bottom: 3px solid #00948f;
}
table tr.qa {
background-color: #e5f4f4;
}
table tr.break {
background-color: #cdeae9;
}
aside {
padding: 0 20px;
display: table-cell;
width: 21%;
text-align: top;
}
aside .list-header {
text-transform: uppercase;
color: #004a99;
font-size: 28px !important;
font-size: 1.75rem !important;
margin-bottom: 10px;
}
aside .faculty-list {
list-style: none;
padding: 0;
font-size: 18px;
font-size: 1.125rem;
color: #a0a0a0;
}
aside .faculty-list li {
margin-bottom: 15px;
}
aside .faculty-list li span {
display: inline-block;
color: black;
font-size: 23px;
font-size: 1.277777778rem;
}
footer {
position: absolute;
left: 0;
right: 0;
bottom: 137px;
z-index: 10000;
position: relative;
min-width: 420px;
background-color: #00948f;
width: 100%;
height: 402px;
z-index: -2;
}
footer p {
position: absolute;
left: 20px;
bottom: 30px;
font-size: 19px;
font-size: 1.1857rem;
line-height: 1.3;
}
footer .logo {
position: absolute;
right: 60px;
bottom: 30px;
width: 90px;
height: 90px;
background-color: #9fd2d0;
display: inline-block;
}
#media screen and (max-width: 767px) {
.header-left,
.header-right {
display: block;
width: auto;
}
.header-left {
margin: 0 20px;
}
.header-left h1 {
font-size: 40px !important;
font-size: 2.5rem !important;
padding: 20px !important;
}
.header-left h1 span {
font-size: 15px !important;
font-size: 0.9375rem !important;
}
.header-right {
padding: 20px !important;
margin: 30px 20px 0;
}
.small-box {
display: none;
}
.vert-spacer {
display: none;
}
main, aside {
display: block;
width: auto;
}
.main-body {
margin: 20px;
}
.main-body-header p:first-child {
text-align: center;
font-size: 40px;
font-size: 2.5rem;
}
}
#media screen and (max-width: 1120px) {
footer p {
bottom: 100px;
}
footer .logo {
right: auto;
left: 20px;
bottom: 5px;
}
}
Maybe you should try to make it maximum scale to 0. However, it will disable the zoom feature. you cannot pinch out to zoom.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
I am trying to create a fixed nav. For the most part, it works. But I want to center the h1 for responsive design. I could just push it away from the burger menu but then it wouldn't be responsive and bang in the middle.
Also I would like to push the .intro paragraph down away from the top. But every time I do a margin gap appears at the top, and I can't for the life of me remember how to get rid of this.
Thank you to anyone who takes a look. Means a lot! Hopefully one day I can repay the favor!
Below is my HTML and CSS. I also used a standard normalize.css, and some Js but I don't think you will need that. If you do, let me know:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Code Review</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
</head>
<body>
<header>
<!-- Introduction -->
<div class="background">
<nav class="navbar">
<span class="open-slide" onclick="openSideMenu()">
<!-- <a href="#" onclick="openSideMenu()">-->
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="4"/>
<path d="M0,14 30,14" stroke="#000" stroke-width="4"/>
<path d="M0,23 30,23" stroke="#000" stroke-width="4"/>
</svg>
<!-- </a>-->
</span>
<div id="main">
<h1>Luke Bennett</h1>
</div>
<!--
<ul class="navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Resume</li>
<li>Contact</li>
</ul>
-->
</nav>
<!-- Side Navigation Bar -->
<div id="side-menu" class="side-nav">
<span class="btn-close exit" onclick="closeSideMenu()">×</span>
Home
<a onclick="closeSideMenu()" href="#about">About</a>
<a onclick="closeSideMenu()" href="#portfolio-link">Portfolio</a>
<a onclick="closeSideMenu()" href="#resume-link">Resume</a>
<a onclick="closeSideMenu()" href="#contact">Contact</a>
</div>
<p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</header>
<main>
<!-- About Me -->
<div class="about-me"><a id="about"></a>
<h2>About Me</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<!-- Portfolio -->
<div class="portfolio"><a id="portfolio-link"></a>
<h2>Portfolio</h2>
<!-- Front Page -->
<img src="img/well-being/well-being.png" alt="Donjas-Well-Being-For-Kids"/>
</div>
<!-- Resume -->
<div class="resume">
Download Resume
</div>
<!-- Contact Form -->
<div class="contact-form"><a id="contact"></a>
<form>
<fieldset>
<legend>Contact Form</legend>
<ul>
<li>
<label for="name">Name</label>
<input required type="text" id="name" name="full_name" placeholder="Required">
</li>
<li>
<label for="email">Email</label>
<input required type="text" id="email" name="email_address" placeholder="Required">
</li>
<li>
<label for="message">Message</label>
<textarea id="message" name="other_topics"></textarea>
</li>
<button type="submit">Hello!</button>
</ul>
</fieldset>
</form>
</div>
</main>
<footer>
<p>My name is Luke Bennett and I am a Human - Luke Bennett</p>
</footer>
<script src="javascript/menu.js"></script>
*,
input,
textarea,
button {
font-family: 'Lato', sans-serif;
}
h1 {
font-size: 1.7rem;
font-weight: 300;
letter-spacing: 3px;
}
h2 {
font-size: 1.4rem;
font-weight: 700;
letter-spacing: 2px;
}
p {
letter-spacing: 1px;
}
ul {
list-style: none;
padding: 0;
}
a {
text-decoration: none;
}
/************************************************************
HEADER
*************************************************************/
.navbar {
display: flex;
position: fixed;
overflow: hidden;
height: 40px;
padding: 16px 16px;
align-items: center;
}
#main {
margin: 0 auto;
}
#main a {
color: black;
}
.background {
background: linear-gradient(0deg, #fff, transparent 40%),
#333333 url('../img/sophie.jpg') no-repeat center;
background-size: cover;
padding-bottom: 50%;
margin-bottom: 30px;
}
.intro {
background: white;
opacity: 0.65;
line-height: 40px;
letter-spacing: 4px;
padding: 20px;
margin: 0 15% 15%;
}
/************************************************************
SIDE NAV
*************************************************************/
svg {
padding-top: 3px;
transition: 1s;
/*
border: 1px solid black;
border-radius: 50%;
*/
}
svg:hover {
opacity: 0.3;
}
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #333333;
opacity: 0.9;
overflow-x: hidden;
text-align: center;
transition: 0.5s;
padding-top: 90px;
}
.side-nav a,
.btn-close {
display: block;
font-weight: 400;
color: white;
padding: 15px;
transition: 1s;
}
.side-nav a:hover,
.btn-close:hover {
background: white;
color: black;
font-weight: 400;
cursor: pointer;
}
.side-nav .btn-close {
position: absolute;
top: 0;
right: 22px;
font-size: 36px;
margin-left: 50px;
}
/************************************************************
MAIN
*************************************************************/
main {
margin-bottom: 0
}
.about-me {
margin-bottom: 40px;
}
.about-me h2 {
margin-bottom: 30px;
}
.about-me h2,
.about-me p {
text-align: center;
margin-left: 10%;
margin-right: 10%;
}
.about-me p {
font-weight: 300;
margin-bottom: 0px;
}
/************************************************************
PORTFOLIO
*************************************************************/
.portfolio {
background: #DCEAF5;
text-align: center;
padding: 20px 20px 50px;
}
.portfolio h2 {
color: black;
margin-bottom: 40px;
}
.portfolio img {
width: 80%;
padding: 3px;
transition: 1s;
margin-bottom: 10px;
border: 2px solid grey;
}
.portfolio img:hover {
opacity: 0.6;
}
/************************************************************
RESUME
*************************************************************/
/* #DCEAF5 #659EB8 */
.resume {
display: flex;
background: #969DA3;
padding: 10%;
}
.resume a {
display: block;
background: #DCEAF5;
color: black;
font-size: 1.2rem;
text-align: center;
margin: auto;
padding: 7%;
border-radius: 5px;
transition: 0.5s;
}
.resume a:hover {
opacity: 0.6;
}
/************************************************************
CONTACT
*************************************************************/
.contact-form {
background: #cc8c33;
height: 500px;
padding: 20% 10%;
}
fieldset {
border: 0;
}
legend {
font-size: 1.5rem;
font-weight: 400;
text-align: center;
color: white;
}
label {
display: block;
color: white;
margin-bottom: 10px;
}
input,
textarea {
box-sizing: border-box;
border-radius: 5px;
padding: 10px;
}
input:focus,
textarea:focus {
border: 2px solid #969DA3;
outline: none;
}
input {
border-style: none;
width: 100%;
border: 2px solid #cc8c33;
margin-bottom: 10px;
transition: 0.5s;
}
::placeholder {
text-align: right;
font-style: italic;
font-size: 0.7rem;
padding-right: 1px;
}
/* Textarea styling */
textarea {
height: 110px;
resize: none;
width: 100%;
margin-bottom: 30px;
border: 2px solid #cc8c33;
}
/* Button styling */
button {
border: none;
background: lightblue;
color: white;
font-weight: 700;
font-size: 1.1rem;
letter-spacing: 1px;
width: 100%;
border-radius: 5px;
padding: 20px;
transition: 0.5s;
}
button:hover {
background: #DCEAF5;
color: black;
}
/************************************************************
SOCIAL
*************************************************************/
footer {
background: lightblue;
height: 500px;
}
I'm working on my portfolio, and I'm trying to add some bio text. I want everything to be aligned with my name. I've been successful at making a short tagline line up, but when I add a block with a lot of text, everything aligns to that block, or to the parent.
How can I restrict the width of the parent ( to that of the headline
I've put together a Codepen to demonstrate what I mean.
I'd preferably like to do it without JS
Snippet (doesn't look great in the small window):
header {
display: inline-block;
width: 100%;
margin: 16px 0;
color: #333;
text-align: center;
}
header .header-contents {
margin: auto;
max-width: 920px;
}
header .header-contents .title {
display: inline-block;
font-family: sans-serif;
font-weight: 400;
font-size: 96px;
}
header .header-contents .tagline {
display: block;
text-align: right;
font-family: sans-serif;
font-weight: 300;
font-size: 36px;
}
header a {
color: black;
text-decoration: none;
}
header a:hover {
text-decoration: none;
}
.bio-text {
text-align: center;
font-family: sans-serif;
font-size: 18px;
line-height: 2em;
font-weight: 300;
margin: 16px auto;
}
<header>
<div class="header-contents">
<div class="title">
First Lastname
<div class="tagline">
Tagline goes here
</div>
<!-- putting .bio-text here moves the tagline to the right margin -->
</div>
<div class="bio-text" id="about">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.</p>
</div>
</div>
</header>
Try to use flex:
HTML:
header {
display: flex;
flex-direction: row;
width: 100%;
margin: 16px 0;
color: #333;
text-align: center;
}
header .header-space {
flex: 1;
}
header .header-contents {
flex: 0;
margin: auto;
max-width: 960px;
}
header .header-contents .myname {
white-space: nowrap;
}
header .header-contents .title {
font-family: sans-serif;
font-weight: 400;
font-size: 96px;
}
header .header-contents .tagline {
display: block;
text-align: right;
font-family: sans-serif;
font-weight: 300;
font-size: 36px;
}
header a {
color: black;
text-decoration: none;
}
header a:hover {
text-decoration: none;
}
header .bio-text {
width: inherit;
text-align: center;
font-family: sans-serif;
font-size: 18px;
line-height: 2em;
font-weight: 300;
margin: 16px auto;
}
<header>
<div class="header-space"></div>
<div class="header-contents">
<div class="title">
<div class="myname">
First Lastname
</div>
<div class="tagline">Tagline goes here</div>
<div class="bio-text" id="about">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.</p>
</div>
</div>
</div>
<div class="header-space"></div>
</header>
I'm making a page layout and I can't apply styles only to the footer for some reason, I've reviewed the code and did find anything wrong (But i'm sure there bc its not working -_-) I've tried rewriting the code and still not working.
//*GENERAL*//
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
border: 1px solid black;
}
.logo img {
width: 100px;
margin: 50px auto 10px;
display: block;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: black;
}
//*NAVIGATION*//
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
padding: 10px;
text-align: center;
margin: 5px;
}
nav ul li a {
color: black;
}
//*HERO*//
.wrap {
height: 400px;
padding: 1px
}
.head-content {
height: 505px;
background: url(../img/hero.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 40% 50%;
padding: 10px;
text-align: center;
}
.head-content h1, a {
color: white;
}
.head-content h1 {
margin-top: 130px;
font-size: 3em;
}
.head-content .btn {
padding: 15px 20px;
margin: 10px auto;
background: #FF0080;
border-radius: 3px;
display: inline-block;
border-radius: 5px;
}
.btn:hover {
color: #FF0080;
background: white;
font-weight: bold;
transition: .25s;
}
//*LEARN MORE*//
.wrap-services {
height: 1400px;
padding: 1px;
margin: 1px;
}
.headline {
color: rgba(0,0,0, .8);
text-align: center;
padding: 10px;
height: 100px;
margin: 70px 0 0 0;
}
.headline h2 {
font-size: 1.5em;
padding: 0;
margin: 0;
}
.headline h3 {
color: rgba(0,0,0, .4);
font-weight: lighter;
font-size: 1em;
}
.ser-1,
.ser-2,
.ser-3 {
height: 400px;
padding: 10px;
margin: 0 2.5%;
text-align: center;
/*border: 1px solid black;*/
}
.ser-1 h3,
.ser-2 h3,
.ser-3 h3 {
border-bottom: 2px solid #FF0080;
padding: 10px;
margin: 5px 5px 30px;
font-size: 1em;
}
.ser-1 p,
.ser-2 p,
.ser-3 p {
color: rgba(0,0,0, .5);
font-size: .9em;
line-height: 2em;
}
//*REVIEWS*//
.wrap-review {
height: 770px;
}
.content-review {
text-align: center;
height: 770px;
background: #FF0080;
color: white;
padding: 1px;
}
.content-review h3 {
margin-top: 80px;
font-size: 1.7em;
}
.review {
background: white;
color: #FF0080;
margin: 20px 2.5%;
border-radius: 2px;
height: 200px;
display: block;
}
.review-content {
text-align: center;
padding: 40px 20px 20px;
}
.review-name {
font-style: italic;
font-weight: bold;
}
.review-name-img {
display: none;
}
//*FORM*//
.wrap-form {
height: 770px;
padding: 1px;
}
.wrap-form-contect {
text-align: center;
height: 770px;
padding: 1px;
margin: 70px 10px 10px;
border: 5px solid black;
}
.wrap-form-contect p {
text-transform: capitalize;
line-height: 1.5em;
font-size: .95em;
}
input,
textarea {
border: none;
background: #eee;
margin: 10px;
padding: 20px;
}
textarea {
padding: 30px;
}
button {
display: block;
margin: 10px auto;
background: #FF0080;
color: white;
border: none;
padding: 20px;
width: 75%;
font: bold 1.4em/1 sans-serif;
}
button:hover {
cursor: pointer;
background: yellow;
color: black;
transition: .5s;
}
//*FOOTER*//
footer {
background: black;
height: 500px;
margin: 500px;
padding: 500px;
width: 90%;
}
<!DOCTYPE html>
<html>
<head>
<title>FSA Doc.</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style/nor.css">
<link rel="stylesheet" type="text/css" href="style/main.css">
</head>
<body>
<header>
<div class="logo">
<img src="img/black.png" alt="FSA Doc.">
</div>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>REVIEWS</li>
<li>CONTACT US</li>
</ul>
</nav>
</header>
<div class="head-content">
<h1>FSA Doc.</h1>
<a class="bth" href="#">CALL (866) 210-1337</a>
<a class="bth" href="#">LEARN MORE</a>
</div>
<div class="headline">
<h2>LEARN MORE</h2>
<h3>about how we help</h3>
</div>
<div class="ser-1">
<h3>SATISFACTION GUARANTEED</h3>
<p>Document Prep Express has a stellar success rate and we strive to provide services will get you the best results possible!</p>
</div>
<div class="ser-2">
<h3>NO UPFRONT FEES</h3>
<p>Period.</p>
</div>
<div class="ser-3">
<h3>WE’RE HERE TO HELP</h3>
<p>Confused? Don’t know where to turn? Our experts will answer all your questions.</p>
</div>
<div class="review">
<h3 class="head-review">what people say</h3>
<div class="review-contienr">
<p class="review">“FSA Doc. saved me from losing my car and apartment! I could not thank Document Prep Express enough.”</p>
<h3 class="reivew-name">Lindsay Anderson</h3>
</div>
<div class="review-contienr">
<p class="review">“Experts in their field! They told me everything to look out for and acted quickly”</p>
<h3 class="reivew-name">Ashley Guthrie</h3>
</div>
</div>
<div class="wrap-form">
<h3>get started</h3>
<p>let us know what can we do for you</p>
<form>
<input value="Your Name" type="text">
<input value="Email" type="text">
<textarea>Your Message</textarea>
<button type="submit">Send</button>
</form>
</div>
<footer>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</footer>
</body>
</html>
Remove the double back slashes from your css comments. Proper css comment syntax looks like this:
/* comment */
I have a section where I have floated content on the left and right. The left content is gonna be bigger that the right (on height) so I want the right content to be vertically centered/aligned to the left content. How can I make that ?
Example image:
The blue content is gonna be mostly h1 and p and the red one just one small image and 1-2 words below it.
Code:
.inner {
background: none repeat scroll 0 0 #FFFFFF;
max-width: 576px;
width: 100%;
padding: 37px 34px 37px 34px;
}
.leftSide {
width: 80%;
float: left;
border-right: 1px solid #f2f2f2;
}
.leftSide a h1 {
font-size: 20px;
color: #3c3c3c;
text-transform: none;
font-family: 'Open Sans light';
}
.leftSide span p {
font-size: 12px;
padding-top: 2px;
}
.leftSide .description {
font-size: 13px;
padding: 15px 0 25px 0;
color: #6a6868;
line-height: 1.4;
font-family: 'Open Sans';
}
.leftSide .button {
background-color: #8D1313;
border-radius: 3px;
color: #FFFFFF;
font-family: 'Open Sans light';
font-size: 13px;
margin-top: 20px;
padding: 7px 10px;
}
.rightSide {
float: right;
width: 15%;
height: 100%;
text-align: center;
}
.rightSide p {
text-align: center;
color: #565656;
font-size: 14px;
font-family: 'Open Sans';
}
<div class="inner clearfix">
<div class="leftSide">
<a href="#">
<h1>Jsut a simple Headline</h1>
</a>
<span>
<p> 15 April / 4 Comments / 434Views </p>
</span>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a class="button" href="#">learn more...</a>
</div>
<div class="rightSide">
<img src="img/author.png" alt="author" />
<p>J.Smith</p>
</div>
</div>
I found a method that works. You will have to tweak it based on your code. JsFiddle here.
HTML:
<div id="myrow">
<div id="content">Content<br/>alpha</div>
<div id="rightside">Right Side</div>
</div>
CSS:
body {
font-family: sans-serif;
font-size: 20pt;
box-sizing: border-box;
}
#myrow {
vertical-align: middle;
width: 100%;
border: solid 1px black;
position: relative;
}
#myrow:after {
content: "";
display: table;
clear: both;
}
#content, #rightside {
display: inline-block;
float: left;
margin: 0 auto;
height: 3em;
text-align: center;
vertical-align: middle;
color: white;
}
#content {
width: 55%;
background-color: #307FFF;
line-height: 1.5em;
}
#rightside {
width 45%;
min-width: 45%;
background-color: #F56362;
line-height: 3em;
}
The line-height is what centers the text or image. You may need to adjust your line-heights to accommodate your content.