I'm making this site and working on second page. However, I have trouble for centering component in the whole viewport. I searched lots of solutions including position, display:table, etc. But, I couldn't know how to use for this situation.
.header {
background-color: #F7F7F7;
padding: 15px;
}
.header h1 {
float: left;
}
.header h1 img {
display: block;
}
.header__nav {
float: right;
}
.header__nav li {
float: left;
display: flex;
align-items: center;
height: 38px;
}
.header__nav li a {
margin-right: 39px;
display: inline-block;
font-size: 20px;
font-weight: bold;
transition: all 0.5s;
}
.header__nav li a::after {
content: '';
width: 0;
height: 2px;
background-color: black;
transition: 0.3s;
display: block;
}
.header__nav li a:hover::after {
width: 100%;
}
.header__nav li button:hover::before {
width: 100%;
}
.contents {
padding: 150px 100px;
}
.contents__inside {
font-family: 'Playfair Display', serif;
text-align: center;
font-size: 1rem;
}
.contents__inside strong {
font-style: italic;
font-size: 1rem;
}
.contents__inside h2 {
margin-bottom: 10px;
font-size: 6rem;
font-weight: bold;
line-height: 1;
}
.contents__inside img {
width: 100%;
}
.contents__inside p {
max-width: 860px;
font-size: 1.7rem;
font-weight: 400;
margin: 0 auto;
}
.info__inside {
font-family: 'Playfair Display', serif;
text-align: center;
font-size: 1rem;
}
.info__inside h2 {
margin-bottom: 30px;
font-size: 4rem;
font-weight: bold;
line-height: 1;
}
.info__inside p {
max-width: 860px;
font-size: 1.7rem;
font-weight: 400;
margin: 0 auto 100px;
}
.info__inside img {
width: 100%;
}
.footer {
background-color: blue;
}
<header class="header clearfix">
<div class="l-wrapper">
<h1><img src="https://pixelicons.com/wp-content/themes/pexelicons/assets/pic/site-logo/logo.png" alt="Logo"></h1>
<nav class="header__nav">
<ul class="clearfix">
<li>View icons</li>
<li>Buy now</li>
<li><button class="menu">menu</button></li>
</ul>
</nav>
</div>
</header>
<section class="contents">
<div class="l-main">
<div class="contents__inside">
<strong>Top quality</strong>
<h2>ICONS</h2>
<p>6,500 unique icons in different categories.
Drawn by hand and designed for perfection.</p>
<img src="https://pixelicons.com/wp-content/uploads/2018/01/Home_slide_space.png" alt="">
</div>
</div>
</section>
<section class="info">
<div class="l-main">
<div class="info__inside">
<h2>Thousands of icons</h2>
<p>6,500 unique icons in 3 style color, line and solid.</p>
<img src="https://pixelicons.com/wp-content/uploads/2018/01/Preview_rd_2.png" alt="">
</div>
</div>
</section>
<footer class="footer">
</footer>
Is there an any proper method to solve this issue? How can I implement like original design of website?
EDIT
I don't wanna solve by using CSS3 property to practice CSS2
IMAGE that I wanna fix
If i understand you, You want to center your items in your div
To do that you can
.yourDivClassName{
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items:center;
justify-content: center;
}
<body>
<div class="yourDivClassName">
<button>example button</button>
<p>example text</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFU7U2h0umyF0P6E_yhTX45sGgPEQAbGaJ4g&usqp=CAU" alt="example image">
</div>
</body>
Related
How can I center my webpage only with html & css? I tried it with margin: auto, margin: 0 auto and also margin-left: auto & margin-right: auto. Nothing seems to work from the things I've read on the internet. I'll show you my code. I want that everything is centered. Every Div. And compatible with mobile Applications.
body {
background-color: white;
font-family: Arial, Helvetica, sans-serif;
}
#header {
display: flex;
justify-content: center;
align-items: center;
color: black;
margin-top: 50px;
font-size: 40px;
font-weight: bold;
}
.social {
float: left;
text-align: center;
margin-bottom: 20px;
position: relative;
right: -220px;
bottom: -70px;
}
.social #spotifylogo {
position: relative;
bottom: -7px;
}
.social #fblogo {
position: relative;
bottom: 1px;
left: -1px;
}
.social #twitterlogo {
position: relative;
bottom: 1px;
left: 6px;
}
.nav {
text-align: center;
color: black;
font-size: 14px;
float: left;
position: relative;
right: -495px;
margin-top: 25px;
}
.nav a:link {
text-decoration: none;
color: black;
margin-right: 15px;
}
.nav a:hover {
color: greenyellow;
}
#headpic {
position: relative;
right: -225px;
bottom: -100px;
}
<h1 id="header">cyberpVnk</h1>
<div class="nav">
Start
Musik-Player
Video-Player
Biografie
Kontakt
</div>
<div class="social">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" width="25" height="25">
<img src="spotify.png" width="40" height="40" id="spotifylogo">
<img src="fbbutton.png" width="26" height="26" id="fblogo">
<img src="https://www.nicepng.com/png/full/84-842524_twitter-logo-in-circular-black-button-twitter-logo.png" width="27" height="27" id="twitterlogo">
</div>
<div id="headpic">
<img src="headpic.jpg" width="900" height="500">
</div>
if you want center items you can use 'flex-box'
something like this
html
<div class="Aligner">
<div class="Aligner-item">…</div>
</div>
and css
.Aligner {
display: flex;
align-items: center;
justify-content: center;
}
for this to work just warp the items with flex box (display: flex) you just put it on your title (h1)
this code is from this article :
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
also there is much more you can do with flex box
can also read abut flex box at w3s
https://www.w3schools.com/css/css3_flexbox.asp
I made several tweaks but mainly removed all the flexbox information - this was the biggest change across the CSS edits. Hope this helps!
body {
background-color: white;
font-family: Arial, Helvetica, sans-serif;
}
#header {
color: black;
margin-top: 50px;
font-size: 40px;
font-weight: bold;
text-align: center;
}
.social {
text-align: center;
margin-bottom: 20px;
}
.nav {
text-align: center;
color: black;
font-size: 14px;
}
.nav a:link {
text-decoration: none;
color: black;
margin-right: 15px;
}
.nav a:hover {
color: greenyellow;
}
#headpic {
display: block;
max-width: 100%;
height: auto;
}
#headpic-image {
display: block;
margin: auto;
}
<h1 id="header">cyberpVnk</h1>
<div class="nav">
Start
Musik-Player
Video-Player
Biografie
Kontakt
</div>
<div class="social">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" width="25" height="25">
<img src="spotify.png" width="40" height="40" id="spotifylogo">
<img src="fbbutton.png" width="26" height="26" id="fblogo">
<img src="https://www.nicepng.com/png/full/84-842524_twitter-logo-in-circular-black-button-twitter-logo.png" width="27" height="27" id="twitterlogo">
</div>
<div id="headpic">
<img id="headpic-image" src="headpic.jpg" width="900" height="500">
</div>
Do not use properties such as top,bottom,left,right to align items unless necessary. It's impossible to get a sensible layout in this way. You do not need to use position: "relative" for each item. A lot of your codes are wrong. I took these parts to comment lines for you to see. You can use flexbox for some structures to center items. Often marginx "auto" will work for inline-block or block-sized elements.
body {
background-color: white;
font-family: Arial, Helvetica, sans-serif;
}
#header {
display: flex;
justify-content: center;
align-items: center;
color: black;
/* margin-top: 50px; */
font-size: 40px;
font-weight: bold;
}
.social {
/* float: left; */
text-align: center;
display: flex;
justify-content: center;
/* margin-bottom: 20px;
position: relative;
right: -220px;
bottom: -70px; */
}
.social #spotifylogo {
/* position: relative;
bottom: -7px; */
}
.social #fblogo {
/* position: relative; */
/* bottom: 1px;
left: -1px; */
}
.social #twitterlogo {
/* position: relative; */
/* bottom: 1px;
left: 6px; */
}
.nav {
text-align: center;
color: black;
font-size: 14px;
display: flex;
justify-content: center;
/* float: left;
position: relative;
right: -495px;
margin-top: 25px; */
}
.nav a:link {
text-decoration: none;
color: black;
margin-right: 15px;
}
.nav a:hover {
color: greenyellow;
}
#headpic {
text-align: center;
/* position: relative; */
/* right: -225px;
bottom: -100px; */
}
<h1 id="header">cyberpVnk</h1>
<div class="nav">
Start
Musik-Player
Video-Player
Biografie
Kontakt
</div>
<div class="social">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" width="25" height="25">
<img src="spotify.png" width="40" height="40" id="spotifylogo">
<img src="fbbutton.png" width="26" height="26" id="fblogo">
<img src="https://www.nicepng.com/png/full/84-842524_twitter-logo-in-circular-black-button-twitter-logo.png" width="27" height="27" id="twitterlogo">
</div>
<div id="headpic">
<img src="headpic.jpg" width="900" height="500">
</div>
add this in your CSS
div_id(div that you want to change) {
margin: 0 auto;
}
So I made a post similar to this one, since I didn't get a precise answer and didn't understand the instructions. So I am once again asking for your support.
There are a couple of issues regarding my nav bar that I am unable to fix. One of them is a button sticking inside of the nav bar, but it doesn't even belong in the div class.
Navigation Bar
The second issue is that I can't line the logo/text [SINUS] and the links together in one line.
Any help would be appreciated!
/*====================
The CSS File
Section 1:
Buttons
=====================*/
button {
background-color: #358cf0;
border: none;
border-radius: 18px;
text-align: center;
text-decoration: none;
opacity: 0.8;
font-size: 14px;
color: rgb(255, 255, 255);
padding: 12px 48px;
transition: 0.3s;
outline: none;
}
button:hover {
opacity: 1;
}
ul li {
display: inline-block;
padding: 10px;
font-size: 20px;
font-family: raleway;
}
ul li:hover {
color: orange;
}
/*====================
The CSS File
Section 2:
Alerts
=====================*/
.container {
position: fixed;
top: 74%;
right: 0;
left: 77%;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: basic;
}
.modal {
width: 40%;
min-width: 20rem;
background-color: #ffffff;
border-radius: 12px;
}
.modal-header {
display: flex;
align-items: center;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
background-color: #358cf0;
padding: 8px 10px;
color: #fff;
font-size: 110%;
font-weight: 600;
font-family: basic;
}
.modal-content {
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.modal-footer {
text-align: center;
}
/*====================
The CSS File
Section 3:
Body etc.
=====================*/
body {
background-color: #252036;
}
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70%;
}
.navigation-bar {
background-color: #1c172c;
position: fixed;
width: 100%;
left: 0;
top: 0;
text-align: right;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: right;
display: inline-block;
vertical-align: top;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
display: inline;
text-align: right;
}
.navigation-bar li a {
color: black;
font-size: 16px;
font-family: basic;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
#menu {
float: right;
}
/*====================
The CSS File
Section 4:
Text
=====================*/
#font-face {
font-family: basic;
src: url(Helmet-Regular.ttf);
}
h1 {
font-family: basic;
color: white;
font-size: 390%;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="sccp.css">
<title>Sinus - 【Home】</title>
<link rel="icon" href="titl.ico">
<link rel="apple-touch-icon" href="titl.ico" />
</head>
<body>
<div class="navigation-bar">
<div id="navigation-container">
<h1>SINUS</h1>
<ul>
<li>Home</li>
</ul>
</div>
</div>
<button>Download</button>
<div class="container" role="alert">
<div class="modal">
<div class="modal-header">
UPDATE! Sinus 1.0v
</div>
<div class="modal-content">
Here new stuff go gogogo
<br>Read more...
</div>
<div class="modal-footer">
</div>
</div>
</div>
</body>
</html>
To align the logo and links, use flex on the #navigation-container:
#navigation-container {
display: flex;
justify-content: space-between;
align-items: center;
}
justify-content: space-between will put the maximum space between the contents - in this case your logo and ul that contain the links. align-items:center lines them up vertically.
https://codepen.io/doughballs/pen/RwPrYoX
Not sure what your issue with the button is but because your nav has position:fixed, it is being taken out of the flow of the page, so the button doesn't 'know' it is there. If you wanted it to sit under the nav, you need to add a container with margin-top to push it down. But I'm not sure what your issue is with it, clarify and I'll amend the codepen.
I am trying to make two columns one for a vertical navigation bar to the left and the content column should float right. I tried every method possible. The page did not look good at all. I do not know what I am missing. Any help will be greatly appreciated. Any suggestions? I have been trying for hours but have not been successful. I am still learning the process. I tried floating the Navigation bar left and the content right, but that did not work as desired.
body {
background-color: red;
color: black;
font-family: Verdana, Arial, sans-serif;
}
#wrapper {
background-color: #dce9f7;
margin-left: auto;
margin-right: auto;
width: 70%;
min-width: 700px;
box-shadow: 5px 5px 5px 5px #828282;
}
h1 {
background-color: #d9c7b4;
color: black;
text-align: center;
}
h2 {
background-color: white;
font-size: 1.2em;
padding-left: 10px;
padding-bottom: 5px;
}
#nav {
text-align: center;
}
#content {
padding: 25px;
}
.floatright {
float: right;
padding-bottom: 20px;
}
.floatleft {
float: left;
padding: 20px;
}
<div id="wrapper">
<h1>The Nothing Burger</h1>
<div id="nav">
Home
Menu
Location
</div>
<h2>Only the best food!</h2>
<div class="floatright">
<img src="plate.jpg" alt="Great Food" width="333" height="156">
</div>
<div id="content">
<ul>
<li>Fresh, Healthy Cuisine</li>
<li>Friendly Service</li>
<li>Open for Breakfast, Lunch and Dinner</li>
</ul>
</div>
<div>123 Elm Street<br/> Appleton, CA<br/> 1-888-555-5555
<br/><br/>
</div>
</div>
Add a wrapper div around the navbar element and the content element like shown below and add these styles
.wrapperDiv {
display: flex;
}
#nav {
width: 30%;
}
.content-wrapper {
width: 70%
}
#nav a {
display: block;
}
body {
background-color: red;
color: black;
font-family: Verdana, Arial, sans-serif;
}
#wrapper {
background-color: #dce9f7;
margin-left: auto;
margin-right: auto;
width: 70%;
min-width: 700px;
box-shadow: 5px 5px 5px 5px #828282;
}
h1 {
background-color: #d9c7b4;
color: black;
text-align: center;
}
h2 {
margin: 0;
background-color: white;
font-size: 1.2em;
padding-left: 10px;
padding-bottom: 5px;
}
#nav {
text-align: center;
}
#content {
padding: 25px;
}
.floatright {
float: right;
padding-bottom: 20px;
}
.floatleft {
float: left;
padding: 20px;
}
.wrapperDiv {
display: flex;
}
#nav {
width: 30%;
}
.content-wrapper {
width: 70%
}
#nav a {
display: block;
}
<body>
<div id="wrapper">
<h1>The Nothing Burger</h1>
<div class="wrapperDiv">
<div id="nav">
Home
Menu
Location
</div>
<div class="content-wrapper">
<h2>Only the best food!</h2>
<div class="floatright">
<img src="plate.jpg" alt="Great Food" width="333" height="156">
</div>
<div id="content">
<ul>
<li>Fresh, Healthy Cuisine</li>
<li>Friendly Service</li>
<li>Open for Breakfast, Lunch and Dinner</li>
</ul>
<div>123 Elm Street<br/> Appleton, CA<br/> 1-888-555-5555
<br/><br/>
</div>
</div>
</div>
</div>
I'm helping working on a website for a friend. I'm very new to this and can't get the white container to stretch to the very bottom of the browser page.
Here is the link
html, body {
background-color: transparent;
text-align:center;
text-rendering: optimizelegibility;
margin: 0px;
}
#wrapper {
width: 100%;
max-width: 1088px;
margin: 0 auto;
}
#sitecontainer {
position: relative;
background-color: rgba(255,255,255,0.84);
width: 80%;
max-width: 1038px;
margin: 0 auto;
height: 100%;
padding-right: 30px;
padding-left: 30px;
top: 0;
min-height: 100%;
}
main {
width: 100%;
height: 100%;
margin: 0 auto;
line-height: 1.4;
position: relative;
}
a {
font-family: 'roboto', sans-serif;
font-weight: 500;
color:#3d7109;
text-transform:uppercase;
text-decoration: none;
}
a #footer{
font-family: 'roboto', sans-serif;
font-weight: 300;
text-decoration:none;
text-transform:none;
}
a:hover {
opacity: 0.7;
}
header img {
width: 100%;
max-width: 300px;
font-style: none;
padding-top: 30px;
}
header h2 {
font-family: 'roboto', sans-serif;
font-weight: 500;
font-size: 14px;
text-align: center;
}
h1 {
font-family: 'roboto', sans-serif;
font-weight: 300;
text-transform: uppercase;
text-align:center;
font-style:normal;
}
/* ===================
Nav
=================== */
nav {
margin: auto;
margin-bottom: 30px;
max-width: 700px;
width: 100%;
text-align: center;
margin-bottom: 30px;
}
#menu {
padding: 0;
margin-right: 10px;
margin-left: 10px;
}
#menu li {
display: inline-block;
margin-right: 30px;
margin-bottom: 5px;
font-size: 17px;
text-align: center;
}
#menu li:last-child {
margin-right: 0;
}
/* ===================
Content
=================== */
p {
font-family: 'roboto', sans-serif;
font-weight: 300;
text-align:center;
}
.indexpage article {
margin-bottom: 85px;
}
article:before {
content: "";
display: block;
background: #3f474c;
width: 6px;
height: 1px;
margin-bottom: 16px;
}
.permalinkpage article:before {
margin: 0 auto 16px;
}
.permalinkpage .post {
margin: auto;
font-size: 14px;
letter-spacing: 0.9px;
}
.permalinkpage p {
margin: 24px 0;
}
/* Text */
.permalinkpage .text .post {
width: 100%;
max-width: 500px;
margin: auto;
}
<div id="wrapper">
<div id="sitecontainer" height="100%">
<!---------- HEADER / LOGO ---------->
<header class="wrapper clearfix">
<section id="blog-title">
<h1 style="margin-top: 0px; margin-bottom: 0px;">
<img src="files/images/logo.gif" alt="Healing by Andrea"/>
</h1>
</section>
</header>
<!---------- NAV START ---------->
<nav>
<ul id="menu">
<li>
Home
</li>
<li>
Crystals
</li>
<li>
Bio
</li>
<li>
Rates
</li>
<li>
Gallery
</li>
<li>
Testimonials
</li>
<li>
Contact
</li>
</ul>
</nav>
<!---------- NAV END ---------->
<main class=" permalinkpage">
<!---------- CONTENT ---------->
<div class="grid-sizer"></div>
<article class="text">
<section class="post">
<h1 class="post-title" >"What is Reiki?"</h1>
<article class="type_description"><div class="article-content">
<div class="boxed">
<p>The word Reiki is made of two Japanese words - Rei which means "God's Wisdom or the Higher Power" and Ki which is "life force energy". So Reiki is actually "spiritually guided life force energy."
</p>
<p>A treatment feels like a wonderful glowing radiance that flows through and around you. Reiki treats the whole person including body, emotions, mind and spirit creating many beneficial effects that include relaxation and feelings of peace, security and wellbeing. Many have reported miraculous results.
<br>
Reiki is a simple, natural and safe method of spiritual healing and self-improvement that everyone can use. It has been effective in helping virtually every known illness and malady and always creates a beneficial effect. It also works in conjunction with all other medical </p>
</div>
</div>
</article><!-- Javascript Assets --><p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript"></script><script src="http://static.tumblr.com/e6lc7yi/7rPn0ryx1/gobig-plugins.js" type="text/javascript"></script></p>
<section class="post-meta">
</section>
</section>
</article>
</main>
</div>
</div>
Any ideas?
html, body {
height: 100%;
}
#wrapper {
height: 100%;
}
Adding these will help you achieve what you are after
I'm trying to troubleshoot a page that was created by someone else, and have never used flexbox before. It is a 3-column layout that stacks perfectly in when resized in Firefox or Chrome but when viewing in Safari on desktop or iPhone the elements don't stack. The first one seems to get hidden under the second, and the third remains to the right, outside of the content area. I found a similar topic and added the viewport code in the head but it still doesn't work. I've tried several different things but nothing seems to change it. I'm sure there's something really simple I'm overlooking because the code is a bit of a mess and I'm not familiar with flexbox.
Page can be viewed at: http://www.mapi.com/doshas/vpk-balance.html
Here's the CSS and HTML for the page:
#-ms-viewport {
width: device-width;
}
#-o-viewport {
width: device-width;
}
#-viewport {
width: device-width;
}
.doshas {
color: white;
text-shadow: .8px .8px #AAAAAA;
width: 90px;
height: 45px;
text-align: center;
box-shadow: 4px 4px 10px #646464;
font-size: .8em;
float: left;
clear: both;
margin-left: 35%;
}
#vataProd,
#pittaProd,
#kaphaProd {
margin-top: 40px;
margin-bottom: 12%;
}
#vataProd {
background-color: #7FB122;
}
#pittaProd {
background-color: #226CB1;
}
#kaphaProd {
background-color: #D44F00;
}
.vataBox,
.pittaBox,
.kaphaBox {
box-shadow: 4px 4px 10px #646464;
margin-top: 6%;
padding: 3%;
height: 470px;
width: 240px;
margin-left: 20px;
}
.vataBox2,
.pittaBox2,
.kaphaBox2 {
box-shadow: 4px 4px 10px #646464;
margin-top: 220px;
padding: 3%;
height: 130px;
width: 240px;
margin-left: 20px;
}
.vataBox,
.vataBox2 {
background-color: #a5cf32;
list-style-position: inside;
}
.pittaBox,
.pittaBox2 {
background-color: #6ca8e7;
list-style-position: inside;
}
.kaphaBox,
.kaphaBox2 {
background-color: #f28f25;
list-style-position: inside;
}
.doshaProducts {
float: left;
display: block;
clear: both;
}
#content {
padding: 0;
}
#flexBox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-around;
-ms-flex-pack: justify;
justify-content: space-around;
}
#flexVata,
#flexPitta,
#flexKapha {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background-repeat: no-repeat;
min-width: 300px;
max-width: 300px;
}
#flexVata {
background-image: url("/doshas/images/vata-background.jpg");
margin: auto;
order: 1;
}
#flexPitta {
background-image: url("/doshas/images/pitta-background.jpg");
margin: auto;
order: 2;
}
#flexKapha {
background-image: url("/doshas/images/kapha-background.jpg");
margin: auto;
order: 3;
}
#flexVata img,
#flexPitta img,
#flexKapha img {
margin-left: auto;
margin-right: auto;
}
#header {
color: #7FB122;
text-align: center;
font-weight: normal;
font-size: 1.5em;
}
#footer {
color: #646464;
text-align: center;
font-weight: normal;
font-size: 1.5em;
clear: both;
}
.grayBox {
background-color: #707070;
color: white;
font-size: .8em;
text-align: center;
padding: .1% 2% .5% 2%;
border-radius: 25px;
margin-left: 1%;
}
#media screen and (max-width: 780px) {}
}
#doshaQuiz {
visibility:hidden;
}
#flexBox div div ul li {
list-style-type: disc;
margin-left: 3%;
margin-right: 3%;
}
.vataBox h3,
.pittaBox h3,
.kaphaBox h3 {
color: white;
margin-left: 10%;
font-size: .9em;
}
.vataBox ul li,
.pittaBox ul li,
.kaphaBox ul li {
font-size: .8em;
line-height: 1.3em;
}
.vataBox2 h3,
.pittaBox2 h3,
.kaphaBox2 h3 {
color: white;
margin-left: 10%;
font-size: .9em;
}
.vataBox2 ul li,
.pittaBox2 ul li,
.kaphaBox2 ul li {
font-size: .8em;
line-height: 1.3em;
}
#pitta-out {
-webkit-margin-before: 2.2em;
}
#kapha-out {
-webkit-margin-before: 3.4em;
}
<!DOCTYPE html>
<html>
<head>
<title>vpk® Balance | Maharishi Ayurveda Products</title>
<meta name="description" content="DESCRIPTION.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<%=include( '/template_assets/styleSheets_js.html')%>
</head>
<body>
<%=include( '/template_assets/googleAnalytics.html')%>
<%=include( '/template_assets/page_head.html')%>
<div id="outerWrapper" class="cf">
<div id="content" class="cf">
<h2 id="header">YOU ARE A UNIQUE COMBINATION OF ALL 3</h2>
<h2 id="footer">WHAT’S MY DOSHA? <span class="grayBox">dosha quiz</span></h2>
<div id="flexBox">
<div id="flexVata">
<div class="vataBox2">
<ul>
<li>thin build</li>
<li>does not gain weight easily</li>
<li>quick to learn, quick to forget</li>
<li>enthusiastic & vivacious</li>
<li>becomes cold easily</li>
</ul>
</div>
<div class="vataBox">
<h3>vata in balance:</h3>
<ul>
<li>energetic... vivacious</li>
<li>learns easily</li>
<li>clear & alert mind</li>
<li>falls asleep easily at bedtime</li>
<li>balanced digestion & elimination</li>
<li>good circulation & even body temperature</li>
</ul>
<h3>vata out of balance:</h3>
<ul>
<li>tired and/or fatigued</li>
<li>forgetful, or “spaced out”</li>
<li>lack of focus</li>
<li>difficulty falling asleep</li>
<li>occasional constipation</li>
<li>poor circulation (cold feet & hands)</li>
<li>feelings of anxiousness & worry</li>
</ul>
</div>
<a href="/doshas/vata-dosha.html">
<div class="doshas" id="vataProd">vata
<br>products</div>
</a>
</div>
<!-- #flexVata -->
<div id="flexPitta">
<div class="pittaBox2">
<ul>
<li>medium build</li>
<li>balanced weight</li>
<li>sharp intellect</li>
<li>goal oriented</li>
<li>becomes hot easily</li>
</ul>
</div>
<div class="pittaBox">
<h3>pitta in balance:</h3>
<ul>
<li>perfectionist (type A personality)</li>
<li>strong intellect</li>
<li>strong digestion</li>
<li>radiant, glowing skin</li>
<li>sleeps through the night</li>
<li>inner peace & happiness</li>
</ul>
<h3 id="pitta-out">pitta out of balance:</h3>
<ul>
<li>controlling, fiery personality</li>
<li>workaholic tendencies</li>
<li>overheated, excess stomach acid</li>
<li>skin rashes & acne</li>
<li>interrupted sleep</li>
<li>loose bowel movements</li>
</ul>
</div>
<a href="/doshas/pitta-dosha.html">
<div class="doshas" id="pittaProd">pitta
<br>products</div>
</a>
</div>
<!-- #flexPitta -->
<div id="flexKapha">
<div class="kaphaBox2">
<ul>
<li>larger build</li>
<li>tendency for weight gain</li>
<li>slow to learn, slow to forget</li>
<li>sweet & even tempered</li>
<li>tends to dislike cold & damp weather</li>
</ul>
</div>
<div class="kaphaBox">
<h3>kapha in balance:</h3>
<ul>
<li>stable temperament</li>
<li>good long-term memory</li>
<li>healthy robust physiology</li>
<li>strength & stamina</li>
<li>compassionate & affectionate</li>
<li>sound sleep</li>
</ul>
<h3 id="kapha-out">kapha out of balance:</h3>
<ul>
<li>gains weight easily</li>
<li>sluggish digestion</li>
<li>prone to sinus & respiratory issues</li>
<li>lethargy</li>
<li>feelings of sadness</li>
<li>difficulty waking up</li>
<li>food cravings</li>
</ul>
</div>
<a href="/doshas/kapha-dosha.html">
<div class="doshas" id="kaphaProd">kapha
<br>products</div>
</a>
</div>
<!-- #flexKapha -->
</div>
<!-- #flexBox -->
</div>
<!--end #content -->
</div>
<!--end #outerWrapper -->
<%=include( '/template_assets/footer.html')%>
</body>
</html>
Any help on this is greatly appreciated; thank you for your time!