top 2 images figcatpion hide when i position header fixed - html

I am trying to make website but problem is that when i position header fix top 2 images figcatipion hide. I am trying to make website but problem is that when i position header fix top 2 images figcatipion hide.
/*********************
General
*********************/
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
a {
text-decoration: none;
}
h1, h3 {
margin: 0;
}
/*********************
Header
*********************/
.main-header {
background-color: #3cb371;
width: 100%;
float: left;
text-align: center;
position: fixed;
z-index: 1000;
}
.logo {
font-family: 'Indie Flower', cursive;
}
.name {
padding-top: 5px;
}
.occptn {
padding-bottom: 15px;
font-size: 15px;
}
.main-header a {
color: #fff;
margin: 0;
}
.main-nav {
background-color:#2e8b57;
font-weight: bold;
}
.main-nav a {
text-align: center;
}
.main-nav li {
display: inline-block;
padding: 15px;
}
.selected a:visited {
color: #000;
}
.main-nav a:hover {
color: #000;
}
/*********************
Images
*********************/
.container figure {
margin: 0;
float: left;
width: 45%;
padding: 0 20px ;
}
.container img {
max-width: 100%;
display: block;
}
.container figcaption {
clear: right;
background-color: #dcdcdc;
padding: 10px 0;
font-size: .8em;
}
.figureOne ,
.figureTwo {
}
.clearfix::after {
content: “”;
display: table;
clear: both;
}
/*********************
Footer
*********************/
.main-footer {
text-align: center;
width: 100%;
background-color: #7fffd4;
clear: left;
padding: 20px;
}
.main-footer a {
}
/*********************
Responsive Layout
*********************/
#media (min-width:660px) {
.main-header {
padding: 10px 0;
box-shadow: 0 5px #2e8b57;
}
.logo {
float: left;
width: 45%;
text-align: left;
padding-left: 20px;
}
.main-nav {
background-color: #3cb371;
float: right;
width: 45%;
}
.main-nav li {
padding-left: 10px ;
}
.occptn {
padding: 0;
}
}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Irfan Hussain | Web Developer</title>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link rel="stylesheet" href="normalize.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Start Header -->
<header class="main-header">
<a class="logo" href="index.html">
<h1 class="name"> Irfan Hussain </h1>
<h3 class="occptn"> Web Developer </h3>
</a>
<ul class="main-nav">
<li class="selected">Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<!-- End Header -->
<div class="container clearfix">
<figure class="figureOne">
<figcaption> Experimentation with color and texture. </figcaption>
<img src="img/numbers-01.jpg" alt="Irfan Web Developer" />
</figure>
<figure class="figureTwo">
<figcaption> Playing with blending mode in photoshop. </figcaption>
<img src="img/numbers-02.jpg" alt="Irfan Web Developer" />
</figure>
<figure>
<figcaption> Trying to create 80's style glow. </figcaption>
<img src="img/numbers-06.jpg" alt="Irfan Web Developer" />
</figure>
<figure>
<figcaption> Drips created using Photoshop brushes </figcaption>
<img src="img/numbers-09.jpg" alt="Irfan Web Developer" />
</figure>
<figure>
<figcaption> Creating shapes using repetition. </figcaption>
<img src="img/numbers-12.jpg" alt="Irfan Web Developer" />
</figure>
</div>
<footer class="main-footer">
<p> &copy2018 Copy right Irfan Hussain | Web Developer </p>
<img src="img/facebook-wrap.png" alt="Facebook" />
<img src="img/twitter-wrap.png" alt="Twitter" />
</footer>
</body>
</html>
I am trying to make website but problem is that when i position header fix top 2 images figcatipion hide.

Related

Overflow-X causes line line to render on android using chrome and firefox

