The website I am designing displays a pop-up for age verification upon entering. This pop up looks great on a desktop browser but is not responsive on a mobile device. Currently on a phone it shows very large, probably the size it would normally display on a desktop. How do I make this proportionate to mobile devices? Phones and tablets too. Any help would be great!
CSS
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body{
font-family: helvetica;
font-size: 100%;
margin: 0;
padding: 0;
font-weight: 400;
font-family: Raleway;
line-height: 1.4;
}
body {
font-size: 100%;
#media (min-width: 32em) {
font-size: 110%
}
#media (min-width: 54em) {
font-size: 111%
}
#media (min-width: 74em) {
font-size: 115%
}
#media (min-width: 96em) {
font-size: 135%
}
}
a.btn{
background-color: #74AA50;
color: #fff;
text-decoration: none;
display:inline-block;
letter-spacing: 0.1em;
padding: 0.5em 0em;
&.btn-beta{
background-color: #dba952;
}
}
.decor-line {
position: relative;
top: 0.7em;
border-top: 1px solid #ccc;
text-align:center;
max-width: 40%;
margin: 0.5em auto;
display: block;
padding: 0.1em 1em;
color: #ccc;
span{
background: transparent;
color: #ccc;
position: relative;
top: -.7em;
padding: 0.5em;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 900;
}
}
.overlay-verify{
background: rgba(0,0,0,0.75);
position:fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 100;
}
.box{
background:url(https://static1.squarespace.com/static/5ef08aa918c34c5e1ee24d37/t/5efa11cff7a1d03adb8ac000/1593446880079/44-IMG_6788+copy.jpg) 50% 50%;
background-size: cover;
color: #fff;
img{
position: relative;
z-index: 999;
width: 12em;
}
position: fixed;
left: 0;
right: 0;
top: 20%;
bottom: 0;
margin: 0 auto;
z-index: 999;
width: 1000px;
height: 525px;
display:table;
.box-left, .box-right{
width: 100%;
height: 525px;
position: relative;
text-align: center;
padding: 5%;
#media (min-width: 54em){
display:table-cell;
vertical-align:middle;
width: 50%;
}
p{
//padding: 5%;
position: relative;
z-index: 99;
}
}
.box-left{
&:after{
content: '';
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
}
}
.box-right{
text-align: center;
h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 0.07em;
border-bottom: 1px solid #eee;
padding-bottom: 1em;
margin: 0 auto;
}
p{
color: #fff;
}
small{
color: #fff;
}
.btn{
font-weight: 600;
letter-spacing: 0.2em;
padding: 0.9em 1em 0.7em;
margin: 1em auto;
display: block;
}
}
}
#agePopUp a {
background-color: black;
color: white;
padding: 10px 20px;
margin-top: 10px;
display: inline-block;
}
.box,.overlay-verify{display:none}
Header JQuery Script
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script> jQuery(document).ready(function($){
if (sessionStorage.getItem('advertOnce') !== 'true') {
//Show Box on Start-Up
$('.box').show();
$('.overlay-verify').show();
}else{
$('.box').hide();
$('.overlay-verify').hide();
}
//Enter Button
$('#refresh-page').on('click',function(){
$('.box').hide();
$('.overlay-verify').hide();
sessionStorage.setItem('advertOnce','true');
});
//Exit Button
$('#reset-session').on('click',function(){
$('.box').show();
sessionStorage.setItem('advertOnce','');
});
});
</script>
<link href='https://fonts.googleapis.com/css?family=Raleway:600,900,400' rel='stylesheet' type='text/css'>
<main>
<article class="box">
<div class="box-left">
<img src="https://static1.squarespace.com/static/5ef08aa918c34c5e1ee24d37/t/5efc646a19c9962072e60679/1593599082426/SBR_centered+copy+-+white.png">
</div>
<div class="box-right">
<h3>Welcome</h3>
<p>By clicking enter, I certify that I am over the age of 18.</p>
ENTER
<span>OR</span>
EXIT
<small>Always enjoy responsibily.</small>
</div>
</div>
</article>
<div class="overlay-verify"></div>
</main>
You need to set the viewport.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
The width property controls the size of the viewport, the initial-scale property controls the zoom level when the page is first loaded and user-scalable properties control how users are allowed to zoom the page in or out.
You might want to read more about the Viewport meta tag here.
Related
So this problem has been bugging me for a few days now. I've been trying to get a working nightmode switch on my site. I've asked on here before and after what I thought was the solution, using help from this site and stack exchange, I started experiencing an annoying problem.
Here is a video of my problem: https://ryan-simms.com/problem
The problem only occurs when nightmode is enabled and I don't understand what the actual problem is. I've tried all sorts of different JavaScript codes with the same result everytime. Also before anyone says it's because of the DOMContentLoaded bit, I have already tried removing it on only using it when adding the EventListeners on my buttons.
Also I tried to change the way getCookie() works with a few different methods.
Are cookies the right way or is there a better way?
Here is my HTML stripped down to the basics:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Ryan Simms</title>
<link id ="pageStyle" rel="stylesheet" href='css/lightStyle.css' type='text/css'>
<script src="scripts/lightSwitch.js"></script>
<script src="scripts/cookie.js"></script>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto' type='text/css'>
</head>
<body>
<script src="lightSwitch.js"></script> <!-- Loads LightSwitch Script -->
<button type="button" id="lightSwitchOn">Turn On Night Mode</button>
<button type="button" id="lightSwitchOff">Turn Off Night Mode</button>
</body>
</html>
Here is my JavaScript:
document.addEventListener("DOMContentLoaded", handleDocumentLoad);
function handleDocumentLoad() {
var style = document.getElementById("pageStyle");
var offSwitch = document.getElementById("lightSwitchOff");
var onSwitch = document.getElementById("lightSwitchOn");
offSwitch.addEventListener('click', lightsOn);
onSwitch.addEventListener('click', lightsOff);
function lightsOff() {
document.cookie = "lights = off; expires = Fri, 31 Dec 9999 23:59:59 GMT";
style.setAttribute('href', 'css/darkStyle.css');
}
function lightsOn() {
document.cookie = "lights = on; expires = Fri, 31 Dec 9999 23:59:59 GMT";
style.setAttribute('href', 'css/lightStyle.css');
}
function getCookie( name ) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
var end = null;
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
end = document.cookie.indexOf(";", begin);
} else {
begin += 2;
end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
}
return decodeURI(dc.substring(begin + prefix.length, end) ).replace(/"/g, '');
}
function checkCookie() {
var nightmode = getCookie("lights");
if (nightmode == "off") {
lightsOff();
} else {
lightsOn();
}
}
checkCookie();
}
Here is my default CSS:
/*Layout for phones and tablets e.g. iPhone 5 and iPad*/
/*webpage fades in*/
html {
animation: fadein 2s;
position: relative;
min-height: 100%;
}
/*animation*/
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/*main colour settings for page*/
body {
font-family: 'Roboto';
font-size: 22px;
color: #1C1C1C;
background-color: #FFF;
margin: 0 0 100px;
padding: 25px;
}
/*List in nav*/
li {
list-style-type: none;
display: inline;
}
/*Navigation*/
nav {
width: 100%;
background-color: #D8D8D8;
padding-top: 10px;
padding-bottom: 10px;
}
ol {
text-align: center;
margin-right: 10px;
}
/*Links*/
a, a:link, a:visited, a:hover {
color: #1C1C1C;
text-decoration: none;
}
/*Main heading*/
h1 {
position: relative;
margin: 0 auto;
text-align: center;
}
/*Images*/
img {
border: solid 0px #1C1C1C;
border-radius: 5px;
margin: 0 auto;
text-align: center;
}
label {
display: block;
margin-bottom: 10px;
margin-top: 10px;
}
textarea {
width: 300px;
height: 200px;
margin-bottom: 10px;
padding: 10px;
border: solid 1px #1C1C1C;
border-radius: 2px;
resize: none;
}
input {
border: solid 1px #1C1C1C;
border-radius: 2px;
padding: 5px;
}
#logo {
border: 0px;
display: inline;
position: absolute;
top: 40px;
left: 30px;
margin-left: 10px;
font-size: 40px;
}
#enter {
margin-top: 40px;
max-width: 90%;
max-height: 90%;
}
video {
max-width: 80%;
margin: 0 auto;
display: block;
}
/*Footer*/
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
text-align: center;
}
/*Main Body*/
#mainContent {
padding: 10px;
background-color: #D8D8D8;
margin-top: 10px;
}
#mainContent img {
display: inline;
max-width: 375px;
max-height: 375px;
float: right;
margin-right: 10px;
margin-left: 10px;
}
/*Light Switches*/
#lightSwitchOn {
display: inline;
position: absolute;
top: 40px;
right: 30px;
margin-right: 10px;
font-size: 40px;
}
#lightSwitchOff {
display: none;
position: absolute;
top: 40px;
right: 30px;
margin-right: 10px;
font-size: 40px;
}
#cookies {
position: fixed;
left: 0;
bottom: 0;
height: 8%;
width: 100%;
background-color: #D8D8D8;
padding-left: 30px;
}
/*Layout for device with a min-width of 1024px*/
#media only screen and (min-width: 1024px) {
#enter {
max-width: 60%;
max-height: 60%;
}
}
/*Layout for desktop with a min-width of 1280px (720p HD)*/
#media only screen and (min-width: 1280px) {
#enter {
max-width: 40%;
max-height: 40%;
}
}
/*Layout for desktop with a min-width of 1920px (1080p HD)*/
#media only screen and (min-width: 1920px) {
#enter {
max-width: 40%;
max-height: 40%;
}
}
And my CSS when night mode is enabled:
/*Layout for phones and tablets e.g. iPhone 5 and iPad*/
/*webpage fades in*/
html {
animation: fadein 2s;
position: relative;
min-height: 100%;
}
/*animation*/
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/*main colour settings for page*/
body {
font-family: 'Roboto';
font-size: 22px;
color: #FFF;
background-color: black;
margin: 0 0 100px;
padding: 25px;
}
/*List in nav*/
li {
list-style-type: none;
display: inline;
}
/*Navigation*/
nav {
width: 100%;
background-color: #1C1C1C;
padding-top: 10px;
padding-bottom: 10px;
}
ol {
text-align: center;
margin-right: 10px;
}
/*Links*/
a, a:link, a:visited, a:hover {
color: #FFF;
text-decoration: none;
}
/*Main heading*/
h1 {
position: relative;
margin: 0 auto;
text-align: center;
}
/*Images*/
img {
max-width: 100%;
max-height: 100%;
border: solid 0px #FFF;
border-radius: 5px;
margin: 0 auto;
text-align: center;
}
label {
display: block;
margin-bottom: 10px;
margin-top: 10px;
}
textarea {
max-width: 100%;
max-height: 100%;
width: 300px;
height: 200px;
margin-bottom: 10px;
padding: 10px;
border: solid 1px #FFF;
border-radius: 2px;
resize: none;
}
input {
border: solid 1px #FFF;
border-radius: 2px;
padding: 5px;
}
#logo {
border: 0px;
display: inline;
position: absolute;
top: 40px;
left: 30px;
margin-left: 10px;
font-size: 40px;
}
#enter {
margin-top: 40px;
max-width: 90%;
max-height: 90%;
}
video {
max-width: 80%;
margin: 0 auto;
display: block;
}
/*Footer*/
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
text-align: center;
}
/*Main Body*/
#mainContent {
padding: 10px;
background-color: #1C1C1C;
margin-top: 10px;
}
#mainContent img {
display: inline;
max-width: 375px;
max-height: 375px;
float: right;
margin-right: 10px;
margin-left: 10px;
}
/*Light Switches*/
#lightSwitchOn {
display: none;
position: absolute;
top: 40px;
right: 30px;
margin-right: 10px;
font-size: 20px;
}
#lightSwitchOff {
display: inline;
position: absolute;
top: 40px;
right: 30px;
margin-right: 10px;
font-size: 20px;
}
#cookies {
position: fixed;
left: 0;
bottom: 0;
height: 8%;
width: 100%;
background-color: #1C1C1C;
padding-left: 30px;
}
/*Layout for device with a min-width of 1024px*/
#media only screen and (min-width: 1024px) {
#enter {
max-width: 60%;
max-height: 60%;
}
}
/*Layout for desktop with a min-width of 1280px (720p HD)*/
#media only screen and (min-width: 1280px) {
#enter {
max-width: 40%;
max-height: 40%;
}
}
/*Layout for desktop with a min-width of 1920px (1080p HD)*/
#media only screen and (min-width: 1920px) {
#enter {
max-width: 40%;
max-height: 40%;
}
}
Are cookies the right way or is there a better way?
Since you don't care about the cookie on the server side, prefer localStorage. You can replace all of your cookie code with things like
localStorage.setItem('lights', 'off');
if(localStorage.getItem('lights') === 'off') { ... }
Instead of loading a new stylesheet for your night mode, consider adding a .dark class to your body if night mode is on and incorporating the appropriate changes in your main stylesheet.
body {
font-family: 'Roboto';
font-size: 22px;
color: #1C1C1C;
background-color: #FFF;
margin: 0 0 100px;
padding: 25px;
}
body.dark {
color: #FFF;
background-color: black;
}
/*Navigation*/
nav {
width: 100%;
background-color: #D8D8D8;
padding-top: 10px;
padding-bottom: 10px;
}
.dark nav {
background-color: #1C1C1C;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Fox News</title>
<link rel="icon" href="https://s2.googleusercontent.com/s2/favicons?domain_url=http://foxnews.com" type="image/gif" sizes="16x16">
<style>
body {
margin: auto;
}
.iframe-container {
position: relative;
height: 100%;
}
.iframe-container iframe,
.iframe-container object,
.iframe-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
margin: 0px;
border: 0;
}
.social-magnet {
position: fixed;
left: 10px;
font-family: 'Source Sans Pro', sans-serif;
}
.clx_iframe {
position: absolute;
display: block;
bottom: 30px;
left: 5%;
width: 100%;
height: 100px;
font-family: sans-serif;
}
.socialbar {
width: 87px;
height: 87px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border: none;
pointer-events: fill;
box-shadow: none;
z-index: 101;
position: absolute;
top: 35%;
left: 147px;
border-radius: 50% !important;
}
.profilePhoto {
width: 87px;
height: 87px;
border-radius: 50%;
border: 3px dashed lightgray;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
object-fit: contain;
}
.messageContainer {
width: 390px;
height: auto;
line-height: 18px;
padding: 10px 15px 10px 15px;
font-size: 16px;
border: 2px solid white;
border-radius: 5px;
position: absolute;
text-align: center;
color: black;
background-color: white;
text-shadow: none;
pointer-events: fill;
box-shadow: none;
opacity: 1;
z-index: 100;
}
.circle-div {
background: #4C4E60;
height: 20px;
border-radius: 50% !important;
width: 20px;
float: right;
position: relative;
top: -20px;
right: -25px;
color: white;
}
#minimizeToggle {
color: white;
opacity: 0.75;
cursor: pointer;
font-weight: bolder;
font-size: 13px;
text-decoration: none;
}
#logosocial {
float: right;
text-decoration: none;
padding-right: 2.5px;
padding-left: 2.5px;
}
.logoImage {
width: 46px;
height: 20px;
margin-top: -5px;
background-repeat: no-repeat;
background-size: 100%;
opacity: 0.6;
position: relative;
right: -25px;
}
#profileName {
width: 77%;
line-height: 20px;
font-size: 15px;
padding-bottom: 3px;
text-align: left;
color: rgb(34, 34, 34);
display: block;
opacity: 0.6;
overflow: hidden;
white-space: nowrap;
text-decoration: none;
font-weight: bold;
}
#message {
height: 36px;
margin-top: 4px;
display: table;
text-align: left;
overflow: hidden;
width: auto;
letter-spacing: 0.5px;
color: rgb(34, 34, 34);
}
#messageText {
height: auto;
width: 100%;
display: table-cell;
vertical-align: middle;
font-weight: 400;
font-size: 14px;
color: rgb(34, 34, 34);
word-wrap: break-word;
word-break: break-all;
}
#formButton {
float: right;
margin-left: 15px;
cursor: pointer;
color: rgb(255, 255, 255);
background-color: #4C4E60;
width: 90%;
}
.triangle {
box-sizing: border-box;
background: white;
box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.triangle::after {
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
bottom: -2em;
left: 45%;
box-sizing: border-box;
border: 1em solid black;
border-color: transparent transparent white white;
transform-origin: 0 0;
transform: rotate(-45deg);
box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.buttonCTA {
height: 36px;
width: auto;
display: table-cell;
padding: 0 15px 0 15px;
margin: 0 0 0 15px;
border-radius: 5px;
border: 3px solid #4C4E60;
line-height: 35px;
font-weight: 400 !important;
text-decoration: none;
text-align: center;
}
/* Media Queiries */
#media screen and (max-width: 359px) and (min-width: 320px) {
.messageContainer {
width: 300px;
}
.socialbar {
left: 107px;
}
}
#media screen and (max-width: 374px) and (min-width: 360px) {
.messageContainer {
width: 340px;
}
.socialbar {
left: 125px;
}
}
#media screen and (max-width: 413px) and (min-width: 375px) {
.messageContainer {
width: 355px;
}
.socialbar {
left: 133px;
}
}
</style>
</head>
<body>
<div id="iframeWrapper" class="iframe-container">
<iframe id="website_frame" class="iframe" src="https://foxnews.com" sandbox='allow-forms allow-scripts allow-same-origin' allowfullscreen></iframe>
<div class="social-magnet">
<div class="messageContainer triangle">
<div class="circle-div"><a id="minimizeToggle" href="http://foxnews.com">x</a></div>
<a id="logosocial" href="https://clickx.io?utm_source=http://www.clickx.io&utm_campaign=contact&utm_medium=offerwidget" target="_blank">
<div class="logoImage"></div>
<a id="profileName" href="http://foxnews.com" target="_blank">Kannan Devan</a>
</a>
<span id="message">
<span id="messageText" class="text-left">
Good evening. Spent the Evening with a cup of TEA
</span>
</span>
<a class="buttonCTA" id="formButton" href="http://foxnews.com" target="_blank">
Hello Guys
</a>
</div>
<span class="socialbar">
<a id="imageLink" href="http://foxnews.com" target="_blank">
<img id="image_src" class="profilePhoto" src='https://ffb2efd5105ff0aedbc9-9cdacdeebf0faa19b665bf427f0c8092.ssl.cf1.rackcdn.com/assets/new-creator/plus-icon4.png' alt="Brand Logo">
</a>
</span>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var wrapper = document.getElementsByClassName('social-magnet')[0];
var image_wrapper = document.getElementsByClassName('socialbar')[0];
var height = document.getElementsByClassName('messageContainer')[0].offsetHeight;
wrapper.style.bottom = (height + 132).toString() + 'px';
image_wrapper.style.marginTop = (height + 40).toString() + 'px';
</script>
</body>
</html>
I tried to load a website in a plain HTML page using iFrame.
When opening in desktops, the desktop version of the site is opened.
Also when opening in Android phones, the mobile version is loaded, which is the expected behavior.
But the problem is that, when opening in iPhones, the desktop version of the website is loaded.
Setting the iFrame property scrolling='no' made it look like the mobile version of the website to be loaded correctly on iOS.
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "<%= #social_snip.url %>");
ifrm.id = 'ContentFrame';
ifrm.scrolling = 'yes';
if (check) {
document.getElementById('iframeWrapper').className += ' mobile-theme';
}
var IOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(IOS) {
ifrm.scrolling = 'no';
}
The above code checks whether the OS is an iOS, if yes it will set the scrolling property of iFrame with a no value.
So I managed to get this youtube video to dynamically resize on the page using some tutorials I found on the subject. However it will not center properly on the page.
How would I go about doing this? Is there an easier way of dynamically resizing the embedded video that I have overlooked?
Thanks guys and gals.
* {
font-family: "Trebuchet MS";
}
/* BODY */
body {
background-color: #F7F3FB;
}
body hr {
width: 55%;
}
/*LOGO*/
#logo {
font-size: 4em;
text-align: center;
}
#logo p {
margin: 0px;
}
/* NAVBAR */
#navbar a {
text-decoration: none;
color: black;
}
#navbar {
text-align: center;
font-size: 1.4em;
}
/* CONTENT */
#content {
width: 30%;
text-align: center;
margin: auto;
font-size: 1.05em;
}
/* GALLERY */
a:-webkit-any-link {
text-decoration: none;
/* ignoring default link settings */
}
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 1;
/* sets default view to a 100% opacity when on hover state */
}
.img-wrapper {
width: 300px;
height: 200px;
border: 0.1em solid #ccc;
border-radius: 0.4em;
background-color: #f3f3f3;
box-shadow: 0.1em 0.1em 0.5em -0.2em #777;
margin: 1em 1em;
}
img {
border-radius: 0.4em 0.4em 0em 0em;
/* radius should be the same as the img-wrapper */
}
.gallery-wrapper {
max-width: 1200px;
margin: auto;
}
.gallery-wrapper ul li {
display: inline-block;
/* sit wrappers in rows, not column block */
}
h1 {
padding-left: 14em;
}
h4 {
/* style the photos titles */
text-align: center;
font-size: 1em;
margin: 0;
padding: 0.5em 2em;
text-transform: uppercase;
font-weight: bold;
color: black;
}
.logo {
margin-left: 22em;
margin-bottom: 4em;
}
/* VIDEO PAGE */
.video {
text-align: center;
padding: 0;
width: 50%;
}
video {
width: 50%;
}
.description {
font-size: 1.25em;
}
.job {
font-weight: bold;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>GingeSwag Productions</title>
<link href="main.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="logo">
<p>GingeSwagProductions</p>
</div>
<div id="navbar">
<p>
Home -
Film -
Photography -
About -
Contact
</p>
</div>
<hr>
<div class="video">
<h2>Silver</h2>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/hW3_awq0-lk" frameborder="0" allowfullscreen></iframe>
</div>
<p>Silver is a short film following the first meeting of a young adopted boy with his neighbour.</p>
<p>Jobrole: Production Designer.</p>
</div>
</body>
<footer></footer>
</html>
Use margin: 0 auto on .video. like:
.video {
margin: 0 auto;
}
Have a look at the snippet below:
.video {
margin: 0 auto;
}
* {
font-family: "Trebuchet MS";
}
/* BODY */
body {
background-color: #F7F3FB;
}
body hr {
width: 55%;
}
/*LOGO*/
#logo {
font-size: 4em;
text-align: center;
}
#logo p {
margin: 0px;
}
/* NAVBAR */
#navbar a {
text-decoration: none;
color: black;
}
#navbar {
text-align: center;
font-size: 1.4em;
}
/* CONTENT */
#content {
width: 30%;
text-align: center;
margin: auto;
font-size: 1.05em;
}
/* GALLERY */
a:-webkit-any-link {
text-decoration: none;
/* ignoring default link settings */
}
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 1;
/* sets default view to a 100% opacity when on hover state */
}
.img-wrapper {
width: 300px;
height: 200px;
border: 0.1em solid #ccc;
border-radius: 0.4em;
background-color: #f3f3f3;
box-shadow: 0.1em 0.1em 0.5em -0.2em #777;
margin: 1em 1em;
}
img {
border-radius: 0.4em 0.4em 0em 0em;
/* radius should be the same as the img-wrapper */
}
.gallery-wrapper {
max-width: 1200px;
margin: auto;
}
.gallery-wrapper ul li {
display: inline-block;
/* sit wrappers in rows, not column block */
}
h1 {
padding-left: 14em;
}
h4 {
/* style the photos titles */
text-align: center;
font-size: 1em;
margin: 0;
padding: 0.5em 2em;
text-transform: uppercase;
font-weight: bold;
color: black;
}
.logo {
margin-left: 22em;
margin-bottom: 4em;
}
/* VIDEO PAGE */
.video {
text-align: center;
padding: 0;
width: 50%;
}
video {
width: 50%;
}
.description {
font-size: 1.25em;
}
.job {
font-weight: bold;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>GingeSwag Productions</title>
<link href="main.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="logo">
<p>GingeSwagProductions</p>
</div>
<div id="navbar">
<p>
Home -
Film -
Photography -
About -
Contact
</p>
</div>
<hr>
<div class="video">
<h2>Silver</h2>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/hW3_awq0-lk" frameborder="0" allowfullscreen></iframe>
</div>
<p>Silver is a short film following the first meeting of a young adopted boy with his neighbour.</p>
<p>Jobrole: Production Designer.</p>
</div>
</body>
<footer></footer>
</html>
Hope this helps!
.video {
width: 50%;
margin: 0 auto;
}
Replace your video css with this
I am making a website and one of my biggest problem right now is making it fit on all screens and mobile friendly. One of my biggest problems with that is the horizontal scrollbar! I appreciate anything that can be offered.
here is my code:
<!DOCTYPE html>
<html>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<head>
<link rel="stylesheet" type="text/css" href="about.css">
<title>morgan</title>
<style>
html {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") white no-repeat center top;
background-size: 100%;
background-color: white;
margin: 0;
padding: 0;
overflow-x: none;
}
h2 {
Font-family: Arial;
top: 650px;
left: 500px;
position: absolute;
color: #525252;
font-size: 2vw;
letter-spacing: 1px;
}
h3 {
Font-family: Arial;
top: 900px;
left: 500px;
position: absolute;
color: #525252;
font-size: 2vw;
letter-spacing: 1px;
}
h1 {
position: absolute;
top: 21%;
left: 36%;
color: white;
font-family: Arial;
font-size: 4.6vw;
letter-spacing: 1px;
}
p {
position: absolute;
width: 600px;
top: 720px;
left: 310px;
height: 25px;
font-family: Gill Sans, sans-serif;
color:#696969;
font-size: 17px;
text-align: center;
line-height: 150%;
}
a {
color: white;
text-decoration:none;
}
ul li {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
top: 43%;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:link,
ul li:visited {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
font-size: 90%;
width: 150px;
height: 40px;
text-decoration: none;
color: white;
}
li {
text-decoration: none;
color: white;
}
ul li:hover,
ul li:active {
background-color: white;
color: black;
text-decoration: none;
}
ul li a:hover, ul li a:active {
background-color: white;
color: black;
}
ul li a {
display: inline-block;
height: 100%;
width: 100%;
color: white;
text-decoration: none;
}
ul {
margin-right: 10%;
}
.wrapper {
padding-top: 0%;
}
#media screen and (max-width: 300px) {
.wrapper {
padding-top: 40%;
}
ul li{
margin-left: 2px;
margin-top: 5px;
margin-bottom: 0px;
width: 100px;
height:35px;
top: 480%;
}
ul{
margin-top: 165px;
margin-left: 20px;
}
h1{
position:absolute;
top: 120px;
left: 150px;
font-size: 19px;
}
h2 {
font-size: 20px;
width: 200px;
left: 100px;
top: 200px;
}
p {
left: 30px;
top: 390px;
}
hr {
margin-right: 85px;
margin-left: 85px;
margin-top: 375px;
}
}
hr {
margin-right: 150px;
margin-left: 150px;
margin-top: 570px;
}
</style>
</head>
<body>
<center><h1>WHO I AM</h1></center>
<div class="wrapper">
<ul>
<li><a href="www.youtube.com" class="life" ><strong>MY LIFE</strong></a></li>
<li><strong>PORTFOLIO</strong></li>
<li><strong>RESUME</strong></li>
<li><strong>ABOUT ME</strong></li>
</ul>
</div>
<h2>Some Fun Facts</h2>
<p>
I made this website from scratch when I was 14, I have a twin brother whose <br>
name is Pierson McNeal White, I have a older brother and sister who are also <br>
twins, I used to have 2 pet rats named Hermes and Cleo after the greek gods, <br>
and I watch the super bowl for the ads.
</p>
<hr>
<h3>Me In A Nutshell</h3>
</body>
Simply use
overflow-x: none;
for the horizontal scrollbar issue.
html {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
background-size: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-x: none;
}
Messed around with your code, didnt spend all day though. So there is still room for improvement, but fish around in here and pick what you like or build off of it.
body {
background-color: #e3e3e3;
margin: 0 auto;
padding: 0;
font-family: Arial;
}
.header {
background: url(https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png) no-repeat left fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border: 1px solid #000;
text-align: center;
height: 400px;
}
.mobilelinks {display: none;}
.wrapper {
margin: 50px;
}
#footer {
text-align: center;
}
#footer a {
color: #666;
margin-left: 8px;
}
#footer a:hover {
color: #222;
text-decoration: underline;
}
h1 {
color: white;
font-family: Arial;
font-size: 72px;
letter-spacing: 1px;
}
h2 {
color: #525252;
font-size: 36px;
letter-spacing: 1px;
text-align: center;
}
p {
font-family: Gill Sans, sans-serif;
color:#696969;
font-size: 17px;
text-align: center;
line-height: 150%;
}
a {
color: white;
text-decoration:none;
}
ul li {
text-align: center;
line-height: 40px;
display: inline-block;
letter-spacing: 1px;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:hover {
background-color: white;
}
ul li:hover > a {
color: #000;
}
#media screen and (max-width: 750px) {
.header {height: 300px;}
}
#media screen and (max-width: 500px) {
h1 {
font-size: 52px;
}
.links {display: none;}
.mobilelinks {display: inline-block;}
}
#media screen and (max-width: 400px) {
.header {height: 200px;}
.mobile-terms { display: none;}
h1 {
font-size: 36px;
}
h2 {
font-size: 22px;
}
}
<head>
<title>Morgan the Great</title>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="header">
<h1>Morgan White</h1>
<ul class="links">
<li><strong>MY LIFE</strong></li>
<li><strong>PORTFOLIO</strong></li>
<li><strong>RESUME</strong></li>
<li><strong>ABOUT ME</strong></li>
</ul>
<ul class="mobilelinks">
<li><strong>BUTTON</strong></li>
</ul>
</div>
<div id="mainwrapper">
<div class="wrapper">
<h2>Some Fun Facts</h2>
<p>
I made this website from scratch when I was 14, <br>
I have a twin brother whose name is Pierson McNeal White, <br>
I have a older brother and sister who are also twins, <br>
I used to have 2 pet rats named Hermes and Cleo after the greek gods, <br>
and I watch the super bowl for the ads.
</p>
</div>
<hr>
<div class="wrapper">
<h2>Me In A Nutshell</h2>
<p>
Other Crap Here.
</p>
</div>
</div>
<div id="footer">
Copyright © <script>document.write(new Date().getFullYear())</script> Morgan.
<div>
Link
Privacy Policy
Terms<span class="mobile-terms"> of Service</span>
</div>
</div>
Works on mobile devices.
Currently I have a hamburger menu button: https://jsfiddle.net/sqvwm1dh/
When this is clicked, I'd like to replace it with a graphic.
How do I achieve this with my current code, do I do this in jQuery?
$('header').prepend('<div id="menu-button"></div>');
$('#menu-button').on('click', function(){
var menuItems = $(".menu-primary-menu-container");
menuItems.toggle();
});
header {
background:red;
height:100px;
}
#menu-button {
position: relative;
z-index: 10000;
display: block;
top: 30px;
right:0;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 15px 0px 22px 20px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #ffffff;
cursor: pointer;
}
/* line 500, sass/_layout.scss */
#menu-button:after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
right: 20px;
top: 16px;
}
/* line 511, sass/_layout.scss */
#menu-button:before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
right: 20px;
top: 26px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<header>
<div class="menu-primary-menu-container">
test
</div>
</header>
Method 1(jQuery)
jQuery Methods Used - hide(); and show();
Do something like this-
Write the CSS and HTML of the graphic you want to replace with. Also set display:none; to the CSS of the graphic.
When the button is clicked hide the button and show the graphic.
eg-
`
$("#menu-button").click(function(){
$(this).hide();
$("#graphic").show();};);
Method 2 (CSS pseudo classes)
The above code is perfectly fine but, it would be an obtrusive code (code that affects functionality of the website if javascript is disabled or script is unable to load).
There are many times when we can't avoid javascript but , here we can so why not give it a shot?
for reference- CSS pseudo class - active
#graphic{ display:none; // add other required css for graphic such as property, height,etc}
#menu-button:active {
#graphic{ display:block;
}
#menu-button{display:none;
}
}
I think this is a nice and simple solution
$('header').prepend('<div id="menu-button"></div>');
$('#menu-button').on('click', function(){
var menuItems = $(".menu-primary-menu-container");
var menubutton = $(this);
if(menubutton.hasClass('active'))
menubutton.removeClass('active');
else
menubutton.addClass('active');
menuItems.toggle();
});
header {
background:red;
height:100px;
}
#menu-button {
position: relative;
z-index: 10000;
display: block;
top: 30px;
right:0;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 15px 0px 22px 20px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #ffffff;
cursor: pointer;
}
#menu-button.active {
/* add your graph here */
}
/* line 500, sass/_layout.scss */
#menu-button:after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
right: 20px;
top: 16px;
}
/* line 511, sass/_layout.scss */
#menu-button:before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
right: 20px;
top: 26px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<header>
<div class="menu-primary-menu-container">
test
</div>
</header>