Okay so I am learning HTML and CSS and I came across a little problem this afternoon.
I have tried so hard to fix this code for over 3 hours and it is still giving me the same output. So after the last div closing tag in the HTML document, I tried to make a header and a new h1 element but the problem is that, it appears in the purple like background in the gradient background which I don't want. I have tried several ways and means to fix the issue but I still end up with the same result.
`<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" >
<title>HomePage</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
<link rel="stylesheet" href="style.css" >
</head>
<body>
<div>
<nav>
<ul class="up-nav" id="dropdownClick">
<li>Home</li>
<li>Join Us</li>
<li>Sign In</li>
<li class="up-nav-right">Contact Us</li>
<li class="dropdownIcon">☰</li>
</ul>
</nav>
</div>
<div class="container" id="section-gradient">
<div class="row">
<div class="col-6">
<div>
<h1 class="big">Hi Sofie</h1>
<h1 class="big">Join Our Newsletter</h1>
</div>
<form>
<div>
<h2>First Name</h2>
<input class="inputfield" type="text" placeholder="First Name" name="First Name Here">
<h2>Email Address</h2>
<input class="inputfield" type="email" placeholder="Email Address" name="Email Address Here">
</div>
</form>
</div>
<div class="col-6">
<div class="rightSideCol">
<div class="videoEmbed">
<iframe width="560" height="315" src="https://www.youtube.com/embed/E6PTwrT5gFM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in- picture; web-share" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<header>
<h1>Lorem Ipsum</h1>
</header>
<script>
function dropdownMenu() {
var x = document.getElementById("dropdownClick");
/*#####Change up-nav to up.nav.respond#####*/
if (x.className === "up-nav") {
x.className += " respond";
}
else {
x.className = "up-nav"
}
}
</script>
</body>
</html>
`
And this is the CSS for it
`/*############ Defaults ##############*/
nav, header, footer {
display: block;
}
body {
margin: 0;
line-height: 1;
}
.container {
width: 100%;
margin:auto;
padding-top: 5%;
padding-bottom: 5%;
}
#section-gradient {
background: linear-gradient(180deg,#7C4CCF 0%, #3F2B96 100%);
}
h1.big {
color: #fff;
font-size: 56px;
margin:0;
margin-left: 20px;
line-height: 75px;
}
input[type="text"] {
width: 200px;
min-width: 100px;
font-size: 25px;
padding: 5px;
margin-left: 20px;
border-radius: 7px;
}
input[type="email"] {
width: 400px;
font-size: 25px;
min-width: 200px;
padding: 5px;
margin-left: 20px;
border-radius: 7px;
}
form h2 {
color: #fff;
margin-left: 20px;
}
.row {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.row::after {
display: table;
clear: both;
content: "";
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
/*############# Nav Bar Default ###############*/
nav {
width: 100%;
margin: 0;
}
/*############# Nav Bar Links Arrangement ##############*/
nav ul {
background-color: #eee;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
/* Float this to the left*/
ul.up-nav li {
float: left;
}
/* Float this to the right*/
ul.up-nav li.up-nav-right {
float: right;
}
ul.up-nav li a {
display: block;
text-decoration: none;
min-height: 16px;
padding: 14px;
text-transform: uppercase;
text-align: center;
color: #666;
}
/*############## Hover Effect On Links In Top Nav#################*/
ul.up-nav li a:hover {
background-color: #7C4CCF;
color: #fff;
}
/*############ Making The Trigram Dissapear In Desktop Mode ###############*/
ul.up-nav li.dropdownIcon {
display: none;
}
/*########Making The Trigram Appear In Mobile Mode Using A Media Query#########*/
#media screen and (max-width:680px) {
ul.up-nav li:not(:nth-child(1)) {
display: none;
}
ul.up-nav li.dropdownIcon {
display: block;
float: right;
}
ul.up-nav.respond li.dropdownIcon {
position: absolute;
top: 0;
right: 0;
}
ul.up-nav.respond {
position: relative;
}
ul.up-nav.respond li {
display: inline;
float: none;
}
ul.up-nav.respond li a {
display: block;
text-align: left;
}
.col-6 {
margin: 30px;
}
input[type="text"] {
width: 350px;
}
input[type="text"] {
width: 400px;
}
.videoEmbed iframe {
position: relative;
width: 100%;
margin: 0;
overflow: hidden;
}
}`
You're missing a closing </div> tag before the opening <header> tag.
As a side note, you should only ever have one <h1> tag per page. It is your most important heading. Read up more on heading tags here.
<h1 class="big">Hi Sofie</h1>
<h1 class="big">Join Our Newsletter</h1>
Should become
<h1 class="big">Hi Sofie<br> Join Our Newsletter</h1>
Related
I tried to do it with the .myslides-colorbox on the html/css. The background always seems to cut of at the edge of the top of the slideshow. I want the slide-show to be over a big box something like this is what I want to do with the slideshow. What do I have to add or place differently to make this happen? The controller represent my slideshow
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n >= x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
width: 100%;
min-height: 100vh;
/* background-color: red; */
padding-left: 8%;
/* padding-right: 8%; */
box-sizing: border-box;
overflow: hidden;
}
/* Navigation bar section*/
.navbar {
width: 100%;
display: flex;
align-items: center;
}
.logo {
width: 150px;
cursor: pointer;
margin: 30px;
}
#menu-icon {
width: 25px;
cursor: pointer;
}
nav {
flex: 1;
text-align: right;
}
nav ul li {
list-style: none;
display: inline-block;
margin-right: 30px;
}
nav ul li a {
text-decoration: none;
color: #000;
font-size: 20px;
}
nav ul li a:hover {
color:blue
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 100px 0;
}
.col-1 {
flex-basis: 40%;
position: relative;
margin-left: 50px;
}
.col-1 h2{
font-size: 54px;
}
.col-1 h3{
font-size: 30px;
color: #707070;
font-weight: 100;
margin: 20px 0 10px;
}
.col-1 p {
font-size: 16px;
color: #b7b7b7;
font-weight: 100;
}
.col-1 h4{
margin: 30px 0;
font-size: 20px;
}
button {
width: 140px;
border: 0;
padding: 12px 10px;
outline: none;
color: white;
background: linear-gradient(to right, #fb5283, #ff3527);
border-radius: 6px;
cursor: pointer;
/* transition: width 0.5s; */
}
/* button i {
width: 30px;
display: none;
} */
button:hover {
width: 160px;
background: linear-gradient(to right, #ff3527, #fb5283);
}
.col-1::after {
content: '';
width: 10px;
height: 57%;
background: linear-gradient(#fb5283, #ff3527);
position: absolute;
left: -40px;
top: 8px;
}
.col-2 {
position: relative;
flex-basis: 60%;
display: flex;
align-items: center;
margin-left: 200px;
}
.mySlides-colorBox {
position:sticky;
top: 0;
right: 0;
background: linear-gradient(#fb5283, #ff3527);
/* border-radius: 20px 0 0 20px; */
height: 100%;
width: 80%;
z-index: -1;
transform: translate(15);
}
.mySlides {display:none;}
.box{
width: 800px;
height: 400px;
border: 5px solid blue;
margin: 20px auto;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/15456887b7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="navbar">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTU3DPk4gCVZ0g40k0xiOjiwcqGY9MJkY4quA&usqp=CAU" class="logo">
<nav>
<ul>
<li>Home</li>
<li>Auction</li>
<li>Services</li>
<li>Proceedings</li>
<li>Contact</li>
</ul>
</nav>
<i class="fa-solid fa-bars" id="menu-icon"></i>
</div>
<div class="row">
<div class="col-1">
<h2>Come see our wonderful things!</h2>
<h3>Finnspeed Oy on perustettu vuonna 1995. Se on osakeyhtiö, jonka kotipaikka on Järvenpää, ja pääasiallinen toimiala Autoliike. Yhtiön toimitusjohtaja on Keijo Tapani Lehtonen.
Yhtiön Finnspeed Oy liikevaihto oli 46 tuhatta ja tilikauden tulos 13 tuhatta. Liikevaihto nousi 58,6%. Liikevoittoprosentti oli 37%. Tiedot perustuvat yhtiön viimeisimpään tilinpäätökseen vuodelta 2021.</h3>
<p>more info....</p>
<h4>Free entry</h4>
<button type="button">Button <i class="fa-solid fa-gavel"></i></button>
</div>
<div class="col-2">
<div class="image-container">
<img class="mySlides active" src="https://d1yb6h7rvkcay2.cloudfront.net/f6/d7/91/b0/c4/a8/41/a1/a4/da/02/38/c8/de/dd/6c/f6d791b0-c4a8-41a1-a4da-0238c8dedd6c-large::r:0.jpg" style="width:50%">
<img class="mySlides" src="https://d1yb6h7rvkcay2.cloudfront.net/aa/8e/9c/02/aa/1d/48/f4/82/a1/63/f1/fa/c8/bb/52/aa8e9c02-aa1d-48f4-82a1-63f1fac8bb52-large::r:0.jpg" style="width:50%">
<img class="mySlides" src="https://d1yb6h7rvkcay2.cloudfront.net/98/5f/b3/11/a1/b5/49/0e/b4/71/82/1e/a4/c7/18/60/985fb311-a1b5-490e-b471-821ea4c71860-large::r:0.jpg" style="width:50%">
<img class="mySlides" src="https://d1yb6h7rvkcay2.cloudfront.net/1d/03/8b/7c/66/36/45/19/98/b2/17/1a/fc/be/b9/e5/1d038b7c-6636-4519-98b2-171afcbeb9e5-large::r:0.jpg" style="width:50%">
<button class="mySlides-leftButton" onclick="plusDivs(-1)">❮</button>
<button class="mySlides-rightButton" onclick="plusDivs(1)">❯</button>
<div class="mySlides-colorBox"></div>
</div>
</div>
</div>
</div>
<div class="box">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
</div>
<script src="index.js"></script>
</body>
</html>
I'm creating simple page with a <header> and a <section>. In the section I have 3 divs and I am positioning them with display: flex; and justify-content: space-between.
The problem is that I also use JS slideToggle() on two of them (extreme ones). It is changing the layout of my center div after they are going up. How can I do it so that my center div doesn't change position after one of the others is slid up?
$(document).ready(function() {
$('#playlist').click(function() {
$('#nav').slideToggle();
});
});
$(document).ready(function() {
$('#songs').click(function() {
$('#listSongs').slideToggle();
});
});
section {
display: flex;
justify-content: space-between;
}
#listSongs {
margin-top: 50px;
height: 550px;
background-color: black;
border-radius: 5px;
font-size: 25px;
width: 200px;
}
#listSongs p {
margin-top: 5px;
width: 200px;
text-align: center;
overflow: hidden;
height: 35px;
line-height: 50px;
color: white;
}
#player {
color: red;
}
#nav {
margin-top: 50px;
height: 550px;
background-color: black;
border-radius: 20px;
width: 200px;
}
.hidden {
margin-top: 50px;
height: 550px;
background-color: black;
border-radius: 20px;
width: 200px;
visibility: hidden;
}
#nav p {
text-align: center;
}
#nav ul {
list-style-type: none;
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div id="listSongs">
<p>Authors:</p>
<div class="after"></div>
</div>
<div id="player">
<p>something</p>
</div>
<div id="nav">
<p>something</p>
</div>
</section>
The issue is because when the slideUp/slideDown/slideToggle methods complete, they set display: none on the target element. This is what causes the layout of your page to shift.
To workaround, and improve the animation, you can use CSS instead. Use the transition property to animate the height setting. Then you can toggle a class which sets height: 0 on the target element. Try this:
$(document).ready(function() {
$('#playlist').click(function() {
$('#nav').toggleClass('hide');
});
$('#songs').click(function() {
$('#listSongs').toggleClass('hide');
});
});
body { background-color: #CCC; }
section {
display: flex;
justify-content: space-between;
}
section > div.panel {
margin-top: 50px;
height: 550px;
background-color: black;
border-radius: 5px;
font-size: 25px;
width: 200px;
transition: height 0.4s;
overflow: hidden;
}
section > div.panel.hide {
height: 0;
}
section > div.panel p {
margin-top: 5px;
width: 200px;
text-align: center;
overflow: hidden;
height: 35px;
line-height: 50px;
color: white;
}
#player {
color: red;
}
#nav {
border-radius: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="playlist">Playlist</button>
<button id="songs">Songs</button>
<section>
<div id="listSongs" class="panel">
<p>Authors:</p>
<p>lorem ipsum</p>
<div class="after"></div>
</div>
<div id="player">
<p>something</p>
</div>
<div id="nav" class="panel">
<p>something</p>
</div>
</section>
Note that I also rearranged some of the CSS to make it more generic with less repetition.
Is it possible to attach onclick event to move the object img left, down and right.
The button are placeholder , the sequence are left,down and right.
I'm facing two issue:-
1. My width is 500px, even when I drew it at 250px. It doesn't center .
2. I've tried multiple ways to add the onclick function to -/+ the y-axis and x-axis .
I've even tried to adapt to this code :
http://www.authorcode.com/how-to-move-an-object-on-the-html5-canvas/
But no luck either.
Is there something i missing? I've checked on google mostly are keyevent handler.
JSBIN:
http://jsbin.com/wuseguvuka/2/edit?html,css,output
CSS:
#charset "utf-8";
/* Global Styles */
#main {
width:100%;
background-color:red;
}
body {
margin-left: auto;
margin-right: auto;
width: 92%;
max-width: 960px;
padding-left: 2.275%;
padding-right: 2.275%;
}
/* Header */
header {
text-align: center;
display: block;
}
header .profileLogo .logoPlaceholder {
background-color: white;
color:black;
width: 300px;
text-align: center;
}
header .logoPlaceholder span {
width: 180px;
height: 22px;
font-family: 'Montserrat', sans-serif;
color: black;
font-size: 30px;
font-weight: 700;
line-height: 53px;
}
header .logoPlaceholder2 span {
width: 180px;
height: 22px;
font-family: 'Montserrat', sans-serif;
color: black;
font-size: 30px;
font-weight: 700;
line-height: 53px;
}
header .profilePhoto {
background-color: rgba(237,237,237,1.00);
width: 259px;
border-radius: 50%;
height: 259px;
clear: both;
}
header .profileHeader h1 {
font-family: 'Montserrat', sans-serif;
color: rgba(146,146,146,1.00);
font-size: 30px;
font-weight: 700;
line-height: 24px;
}
header .profileHeader h3 {
font-family: sans-serif;
color: rgba(146,146,146,1.00);
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
hr {
background-color: rgba(208,207,207,1.00);
height: 1px;
}
header .profileHeader p {
font-family: sans-serif;
color: rgba(146,146,146,1.00);
font-size: 14px;
font-weight: 400;
line-height: 1.8;
overflow-y: auto;
}
header .socialNetworkNavBar {
text-align: center;
display: block;
margin-top: 60px;
clear: both;
}
header .socialNetworkNavBar .socialNetworkNav {
border-radius: 50%;
cursor: pointer;
}
header .socialNetworkNavBar .socialNetworkNav img:hover {
opacity: 0.5;
}
/* Media query for Mobile devices*/
#media only screen and (min-width : 285px) and (max-width : 480px) {
/* Header */
#main {
width:100%;
}
header {
width: 100%;
float: left;
}
.wrapper {
display: inline-block;
width: 100%;
height: 100%;
}
header .profileLogo .logoPlaceholder {
display: inline-block;
text-align: left;
}
header .profilePhoto {
display: inline-block;
}
header .profileHeader {
text-align: center;
margin-top: 10%;
}
header .profileHeader p {
text-align: justify;
}
header .socialNetworkNavBar {
text-align: center;
display: block;
margin-top: 60px;
clear: both;
margin-bottom: 15%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 60px;
height: 60px;
display: inline-block;
margin-right: 23px;
}
}
/* Media Query for Tablets */
#media only screen and (min-width : 481px) and (max-width : 1024px) {
/* Header */
header {
width: 100%;
float: none;
}
header .profileLogo .logoPlaceholder {
display: inline-block;
font-family: 'Montserrat', sans-serif;
}
header .profilePhoto {
float: left;
clear: both;
margin-right: 3%;
margin-top: 5%;
}
header .profileHeader {
text-align: left;
margin-top: 7%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 74px;
height: 74px;
display: inline-block;
margin-right: 23px;
}
}
/* Desktops and laptops */
#media only screen and (min-width:1025px) {
/* Header */
header .profileLogo .logoPlaceholder {
float: left;
margin-bottom: 50px;
}
header .profilePhoto {
float: left;
clear: both;
margin-right: 3%;
}
header .profileHeader {
text-align: left;
padding-top: 10%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 74px;
height: 74px;
display: inline-block;
margin-right: 23px;
}
.wrapper {
display: table;
padding: 0;
width: 100%;
height: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
.canvas-container {
position: relative;
max-width: 1024px;
min-width: 120px;
margin: 0 auto;
}
}
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About Page template By Adobe Dreamweaver CC</title>
<link href="AboutPageAssets/styles/aboutPageStyle.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/montserrat:n4:default;source-sans-pro:n2:default.js" type="text/javascript"></script>
<script>
function load() {
var context = document.getElementById('main').getContext("2d");
var img = new Image();
img.src = "http://via.placeholder.com/75x150";
img.onload = function () {
context.drawImage(img, 250, 0);
}
}
</script>
</head>
<body onload="load();">
<!-- Header content -->
<header>
<div class="profileLogo">
<!-- Profile logo. Add a img tag in place of <span>. -->
<p class="logoPlaceholder"><!-- <img src="logoImage.png" alt="sample logo"> --><span>Name :</span></p>
<p class="logoPlaceholder"><!-- <img src="logoImage.png" alt="sample logo"> --><span>Attempts :</span></p>
<p class="logoPlaceholder"><!-- <img src="logoImage.png" alt="sample logo"> --><span>Score :</span></p>
</div>
<section>
<div class="wrapper">
<div class="container">
<div class="canvas-container">
<canvas id="main" width="500px" height="250px"></canvas>
</div>
</div>
</div>
</section>
<!-- Links to Social network accounts -->
<aside class="socialNetworkNavBar">
<div style="margin-right: 50px;" class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here -->
<input type="image" src="http://via.placeholder.com/75x75" >
</div>
<div id="left" style="margin-right: 50px;" class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here -->
<input type="image" src="http://via.placeholder.com/75x75" > </div>
<div id="down" style="margin-right: 50px;" class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here -->
<input id="right" type="image" src="http://via.placeholder.com/75x75" >
</div>
</aside>
</header>
<!-- content -->
</body>
</html>
Yes!
It is absolutely possible. Here is how you could achieve that ...
function load() {
var context = document.getElementById('main').getContext("2d");
var left = document.getElementById('left');
var down = document.getElementById('down');
var right = document.getElementById('right');
var imgLoaded = false;
var posX = 250;
var posY = 0;
var snap = 10;
var img = new Image();
img.onload = function() {
imgLoaded = true;
context.drawImage(img, posX, posY);
};
img.src = "http://via.placeholder.com/75x150";
// left button click
left.onclick = function() {
if (!imgLoaded) return;
posX = posX - snap;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.drawImage(img, posX, posY);
};
// down button click
down.onclick = function() {
if (!imgLoaded) return;
posY = posY + snap;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.drawImage(img, posX, posY);
};
// right button click
right.onclick = function() {
if (!imgLoaded) return;
posX = posX + snap;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.drawImage(img, posX, posY);
};
}
#charset "utf-8";
/* Global Styles */
#main {
width: 100%;
background-color: red;
}
body {
margin-left: auto;
margin-right: auto;
width: 92%;
max-width: 960px;
padding-left: 2.275%;
padding-right: 2.275%;
}
/* Header */
header {
text-align: center;
display: block;
}
header .profileLogo .logoPlaceholder {
background-color: white;
color: black;
width: 300px;
text-align: center;
}
header .logoPlaceholder span {
width: 180px;
height: 22px;
font-family: 'Montserrat', sans-serif;
color: black;
font-size: 30px;
font-weight: 700;
line-height: 53px;
}
header .logoPlaceholder2 span {
width: 180px;
height: 22px;
font-family: 'Montserrat', sans-serif;
color: black;
font-size: 30px;
font-weight: 700;
line-height: 53px;
}
header .profilePhoto {
background-color: rgba(237, 237, 237, 1.00);
width: 259px;
border-radius: 50%;
height: 259px;
clear: both;
}
header .profileHeader h1 {
font-family: 'Montserrat', sans-serif;
color: rgba(146, 146, 146, 1.00);
font-size: 30px;
font-weight: 700;
line-height: 24px;
}
header .profileHeader h3 {
font-family: sans-serif;
color: rgba(146, 146, 146, 1.00);
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
hr {
background-color: rgba(208, 207, 207, 1.00);
height: 1px;
}
header .profileHeader p {
font-family: sans-serif;
color: rgba(146, 146, 146, 1.00);
font-size: 14px;
font-weight: 400;
line-height: 1.8;
overflow-y: auto;
}
header .socialNetworkNavBar {
text-align: center;
display: block;
margin-top: 60px;
clear: both;
}
header .socialNetworkNavBar .socialNetworkNav {
border-radius: 50%;
cursor: pointer;
}
header .socialNetworkNavBar .socialNetworkNav img:hover {
opacity: 0.5;
}
/* Media query for Mobile devices*/
#media only screen and (min-width: 285px) and (max-width: 480px) {
/* Header */
#main {
width: 100%;
}
header {
width: 100%;
float: left;
}
.wrapper {
display: inline-block;
width: 100%;
height: 100%;
}
header .profileLogo .logoPlaceholder {
display: inline-block;
text-align: left;
}
header .profilePhoto {
display: inline-block;
}
header .profileHeader {
text-align: center;
margin-top: 10%;
}
header .profileHeader p {
text-align: justify;
}
header .socialNetworkNavBar {
text-align: center;
display: block;
margin-top: 60px;
clear: both;
margin-bottom: 15%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 60px;
height: 60px;
display: inline-block;
margin-right: 23px;
}
}
/* Media Query for Tablets */
#media only screen and (min-width: 481px) and (max-width: 1024px) {
/* Header */
header {
width: 100%;
float: none;
}
header .profileLogo .logoPlaceholder {
display: inline-block;
font-family: 'Montserrat', sans-serif;
}
header .profilePhoto {
float: left;
clear: both;
margin-right: 3%;
margin-top: 5%;
}
header .profileHeader {
text-align: left;
margin-top: 7%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 74px;
height: 74px;
display: inline-block;
margin-right: 23px;
}
}
/* Desktops and laptops */
#media only screen and (min-width: 1025px) {
/* Header */
header .profileLogo .logoPlaceholder {
float: left;
margin-bottom: 50px;
}
header .profilePhoto {
float: left;
clear: both;
margin-right: 3%;
}
header .profileHeader {
text-align: left;
padding-top: 10%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 74px;
height: 74px;
display: inline-block;
margin-right: 23px;
}
.wrapper {
display: table;
padding: 0;
width: 100%;
height: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
.canvas-container {
position: relative;
max-width: 1024px;
min-width: 120px;
margin: 0 auto;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About Page template By Adobe Dreamweaver CC</title>
<link href="AboutPageAssets/styles/aboutPageStyle.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>
var __adobewebfontsappname__ = "dreamweaver"
</script>
<script src="http://use.edgefonts.net/montserrat:n4:default;source-sans-pro:n2:default.js" type="text/javascript"></script>
</head>
<body onload="load();">
<!-- Header content -->
<header>
<div class="profileLogo">
<!-- Profile logo. Add a img tag in place of <span>. -->
<p class="logoPlaceholder">
<!-- <img src="logoImage.png" alt="sample logo"> --><span>Name :</span></p>
<p class="logoPlaceholder">
<!-- <img src="logoImage.png" alt="sample logo"> --><span>Attempts :</span></p>
<p class="logoPlaceholder">
<!-- <img src="logoImage.png" alt="sample logo"> --><span>Score :</span></p>
</div>
<section>
<div class="wrapper">
<div class="container">
<div class="canvas-container">
<canvas id="main" width="500px" height="250px"></canvas>
</div>
</div>
</div>
</section>
<!-- Links to Social network accounts -->
<aside class="socialNetworkNavBar">
<div id="left" style="margin-right: 50px;" class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here -->
<input type="image" src="http://via.placeholder.com/75x75">
</div>
<div id="down" style="margin-right: 50px;" class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here -->
<input type="image" src="http://via.placeholder.com/75x75"> </div>
<div id="right" style="margin-right: 50px;" class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here -->
<input type="image" src="http://via.placeholder.com/75x75">
</div>
</aside>
</header>
<!-- content -->
</body>
</html>
apology for not giving explanation
I am using Chrome and Window Resizer by ionut botizan v 1.9.1.2
I am using atom open source editor, although I initially created the page in phpstorm
My problem
I am able to click the window resize button and the page will resize upto ipad, when I try to resize mobile versions,
high end windows phone, iphone and low end windows phone
the browser window remains the size of the ipad coefficents 1024 x 768 and only some page elements will allow me to adjust its width, I can change other properties, i.e color,background etc. however the
width of header, banner and left_right_content,wont budge, adjust in size
this also cause the effect of being able to scroll to the right
I have tried other sites i have made and the plugin works fine, and I have also tested a live website, and that seems to work, theres is something in this code stopping resizing, maybe some one will notice where something I missed, any help welcome
<head>
<meta charset= "utf-8">
<meta name="descripton" content="kids at play"/>
<meta name= "keywords" content="kids, club, play, learn"/>
<meta name="robots" content=index,follow/>
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0">
<base href="http://localhost/Kids Club/Kids_Club.html"/>
<link rel="stylesheet" href="Kids_Club.css" type="text/css"/>
<title>html_5</title>
</head>
<body>
<div id="wrapper">
<div id="header"><img id ="img_header" src="jpg/kids_club_header.jpg" alt="kids club"/>
</div>
<nav>
<ul>
<li>Home</li>
<li>Playgroups
<ul>
<li>Under Fives</li>
<li>Under Tens</li>
<li>The Teens
</ul>
</li>
<li>Play & Learn
<ul>
<li>Field Trips</li>
<li>Tutor Groups</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
<div id="banner"><img id ="img_banner" src="jpg/kids.jpg" alt="kids"/>
</div>
<div id="left_col_content">
<h2 class="top_title">Bring out the tiger in you</h2>
<h3 class="top_title">Activities for the Under Fives and Tens</h3>
<p>Is your little one sporty, and loves the challenge, then why not sign, him or her up for an afternoon of pure fun,
laughter and leisure at Bernie's tiger bar, where we work, rest and play all through out the day</p>
<img id ="left_column_img" src="jpg/tieger.jpg" alt="kids club"/>
more info
</div>
<div id="right_col_content">
<h2 class="top_title">Play and Learn</h2>
<h3 class="top_title" >Activities for all</h3>
<p>Life is all about balance, and as we spend time feeding our minds, it is also important that we make
time for play.Our aim is to make learning not only fun, but a foundation were we can build and grow.
</p>
<img id ="right_column_img" src="jpg/Where-Children-Learn-Play-and-Grow.jpg" alt="play and learn"/>
more info
</div>
<div id="newsflash">
<h2>Latest news</h2>
<p>Summer camp 2016 - The amazon, with a touch of carribean, Parents and siblings welcome, more info to come</p>
</div>
<div id="left_right_content"><h2 id="activity">What's On Today</h2>
<img id="jumeirah" src="jpg/jumeirah-beach.jpg" alt="jumeirah"/>
<img id="artandcraft" src="jpg/artandcraft.jpg" alt="artandcraft"/>
</div>
<div id="footer"></div>
</div>
</body>
</html>
body{
background-color: #024378;
}
#wrapper{
min-width:960px;
width: 75%;
margin-left: auto;
margin-right: auto;
background-color: #e3f1f2;
}
#header,#img_header{
min-width: 960px;
width:100%;
min-height:100px;
height:12.5%;
}
.top_title{
color: #009fc0;
}
nav{
min-width:640px;
width: 70%;
margin-left:auto;
margin-right:auto;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #009fc0;
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #ffffff;
}
nav ul li:hover a {
color: #96a4a5;
}
nav ul li a {
display: block;
padding: 25px 40px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
}
nav ul ul li a:hover {
background: #ffffff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
nav ul ul {
background: #ffffff; border-radius: 0; padding: 0;
position: absolute; top: 100%;display:none;
}
/*images or divs that span across the page use margin left and right 'auto', divs that are smaller in size and form
columns within the page use set margins, i.e10px*/
#img_banner {
min-width:940px;
width: 100%;
height: 240px;
margin-left: auto;
margin-right: auto;
}
#banner{
min-width: 940px;
width: 73.4375%;
height: 240px;
margin-left: auto;
margin-right: auto;
}
#left_col_content{
float:left;
min-width: 420px;
width:32.8125%;
margin: 1%;
background-color: #ffffff;
color: #06acef;
text-indent:10px;
padding: 2%;
}
#right_col_content{
float:left;
min-width: 420px;
width:32.8125%;
margin: 1%;
background-color: #ffffff;
color: #06acef;
text-indent:10px;
padding: 2%;
}
#left_column_img, #right_column_img{
min-width: 200px;
width:15.625%;
min-height: 100px;
height:12.5%;
margin-left: auto;
margin-right: auto;
}
#newsflash{
clear:both;
min-width: 920px;
width:71.875%;
min-height:50px;
height:6.25%;
background-color: #009fc0;
margin-left: auto;
margin-right: auto;
color:#fff;
text-indent:10px;
padding: 1%;
}
#left_right_content{
min-width: 890px;
width: 69.53%;
margin: 10px auto;
height:300px;
background-color: #ffffff;
color: #06acef;
border: dashed #009fc0;
padding: 2%;
}
#activity {
border-bottom: dotted 3px #06acef;
}
#jumeirah{
clear: both;
float: left;
min-width:80px;
width: 47%;
padding: 10px;
}
#artandcraft{
clear: none;
float: right;
min-width:80px;
width: 47%;
padding: 10px;
}
#footer{
clear:both;
min-width: 940px;
width:73.4375%;
min-height:50px;
height:6.25%;
background-color: #009fc0;
margin:auto;
color:#fff;
text-indent:10px;
}
#media only screen and (min-width:0px) and (max-width:480px) {
/*low end windows phone*/
}
#media only screen and (min-width:481px) and (max-width:640px){
/*iphone*/
#header,#img_header{
width: 50%;
}
#left_col_content {
width: 58%;
}
#right_col_content{
clear: both;
width: 58%;
}
#newsflash{
width: 56%;
}
#left_right_content{
width: 58%;
}
}
#media only screen and (min-width:641px) and (max-width:768px) {
/*high windows phone*/
}
#media only screen and (min-width:769px) and (max-width:1024px) {
/*ipad*/
#left_col_content {
width: 94%;
}
#right_col_content{
width: 94%;
}
}
It's always helpful to place your code on http://jsfiddle.net to help us visualise.
I've copied your code to https://jsfiddle.net/uhds3eac/
The many min-widthproperties you're using should be wrapped in a media-query for only larger screen sizes :
#media screen and (min-width:920px){
#newsflash {
min-width: 920px;
}
}
It's often a good idea to start with mobile, then accomodate for larger screens with #media rules.
Note: This isn't the issue but you're missing a starting <html> tag
Your min-width statements look like the culprits, try removing them.
You'll still need to tinker with the width of some parts to make it look good, but as a rule try to only use percentage values, not px.
body {
background-color: #024378;
}
#wrapper {
width: 75%;
margin-left: auto;
margin-right: auto;
background-color: #e3f1f2;
}
#header,
#img_header {
width: 100%;
min-height: 100px;
height: 12.5%;
}
.top_title {
color: #009fc0;
}
nav {
width: 70%;
margin-left: auto;
margin-right: auto;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #009fc0;
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #ffffff;
}
nav ul li:hover a {
color: #96a4a5;
}
nav ul li a {
display: block;
padding: 25px 40px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
}
nav ul ul li a:hover {
background: #ffffff;
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
nav ul ul {
background: #ffffff;
border-radius: 0;
padding: 0;
position: absolute;
top: 100%;
display: none;
}
/*images or divs that span across the page use margin left and right 'auto', divs that are smaller in size and form
columns within the page use set margins, i.e10px*/
#img_banner {
width: 100%;
height: 240px;
margin-left: auto;
margin-right: auto;
}
#banner {
width: 73.4375%;
height: 240px;
margin-left: auto;
margin-right: auto;
}
#left_col_content {
float: left;
width: 32.8125%;
margin: 1%;
background-color: #ffffff;
color: #06acef;
text-indent: 10px;
padding: 2%;
}
#right_col_content {
float: left;
width: 32.8125%;
margin: 1%;
background-color: #ffffff;
color: #06acef;
text-indent: 10px;
padding: 2%;
}
#left_column_img,
#right_column_img {
width: 15.625%;
min-height: 100px;
height: 12.5%;
margin-left: auto;
margin-right: auto;
}
#newsflash {
clear: both;
width: 71.875%;
min-height: 50px;
height: 6.25%;
background-color: #009fc0;
margin-left: auto;
margin-right: auto;
color: #fff;
text-indent: 10px;
padding: 1%;
}
#left_right_content {
width: 69.53%;
margin: 10px auto;
height: 300px;
background-color: #ffffff;
color: #06acef;
border: dashed #009fc0;
padding: 2%;
}
#activity {
border-bottom: dotted 3px #06acef;
}
#jumeirah {
clear: both;
float: left;
width: 47%;
padding: 10px;
}
#artandcraft {
clear: none;
float: right;
width: 47%;
padding: 10px;
}
#footer {
clear: both;
width: 73.4375%;
min-height: 50px;
height: 6.25%;
background-color: #009fc0;
margin: auto;
color: #fff;
text-indent: 10px;
}
#media only screen and (min-width: 0px) and (max-width: 480px) {
/*low end windows phone*/
}
#media only screen and (min-width: 481px) and (max-width: 640px) {
/*iphone*/
#header,
#img_header {
width: 50%;
}
#left_col_content {
width: 58%;
}
#right_col_content {
clear: both;
width: 58%;
}
#newsflash {
width: 56%;
}
#left_right_content {
width: 58%;
}
}
#media only screen and (min-width: 641px) and (max-width: 768px) {
/*high windows phone*/
}
#media only screen and (min-width: 769px) and (max-width: 1024px) {
/*ipad*/
#left_col_content {
width: 94%;
}
#right_col_content {
width: 94%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="descripton" content="kids at play" />
<meta name="keywords" content="kids, club, play, learn" />
<meta name="robots" content=index,follow/>
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0">
<base href="http://localhost/Kids Club/Kids_Club.html" />
<link rel="stylesheet" href="Kids_Club.css" type="text/css" />
<title>html_5</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<img id="img_header" src="jpg/kids_club_header.jpg" alt="kids club" />
</div>
<nav>
<ul>
<li>Home
</li>
<li>
Playgroups
<ul>
<li>Under Fives
</li>
<li>Under Tens
</li>
<li>The Teens
</ul>
</li>
<li>
Play & Learn
<ul>
<li>Field Trips
</li>
<li>Tutor Groups
</li>
</ul>
</li>
<li>Contact Us
</li>
</ul>
</nav>
<div id="banner">
<img id="img_banner" src="jpg/kids.jpg" alt="kids" />
</div>
<div id="left_col_content">
<h2 class="top_title">Bring out the tiger in you</h2>
<h3 class="top_title">Activities for the Under Fives and Tens</h3>
<p>Is your little one sporty, and loves the challenge, then why not sign, him or her up for an afternoon of pure fun, laughter and leisure at Bernie's tiger bar, where we work, rest and play all through out the day
</p>
<img id="left_column_img" src="jpg/tieger.jpg" alt="kids club" />
more info
</div>
<div id="right_col_content">
<h2 class="top_title">Play and Learn</h2>
<h3 class="top_title">Activities for all</h3>
<p>Life is all about balance, and as we spend time feeding our minds, it is also important that we make time for play.Our aim is to make learning not only fun, but a foundation were we can build and grow.
</p>
<img id="right_column_img" src="jpg/Where-Children-Learn-Play-and-Grow.jpg" alt="play and learn" />
more info
</div>
<div id="newsflash">
<h2>Latest news</h2>
<p>Summer camp 2016 - The amazon, with a touch of carribean, Parents and siblings welcome, more info to come</p>
</div>
<div id="left_right_content">
<h2 id="activity">What's On Today</h2>
<img id="jumeirah" src="jpg/jumeirah-beach.jpg" alt="jumeirah" />
<img id="artandcraft" src="jpg/artandcraft.jpg" alt="artandcraft" />
</div>
<div id="footer"></div>
</div>
</body>
</html>
Try researching Mobile First Design to learn more.
I am designing a stat board for a call center and I am having trouble getting 2 elements to size up correctly. I have used an automatic text resizer called FitText(link below). I have gotten every other element to work with FitText except the 100% and 100 listed in the code. I cannot figure out why the 100% and the 100 just stay so small compared to the sizes of the divs they are contained in. Both containers are 100% width. I have played around with hundreds of CSS combinations to no avail. Any help will be greatly appreciated. Via the requests below, here is the JSFiddle link.
http://jsfiddle.net/neggly/57tVW/
CSS
#wrap {
position: absolute;
height:100%;
width:100%;
margin:0 auto;
background-color: black;
}
#statuscolorwrap
{
background-color: aqua;
float: left;
width: 1%;
height: 100%;
}
#numberwrap
{
background-color: #ff0;
float: left;
width: 20%;
height: 100%;
}
#announcementwrap
{
background-color: coral;
float: left;
width: 79%;
height: 100%;
}
#queuewrapper
{
height:40%;
width:100%;
float: top;
background-color: darkorchid;
}
#queuecolors
{
height:40%;
width:100%;
float: top;
background-color: cadetblue;
}
#queuepercentage
{
height: 50%;
width: 100%;
float: top;
background-color: chartreuse;
}
#queueholding
{
height: 50%;
width: 100%;
float: bottom;
background-color: crimson;
}
#topcolor
{
height: 50%;
width: 100%;
float: top;
background-color: darkseagreen;
}
#bottomcolor
{
height: 50%;
width: 100%;
float: bottom;
background-color: moccasin;
}
#datetimewrapper
{
width:100%;
height:5%;
float: top;
background-color: deepskyblue;
}
#messages
{
width: 100%;
height: 60%;
float: top;
background-color: darkorchid;
overflow-y: auto;
}
.messagewrapper
{
width: 100%;
height: 100px;
float:top;
background-color: azure;
}
.messageimportance
{
float:left;
width: 5%;
height: 100%;
background-color: darkslategrey;
}
.messagesubject
{
float:left;
width: 95%;
height: 100%;
background-color: blanchedalmond;
}
h1
{
font: Helvetica, sans-serif;
margin:0;
padding:0;
text-align: center;
}
h2
{
font: Helvetica, sans-serif;
margin:0;
padding:0;
text-align: center;
}
h3
{
font: Helvetica, sans-serif;
font-weight: bold;
margin:0;
padding:0;
text-align: center;
}
#anpicturewrap
{
float:top;
width:100%;
height:45%;
background-color: darkcyan;
}
#antextwrap
{
float:top;
width:100%;
height:50%;
background-color: darkkhaki;
overflow-y: auto;
}
img
{
max-width: 100%;
max-height: 100%;
display:block;
margin:auto;
}
h4
{
font: Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: left;
}
#text
{
width: auto;
margin-left: 40px;
margin-right:40px;
margin-bottom: 30px;
}
.subjecttext
{
height: 100%;
width:100%;
margin-left: 10px;
margin-right: 10px;
margin-top: auto;
margin-bottom: auto;
}
HTML
<html>
<head>
<title>Virginia Summary</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="reset.css"/>
<link rel="stylesheet" href="base.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/libs/jquery/jquery.fittext.js" type="text/javascript"></script>
</head>
<body>
<div id="wrap">
<div id="numberwrap">
<div id="queuewrapper">
<div id="queuepercentage">
<div class="subjecttext">
<h1 id="fittext1">1</h1>
</div>
</div>
<div id="queueholding">
<h1 id="fittext2">100</h1>
</div>
</div>
<div id="messages">
<div class="messagewrapper">
<div class="messagesubject">
<div class="subjecttext">
<h2 id="fittext3">Enter Subject here</h2>
</div>
</div>
<div class="messageimportance">
</div>
</div>
</div>
</div>
<div id ="statuscolorwrap">
<div id="queuecolors">
<div id="topcolor">
</div>
<div id="bottomcolor">
</div>
</div>
</div>
<div id="announcementwrap">
<div id="datetimewrapper">
<h3 id="fittext4">12/12/2014 18:00</h3>
</div>
<div id="anpicturewrap">
<img src="images/pic.jpg" alt=""/>
</div>
<div id="antextwrap">
<div id="text">
<h4 id="fittext5">sample text</h4>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("h1").fitText(1);
$("#fittext2").fitText(1.2);
$("#fittext3").fitText(1.2);
$("#fittext4").fitText(1.2, {minFontSize: '20px', maxFontSize: '30px'});
$("#fittext5").fitText(1.2);
</script>
</body>
</html>
https://github.com/davatron5000/FitText.js
Default margins on headings and some of the margins you have set are causing some of the alignment issues. If you switched some of that to padding, and used box-sizing:border-box; on some of those divs, it would make things a bit easier to style:
div {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
In the JS fiddle example, it doesn't look the Javascript to resize the text is actually being called on anything. When I turn on JQuery in the fiddle and then actually call the text-resize stuff on your elements it does work to resize the elements.
$(document).ready( function(){
jQuery("#fittext1").fitText(.2);
jQuery("#fittext2").fitText(.3);
jQuery("#fittext3").fitText(.6);
jQuery("#fittext4").fitText(1, {minFontSize: '20px', maxFontSize: '30px'});
jQuery("#fittext5").fitText(1.2);
});
Edit: I updated some of your CSS so it worked the way you might have expected it to. I moved normalize to the top of your CSS, since it should be the first thing added. You will probably want to add some space and things in some of the boxes, but since I added the border-box, you can just do this with padding on the percentage sized elements.
http://jsfiddle.net/57tVW/2/