I am trying to solve an issue where CSS - overflow-x causes a line to fade in and fade out for a brief second after each h2. This only happens when the webpage is rendered (visited or refreshed).
This doesn't happen on Chrome or Firefox on the computer. It doesn't happen on Safari on Iphone 8 as well.
The following link contain all of the code: https://jsbin.com/liqodaluwo/edit?html,css,output
You don't need overflow-x for your Text elements in this case, because the text Elements won't be cutted, so just use overflow:hidden;
/* Body */
body {
overflow-x: hidden;
font: 16px/1 "Montserrat", Arial, Helvetica, sans-serif;
color: white;
background: #101010;
margin: 0;
padding: 0;
}
/* Global */
li {
list-style: square;
}
.container {
text-align: center;
width: 90%;
margin: auto;
}
/* Gallery */
#gallery,
#gallery-card,
#gallery-music,
#gallery-substance-designer {
font-size: 0;
list-style: none;
outline: none;
margin: 0;
padding: 0;
}
#gallery li,
#gallery-music li,
#gallery-substance-designer li {
display: inline-block;
position: relative;
margin: 2px;
padding: 0;
}
#gallery-card li {
display: inline-block;
position: relative;
margin: 10px;
padding: 0;
}
#gallery a,
#gallery-card a,
#gallery-music a,
#gallery-substance-designer a {
color: white;
text-decoration: none;
outline: none;
}
#gallery img,
#gallery-card img,
#gallery-substance-designer img {
cursor: pointer;
height: auto;
width: 300px;
max-width: 100%;
margin: 0;
padding: 0;
transform: scale(1);
transition: all 0.2s;
}
#gallery img:hover,
#gallery-substance-designer img:hover {
transform: scale(0.98);
}
#gallery iframe,
#gallery-card iframe,
#gallery-music iframe,
#gallery-substance-designer iframe {
max-width: 100%;
margin: 0;
padding: 0;
}
/* Card */
.card {
max-width: 300px;
}
.card-info,
.card-info-center {
font-size: 12px;
background: #202020;
margin: 0;
padding: 15px;
transition: all 0.3s;
}
.card-info {
text-align: left;
}
.card-info h2,
.card-info-center h2 {
margin: 0;
padding: 0;
}
.card-info p,
.card-info-center p {
margin: 0;
padding-top: 10px;
}
.card-price {
font-size: 16px;
margin-top: 20px;
padding: 0;
}
.card-price p {
text-align: right;
margin: 0;
padding: 0;
}
.card:hover .card-info,
.card:hover .card-info-center {
background: #404040;
}
/* Fade In */
.fade-in {
animation: animation-fade-in 1s;
}
#keyframes animation-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Desktops & Laptops */
#media only screen and (max-width: 1085px) {
#global-container,
#global-content,
#slideshow {
width: auto;
}
#about-profile,
#about-profile-text,
#global-sidebar {
float: none;
width: auto;
}
.details {
width: 100%;
margin: 0 0 20px;
}
.information,
#sys-req {
padding: 1px 10px 5px;
}
#about-divider {
background: linear-gradient(to left, #00000000 0%, #303030 50%, #00000000 100%);
float: none;
width: auto;
height: 1px;
margin: 10px 10% 0;
}
#slideshow-container {
display: block;
}
#slideshow-summary {
text-align: center;
float: none;
width: auto;
margin: 0 0 20px;
}
#slideshow-summary div {
display: inline-block;
vertical-align: top;
text-align: justify;
max-width: 380px;
margin: 0 10px;
}
#slideshow-summary img {
width: 400px;
max-width: 100%;
}
}
/* Tablets & Mobile Phones */
#media only screen and (max-width: 625px) {
/* Hide Navigation */
#navigation {
display: none;
}
/* Show Navigation Icons */
#navigation-icons {
display: block;
}
/* Expand Body to fit all content (Navigation Icons bar would otherwise hide content) */
body {
padding-bottom: 52px;
}
/* Download content resize */
#download-content {
max-width: 100%;
max-height: 100%;
}
.card {
max-width: 150px;
}
.card-info-center h2 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- Links -->
<link rel="stylesheet" href="/css/main.css">
<link rel="shortcut icon" type="image/x-icon" href="/img/global/favicon.ico">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat&display=auto">
<!-- Title -->
<title>tet</title>
</head>
<body>
<!-- Main Content -->
<main class="container">
<section>
<h1>test</h1>
<!-- Portfolio -->
<ul id="gallery-card">
<li>
<article class="card">
<a href="/portfolio/games">
<img class="lazyload" src="/img/global/lazyload/card.png" data-src="/img/portfolio/t-games.png">
<div class="card-info-center">
<h2>Games aw w dwadaw</h2>
</div>
</a>
</article>
</li>
<li>
<article class="card">
<a href="/portfolio/2d-art">
<img class="lazyload" src="/img/global/lazyload/card.png" data-src="/img/portfolio/t-2d-art.png">
<div class="card-info-center">
<h2>2D Art</h2>
</div>
</a>
</article>
</li>
<li>
<article class="card">
<a href="/portfolio/3d-models">
<img class="lazyload" src="/img/global/lazyload/card.png" data-src="/img/portfolio/t-3d-models.png">
<div class="card-info-center">
<h2>3D Models</h2>
</div>
</a>
</article>
</li>
<li>
<article class="card">
<a href="/portfolio/particles/page-1">
<img class="lazyload" src="/img/global/lazyload/card.png" data-src="/img/portfolio/t-particles.png">
<div class="card-info-center">
<h2>Particles</h2>
</div>
</a>
</article>
</li>
<li>
<article class="card">
<a href="/portfolio/shaders/page-1">
<img class="lazyload" src="/img/global/lazyload/card.png" data-src="/img/portfolio/t-shaders.png">
<div class="card-info-center">
<h2>Shaders</h2>
</div>
</a>
</article>
</li>
<li>
<article class="card">
<a href="/portfolio/environments/page-1">
<img class="lazyload" src="/img/global/lazyload/card.png" data-src="/img/portfolio/t-environments.png">
<div class="card-info-center">
<h2>Environments</h2>
</div>
</a>
</article>
</li>
<li>
<article class="card">
<a href="/portfolio/programming/page-1">
<img class="lazyload" src="/img/global/lazyload/card.png" data-src="/img/portfolio/t-programming.png">
<div class="card-info-center">
<h2>Programming</h2>
</div>
</a>
</article>
</li>
<li>
<article class="card">
<a href="/portfolio/substance-designer/page-1">
<img class="lazyload" src="/img/global/lazyload/card.png" data-src="/img/portfolio/t-substance-designer.png">
<div class="card-info-center">
<h2>Substance Designer</h2>
</div>
</a>
</article>
</li>
<li>
<article class="card">
<a href="/portfolio/music">
<img class="lazyload" src="/img/global/lazyload/card.png" data-src="/img/portfolio/t-music.png">
<div class="card-info-center">
<h2>Music</h2>
</div>
</a>
</article>
</li>
</ul>
</section>
</main>
<!-- Scripts -->
<script src="/js/lazyload.js"></script>
</body>
</html>

How to remove whitespace on a nav bar

Here's a screenshot of the issue I'm having:
I cannot for the life of me figure out how to remove the empty space on either side of the navbar. I've tried making the margin and padding 0 but it hasn't been working. Any help would be appreciated.
Here is the html:
html,
body {
margin: 0;
padding: 0;
height: 100%;
background-image: url("images/bg.jpg");
background-repeat: no-repeat;
background-position: center top;
font-family: Times New Roman;
}
header {
clear: both;
text-align: center;
}
#header img {
height: 40%;
width: 40%;
}
#wrap {
width: 1000px;
margin: auto;
padding: auto;
overflow: auto;
}
ul {
padding: 0;
}
nav ul {
margin: auto;
padding: auto;
list-style-type: none;
background-color: #009BB2;
}
nav li {
display: inline;
padding-left: 10px;
}
nav a {
text-decoration: none;
padding: 5px;
font-family: Times New Roman;
font-size: 25px;
color: maroon;
}
nav a:hover {
color: blue;
}
img.size {
height: 15%;
width: 15%;
padding: 5px;
}
section h1 {
text-align: center;
}
figure {
float: right;
overflow: hidden;
margin: 0px;
padding: 0px;
}
<div id="wrap">
<header>
<div id="header">
<img src="logo.png" alt="The Seasons" />
</div>
<nav>
<ul>
<li>Fall</li>
<li>Spring</li>
<li>Summer</li>
<li>Winter</li>
<li>Home</li>
</ul>
</nav>
</header>
<section>
<h1>The Four Seasons of the Earth</h1>
<figure class="fig">
<img class="size" src="images/fall_front.png" alt="Fall" />
</figure>
<figure class="fig">
<img class="size" src="images/winter_front.png" alt="Winter" />
</figure>
<figure class="fig">
<img class="size" src="images/spring_front.png" alt="Spring" />
</figure>
<figure class="fig">
<img class="size" src="images/summer_front.png" alt="Summer" />
</figure>
</section>
</div>
Add display: inline-block; to your nav ul selector and that will remove the whitespace from the sides.
html,
body {
margin: 0;
padding: 0;
height: 100%;
background-image: url("images/bg.jpg");
background-repeat: no-repeat;
background-position: center top;
font-family: Times New Roman;
}
header {
clear: both;
text-align: center;
}
#header img {
height: 40%;
width: 40%;
}
#wrap {
width: 1000px;
margin: auto;
padding: auto;
overflow: auto;
}
ul {
padding: 0;
}
nav ul {
margin: auto;
padding: auto;
list-style-type: none;
background-color: #009BB2;
display: inline-block;
}
nav li {
display: inline;
padding-left: 10px;
}
nav a {
text-decoration: none;
padding: 5px;
font-family: Times New Roman;
font-size: 25px;
color: maroon;
}
nav a:hover {
color: blue;
}
img.size {
height: 15%;
width: 15%;
padding: 5px;
}
section h1 {
text-align: center;
}
figure {
float: right;
overflow: hidden;
margin: 0px;
padding: 0px;
}
<div id="wrap">
<header>
<div id="header">
<img src="logo.png" alt="The Seasons" />
</div>
<nav>
<ul>
<li>Fall</li>
<li>Spring</li>
<li>Summer</li>
<li>Winter</li>
<li>Home</li>
</ul>
</nav>
</header>
<section>
<h1>The Four Seasons of the Earth</h1>
<figure class="fig">
<img class="size" src="images/fall_front.png" alt="Fall" />
</figure>
<figure class="fig">
<img class="size" src="images/winter_front.png" alt="Winter" />
</figure>
<figure class="fig">
<img class="size" src="images/spring_front.png" alt="Spring" />
</figure>
<figure class="fig">
<img class="size" src="images/summer_front.png" alt="Summer" />
</figure>
</section>
</div>
You're maxing out the width at 1000px:
#wrap{
width:1000px;
}
The nav is within that, so it can't stretch wider than that.
As is noted by others, you're setting the width to 1000px;
Change#wrap{width: 1000px} to #wrap{width: 100%}

Put an image on the right side of the page

So I have this webpage in Html and CSS, and I have this contact page. But I have this image I want to put on the right side of the page, but if I do: float: right; it doesn't seem to work. I also tried align but apparently the only thing close to that is text-align. If needed, here is my code (HTML):
CherryPlaysRoblox
</head>
<body>
<div class="outer">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
<p id="Cherry">CherryPlaysRoblox1</p>
</ul>
<div class="jumbotron">
<h1>Contact</h1>
<h4>Here are a few ways you can contact me. I will update the page when I change anything.</h4>
</div>
</div>
<!-- EMAIL -->
<img src="_gmail.png" alt="gmail" height="30" width="35"> <h4>My email</h4>
<!-- TWITTER -->
<img src="_twitter.png.png" alt="twitter" height="35" width="35"> <h4>Username</h4>
<!-- FACEBOOK -->
<img src="_facebook.png" alt="facebook" height="35" width="35"> <h4>Username</h4>
<!-- INSTAGRAM -->
<img src="_instagram.png" alt="instagram" height="35" width="35"> <h4>Username</h4>
<!-- ME -->
<div id="PhotoOfMe">
<img src="_Cherry.png" alt="Me" id="Me">
</div>
</body>
</html>
And my CSS code:
#Cherry {
color: black;
font-family: 'Happy Monkey', cursive;
font-size: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: DarkOrchid;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
border-right: 1px solid White;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: PaleVioletRed;
}
.active {
background-color: PaleVioletRed;
}
/*JUMBOTRON*/
.jumbotron {
background-color: Sandybrown !important;
float: top;
}
.jumbotron, p + h1 {
color: black !important;
font-family: 'Happy Monkey', cursive;
}
/*BODY*/
body {
background-color: Peachpuff !important;
}
h2 {
font-family: 'Happy Monkey', cursive !important;
}
h4 {
}
#me {
float: right;
clear: right;
}
I'd appreciate all the help I can get!
For correct floating it needs to be at the top, then it will float right into whatever comes afterwards in the document, so if you push the #me container above the #email it's going to be aligned on the right side. Also in your HTML the id was uppercase Meand in the css it was lowercase #me.
So push it to the top and change it to lowercase:
...
<!-- ME -->
<div id="PhotoOfMe">
<img src="_Cherry.png" alt="Me" id="me">
</div>
<!-- EMAIL -->
<img src="_gmail.png" alt="gmail" height="30" width="35"> <h4>My email</h4>
...

Can't get text to float over background image

I need the text "Relax.Revive.Renew..." to be on top of the background image, right under the header. At the moment it stays at the bottom of the image. I was able to place it there by putting inside the header tag, but the header is sticky, and I need it to scroll with the background.
Here's my html:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Pinyon+Script' rel='stylesheet' type='text/css'>
<title>New Breath Massage</title>
<!-- The "link" tag identifies your external CSS style sheet. Edit this link to use your particular file -->
<link rel="stylesheet" type="text/css" href="stylesheets/main.css" />
</head>
<body>
<div class="container">
<div class="header"> <!-- contains the constant stuff at the top of the page -->
<header>
<div class="logo">
<img src="images/newBreathLogo.png" width="298" height="100" alt="Logo">
</div>
<nav>
<ul class="horizNav">
<li>Offerings | </li>
<li>Testimonials | </li>
<li>Articles | </li>
<li>Contact</li>
<div class="socialIcons">
<img src="images/facebook-icon.png" width="32" height="32" alt="Facebook Icon">
<img src="images/google-plus-icon.png" width="32" height="32" alt="Google Plus Icon">
<img src="images/twitter-icon.png" width="32" height="32" alt="Twitter Icon">
</div>
</ul>
</nav>
</div>
</header>
<img src="images/homePic.jpg" width="100%" height="592" alt="Big Image" />
<section><!-- landing page (matthew) -->
<div class="tagline">
Relax.Revive.Renew...
</div>
</section>
Here's the css:
header{
position: fixed;
width: 100%;
text-align: center;
font-size: 24px;
line-height: 108px;
height: 108px;
background: #fff;
color: #ccc;
font-family: 'Helvetica', sans-serif;
opacity: 0.8;
border-style: solid;
border: orange;
}
/*code for full bleed bg image from paulmason.name*/
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#full-screen-background-image {
z-index: -999;
min-height: 100%;
/*min-width: 1024px;*/
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}
/*END code for full bleed bg image from paulmason.name END*/
h1 {
font-weight: lighter;
font-size: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
font-family: "Helvetica", sans-serif;
font-size: 1.1em;
}
nav {
font-family: "Helvetica", sans-serif;
}
a:link {
text-decoration: none;
color: #999;
}
a:hover {
text-decoration: none;
color: #ff9966;
}
a:visited {
text-decoration: none;
color: #ff9966;
}
.logo {
float: left;
/*padding: 10px*/;
}
.socialIcons {
float: right;
margin: 10px;
}
.tagline{
opacity: 1;
height: 150px;
font-family: 'Pinyon Script', serif;
text-align: left;
font-size: 120px;
line-height: 100px;
color: #999;
/*float: left;*/
/*border-bottom: 500px;*/
margin: 0px 25% 0px 20px;
/*padding: 0px 0px 40px;*/
display: inline-block;
}
Sorry, it won't let me post an image.
Thank you!
You're not using your image as a background image, you're using an inline-image:
<img src="images/homePic.jpg" width="100%" height="592" alt="Big Image" />
I swapped it into the background of your section (named the class background) and did a tiny bit of styling: http://codepen.io/anon/pen/gbXrYv
Try using the z-index CSS attribute. This basically sets the layer on the page that the element is on. Once you set that, you can do one of two things:
position: absolute
top: -(x)px
or...
margin-top: -(x)px;
I hope this helps :)

CSS full screen website page

I am trying to make a full screen website that has on the right a fullscreen image and on the left an vertical menu and a logo.
The html & css code that I managed to build so far is this, but I do not know how to make the whole website to be fullscreen:
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ella - Organizator de evenimente</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</style>
</head>
<body>
<div id="page">
<header>
<img src="imagini/logo.jpg" width="150" height="150" alt="logo ella organizator de evenimente">
</header>
<nav>
<ul>
<li>Despre</li>
<li>Servicii</li>
<li>Galerie</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<footer>
<img class="social" src="imagini/Facebook.png" width="32" height="32" alt="poza facebook" >
<img class="social" src="imagini/LinkedIn.png" width="32" height="32" alt="poza linkedin">
<img class="social" src="imagini/Twitter.png" width="32" height="32" alt="poza twitter">
<img class="social" src="imagini/Google+.png" width="32" height="32" alt="poza google+">
<p>© 2014 Chițu Ștefan</p>
</footer>
<aside>
<img src="imagini/poza-dreapta.jpg" width="512" height="658" alt="poza dreapta">
<h1>Fericirea autentică nu are vârstă ...</h1>
</aside>
</div>
</body>
</html>
&
CSS
#charset "utf-8";
/* CSS Document */
html, body {
width: 100%;
height: 100%;
margin: 0px;
background-color: #fff;
}
#page {
position: relative;
}
#page header img {
float: left;
position: absolute;
left: 180px;
top:68px;
}
#page nav {
font-size: 21px;
font-style: normal;
line-height: normal;
font-weight: normal;
color: #0c0c0c;
text-decoration: none;
float: left;
position: absolute;
left: 222px;
top: 267px;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
line-height: 1.6em;
font-size: 21px;
}
ul li a, ul li a:visited {
text-decoration: none;
color: #0c0c0c;
}
ul li a:hover, ul li .current {
color: #F00;
text-decoration: none;
}
aside {
margin: 0px;
padding: 0px;
float: left;
position: absolute;
left: 700px;
}
#page aside img {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
footer {
text-align: center;
float: left;
left: 200px;
position: absolute;
top: 600px;
font-size: 14,6px;
}
h1 {
float: left;
position: absolute;
top: 340px;
left: 20px;
font-size: 34px;
color: #0c0c0c;
font-weight: 600;
}
JSFiddle demo
You can use this code
var fullscreen = false;
var viewFullScreen = document.getElementById("fullscreen");
var exitFullScreen = document.getElementById("roadmap-fullscreen-exit-button");
addFullscreenEventListener(viewFullScreen);
addFullscreenEventListener(exitFullScreen);
function addFullscreenEventListener(elem){
if (elem) {
elem.addEventListener("click", function () {
if(fullscreen){
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}else{
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}, false);
}
}
HTML
You can use the following anchor tag. On click of this will your site go fullscreen
Fullscreen