I'm not sure what's causing the form button to fire the event of turning the page theme back to white after the dark mode has been clicked and enabled.
Not sure if that may be confusing, but for example if you open the page it's automatically on the light mode theme, when you click "dark" to switch the theme to dark and then click the button "search" while the theme is in "dark", the page will switch back to "light". What am I doing wrong or missing out? Please advise. Also, how could I refractor this JS better and simpler?
Thanks!
HTML - left out the head part intentionally
<html lang="en" color-mode="light">
<body>
<header class="header-container">
<h1 class="title">devfinder</h1>
<div class="light-dark mode">
<span
class="theme-toggle-btn light-hidden light"
aria-label="light theme toggle button">
LIGHT
<img class="light-icon" src="assets/icon-sun.svg" alt="" />
</span>
<span
class="theme-toggle-btn dark-hidden"
aria-label="dark theme toggle button">
DARK
<img src="assets/icon-moon.svg" alt="" />
</span>
</div>
</header>
<main class="content-container">
<section>
<form autocomplete="off" class="form" id="search">
<input
type="text"
id="search"
placeholder="Search GitHub username…" />
<button class="btn">Search</button>
</form>
JS
const themeBtn = document.querySelectorAll(".theme-toggle-btn");
const toggle = function (e) {
if (e.currentTarget.classList.contains("light-hidden")) {
document.documentElement.setAttribute("color-mode", "light");
localStorage.setItem("color-mode", "light");
return;
}
document.documentElement.setAttribute("color-mode", "dark");
localStorage.setItem("color-mode", "dark");
};
themeBtn.forEach((btn) => {
btn.addEventListener("click", toggle);
});
CSS
:root {
--monoFont: 'Space Mono', monospace;
--accent-blue: #0079FF;
--error-red: #F74646;
--light-hover: #60ABFF;
}
:root[color-mode="light"] {
--primary-text-color:#697C9A;
--secondary-text-color: #4B6A9B;
--accent-color: #2B3442;
--background-color: #F6F8FF;
--container-background: #FEFEFE;
--font-color: #222731;
}
:root[color-mode="dark"] {
--primary-text-color: #FFFFFF;
--background-color: #141D2F;
--container-background: #1E2A47;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
:root[color-mode="light"] .light-hidden,
:root[color-mode="dark"] .dark-hidden {
display: none;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--background-color);
height: 100vh;
margin: 0;
color: var(--primary-text-color);
font-family: var(--monoFont);
}
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2em;
}
.header-container, .content-container {
width: 100%;
max-width: 730px;
}
/* header title */
.title {
color: var(--font-color);
font-size: 1.63rem;
}
/* theme toggle btn */
.theme-toggle-btn {
background-color: var(--background-color);
border: none;
color: var(--primary-text-color);
font-size: .7rem;
font-weight: 700;
letter-spacing: 1.5px;
cursor: pointer;
}
.theme-toggle-btn img {
margin: 0 0 -0.45em 0.75em;
width: 20px;
height: 20px;
}
/* search form */
.form {
position: relative;
display: flex;
align-items: center;
height: 69px;
}
.form input {
background-color: var(--container-background);
border: none;
width: 100%;
padding-left: 1.5em;
margin-bottom: 2em;
color: var(--font-color);
font-size: 1.05rem;
font-family: inherit;
font-weight: 400;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;;
}
.form input::placeholder {
color: var(--secondary-text-color);
}
.btn {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-80%);
width: 100%;
max-width: 106px;
height: 50px;
background-color: var(--accent-blue);
border: none;
color: #FFFFFF;
font-size: 1rem;
border-radius: 10px;
cursor: pointer;
}
.btn:hover {
background-color: var(--light-hover);
}
I think when you're clicking the "Search" button, it's refreshing the page and reloads the html template. Because you have "color-mode="light" within the html element, it will then load the page in light mode rather than dark mode.
I think the problem is: your not consuming the selection from localStorage. To persist the user selection, you should check the preference in localStorage when the page loads.
This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 9 months ago.
I am having trouble as to how to make the contents of the dropdown menu hide when clicking off of the dropdown menu on the page. I have provided the code below and need some assistance. Please help in explaining the correct javascript code.
<!-- html code -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<div class = "header">
<div class = "logo">Logo</div>
<div class = "dropdown">
<div class ="button">
<i class="fa-solid fa-bars" id ="button"></i>
</div>
<div class = "dropdown-content" id = "myDropdown">
<nav>
<ul class ="dropdownMenu">
<li>Home</li>
<li>About</li>
<li>Store</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
This is the CSS Code for the webpage.
/* css code */
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100&family=Open+Sans:wght#300;400&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
height: 80px;
background-color: lightblue;
box-shadow: 0px 3px #888888;
display: flex;
justify-content: space-between;
line-height: 55px;
z-index: 99;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
padding: 10px 10px;
}
ul li a {
text-decoration: none;
color: black;
font-family: 'Montserrat', sans-serif;
}
.logo {
padding: 10px 10px;
font-family: 'Montserrat', sans-serif;
font-size: 3em;
}
#button {
display: none;
}
#media only screen and (max-width: 550px) {
body {
padding: 0;
margin: 0;
background-color: lightblue;
}
.header {
display: flex;
flex-direction: column;
/*z-index: 99;*/
}
ul li {
display: flex;
flex-direction: column;
width: 100%;
padding: 0;
}
ul li a {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
height: 5em;
width: 100%;
text-align: center;
border-bottom: 1px solid black;
color: black;
font-size: 20px;
font-weight: 800;
justify-content: center;
}
a:hover {
background-color: lightblue;
}
#button {
display: inline;
top: 0;
right: 0;
padding: 30px;
/*z-index: 98;*/
position: absolute;
color: black;
}
.dropdown-content {
display: none;
background-color: white;
/*z-index: 97;*/
}
.show {display:block;}
}
This is the javascript code for the webpage.
// JS Code
// Not sure how to close dropdown menu when page is clicked off of dropdown menu on page
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
You can add a click handler on the whole page and toggle the dropdown with it. Though would need some checks and bubbling prevention on the dropdown itself, but this way it should work:
document.documentElement.addEventListener(
'click',
() => document.getElementById("myDropdown").classList.toggle("hide"),
false
);
I am working an a project for setting up a basic responsive web page for myself. I have everything the way that I want it for my set up but I am having problems with my function to open and close the hamburger menu on screens with a max-width of less than 480px. If I take the method toggleMenu() off of my div with a menu class and I uncomment out the javascript code that is currently commented out and comment out the code that is currently active, everything works perfect on every click. However if I leave the code as is and run it in the browser the menu only toggles open on every other click, so the first time I click it nothing happens, the second time I click it, the menu opens up, the third time I click it nothing happens and finally when I click the fourth time the menu closes back up again. The other issue that I am having is currently I have to include an external script file or put a script inside of my html file rather than relying on my build.js file to import the code. My question is what am I missing to get my menu to open and close correctly while still calling a function from my menu class and how would I write this as a module that I can bundle and run from my build.js file. Any help is greatly appreciated and thank you in advance.
My HTML File:
<!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">
<!-- Bring in google fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat+Alternates&display=swap" rel="stylesheet">
<!-- Bring in bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- Bring in JSPopper -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="src/js/index.js" defer></script>
<!-- Bring in my style sheet -->
<link rel="stylesheet" href="src/assets/css/basic-style.css">
<title>Basic Page Setup</title>
</head>
<body>
<nav class="navbar">
<div class="logo-container">
<a href="#">
<img src="src/assets/images/seethrough_1.png" alt="seethrough_1" class="logo-image">
<span class="logo-text">LOGOHERE</span>
</a>
</div>
<ul class="nav-list" id="navi-list">
<li class="list-item">
About Us
</li>
<li class="list-item">
Contact
</li>
<li class="list-item">
Support
</li>
</ul>
<div class="menu" id="toggle-menu" onclick="toggleMenu()">
<div class="menu-line"></div>
<div class="menu-line"></div>
<div class="menu-line"></div>
</div>
</nav>
<div class="main-content">
<p class="my-story">
Not many have a story like mine. At 2 years old I was diagnosed with leukemia
and went into chemotherapy. This brings a great many problems, not least among
them a compromised immune system. I caught a cold that turned into pneumonia
and I died. It didn’t stick. In that time I saw things that would influence my life
profoundly. I can’t explain what happened but when I woke up, the pneumonia was
gone along with the leukemia. I have also overcome Pancreatic Cancer, Crohn's Disease,
and Diabetes just to name a few of the hurdles I found myself lifted over. I give all glory
to God, but I tell you these things not to garner sympathy or convince you that my God is
real. I tell you this because I believe all these things made me a purposeful person. I got a
certification in Computer programming on purpose. I write clean code on purpose. I believe
you are reading this on purpose. Let me show you what I can do for you on purpose.
</p>
</div>
<div class="footer-container">
<div class="logo-copyright">
<span class="copyright">©</span>
<img src="src/assets/images/seethrough_1.png" alt="seethrough_1" class="footer-logo">
<span class="footer-text">WebTek</span>
</div>
<div class="webmaster-contact">
<span class="footer-info">This page created and designed by</span>
Thomas E. Kremer
</div>
</div>
<!-- <script src="dist/build.js" defer></script>
-->
<!-- <script src="src/js/index.js" defer></script> -->
</body>
</html>
My CSS File:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Style the logo image and text */
/* .company-logo {
text-decoration: none;
}
.logo-image {
width: 75px;
height: 75px;
}
.logo-text {
font-family: Montserrat Alternates;
font-weight: 600;
font-style: none;
font-size: 35px;
color: rgba(0, 0, 0, 1);
line-height: 32px;
letter-spacing: 0.03em;
} */
.logo-image {
width: 55px;
height: auto;
}
.logo-text {
font-family: Montserrat Alternates;
font-weight: 600;
font-style: none;
font-size: 36px;
line-height: 32px;
letter-spacing: 0.03em;
}
.navbar a{
text-decoration: none;
color: rgba(0, 0, 0, 1);
}
.navbar a:hover {
color: blue;
}
.navbar {
align-items: center;
background-color: #FFFFFF;
color: rgba(0, 0, 0, 1);
display: flex;
font-family: Poppins;
font-size: 25px;
justify-content: space-around;
}
.nav-list {
list-style-type: none;
}
.nav-list .list-item {
display: inline-block;
padding: 20px 10px;
}
/* Hide menu on larger screens */
.menu {
display: none;
}
.menu-line {
background-color: green;
width: 25px;
height: 3px;
margin-bottom: 4px;
}
/* Style the footer and footer elements */
.footer-logo {
margin-top: 0px;
margin-bottom: 10px;
width: 55px;
height: 55px;
}
.copyright {
font-family: Montserrat Alternates;
font-weight: 600;
font-size: 25px;
}
.footer-text {
margin-top: 25px;
font-family: Montserrat Alternates;
font-weight: 600;
font-style: normal;
font-size: 21px;
}
.webmaster {
text-decoration: none;
}
.footer-info {
font-family: Poppins;
font-weight: 200;
font-size: 18px;
font-style: normal;
line-height: 32px;
letter-spacing: 0.03em;
}
.webmaster-contact {
margin-top: 13px;
}
.footer-container {
display: flex;
justify-content: space-evenly;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #FFFFFF;
text-align: center;
}
.my-story {
margin-top: 25px;
padding: 0 25px 0 25px;
font-family: Poppins;
font-weight: 200;
font-style: normal;
font-size: 16px;
}
/* Media query for smaller devices, hamburger menu */
#media all and (max-width: 480px) {
.navbar {
flex-direction: column;
position: relative;
}
.logo-container {
width: 100%;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 5px;
}
/* Show menu */
.menu {
display: block;
position: absolute;
right: 10px;
top: 10px;
}
.nav-list {
list-style-type: none;
width: 100%;
text-align: center;
padding: 20px;
display: none;
/* padding-left: 0; */
}
.nav-list .list-item {
display: block;
border-top: 1px solid black;
padding: 10px;
}
.footer-container {
display: flex;
flex-direction: column;
justify-content:inherit;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #FFFFFF;
text-align: center;
}
.copyright {
font-family: Montserrat Alternates;
font-weight: 600;
font-size: 20px;
}
.footer-logo {
margin-top: 0px;
margin-bottom: 10px;
width: 45px;
height: 45px;
}
.footer-text {
margin-top: 25px;
font-family: Montserrat Alternates;
font-weight: 600;
font-style: normal;
font-size: 25px;
}
.logo-copyright {
display: inline-block;
margin: 0;
padding: 0;
}
.webmaster-contact {
display: inline-block;
margin: 0;
padding: 0;
}
.active {
display: block;
}
.inactive {
display: none;
}
}
My JavaScript File:
/* Toggle hamburger menu */
/* const toggleButton = document.getElementById('toggle-menu');
const naviList = document.getElementById('navi-list');
toggleButton.addEventListener('click', () => {
naviList.classList.toggle('active');
}); */
function toggleMenu() {
const toggleButton = document.getElementById('toggle-menu');
const naviList = document.getElementById('navi-list');
toggleButton.addEventListener('click', () => {
naviList.classList.toggle('active');
});
}
So recap, I am trying to have the hamburger menu open and close with each click and run the script from my bundled build.js file rather than from within my html file or from another external javascript file, either as a module or as an onclick function. Thank you all again for the help in advance.
Your function toggleMenu() is setting an event listener on the first click, then the second click is triggering that listener!
Your first method works (commented out).
Use standalone JS - with no 'onclick' event:
// JS EVENT LISTENER METHOD (my preferred method)
const toggleButton = document.getElementById('toggle-menu');
const naviList = document.getElementById('navi-list');
toggleButton.addEventListener('click', () => {
naviList.classList.toggle('active');
});
// HTML EVENT METHOD
// When you call the named function from HTML `onclick="toggleMenu()"`
// the event listener is not required. You can just toggle
// the .active class as usual.
// <div class="menu" id="toggle-menu" onclick="toggleMenu()">
function toggleMenu() {
const naviList = document.getElementById('navi-list');
naviList.classList.toggle('active');
}
Using both methods together will cancel each other out! It's really toggling .active twice - too fast to see!
tested with codepen
addEventListener VS onclick comparison
Whenever I click on the hamburger icon the menu opens but when I click on it again it is supposed to get closed... But it's not. I am trying to debug but I have no idea what is going wrong. If anyone knows, please help
// Hamberger menu
const navSearch = document.querySelector('.nav-search');
const navLeft = document.querySelector('.nav-left');
document.querySelector('.toggle').addEventListener('click', () => {
console.log(navSearch.style.display);
console.log('1');
if(navSearch.style.display = "none") {
console.log('2');
navSearch.style.display = "inline-block";
navLeft.style.display = "inline-block";
console.log(navSearch.style.display);
} else if(navSearch.style.display = "inline-block") {
console.log('3');
navSearch.style.display = "none";
navLeft.style.display = "none";
}
console.log('......');
});
// Variables
$website-width: 1280px;
$color-main: #4bbf73;
$color-dark: #343a40;
$color-light: #fff;
$color-lightx2: #f7f7f9;
//General Styles
* {
margin: 0;
padding: 0;
}
body {
background-color: $color-light;
font-family: "Nunito", Arial, Helvetica, sans-serif;
line-height: 1.6;
}
a {
text-decoration: none;
color: $color-light;
}
ul {
list-style: none;
}
h2,
h3,
h4 {
text-transform: uppercase;
}
img {
width: 100%;
}
input {
border: none;
padding: 0.7rem 1rem;
background: $color-lightx2;
&:focus {
outline: none;
}
}
// Utilities
.container {
max-width: $website-width;
padding: 0 1.5rem;
margin: auto;
overflow: hidden;
}
// navbar
header {
background: $color-dark;
height: 100px;
#navbar {
padding-top: 1.3rem;
color: $color-light;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
.nav-logo {
font-size: 1.5rem;
font-weight: 900;
letter-spacing: 2px;
padding: 0.5rem 1rem;
}
ul {
display: flex;
justify-content: center;
li {
padding-left: 1.5rem;
}
}
input[type="submit"] {
margin-left: 0.4rem;
background-color: inherit;
border: $color-main 2px solid;
color: $color-main;
&:hover {
background-color: $color-main;
color: $color-light;
transition: all 0.2s ease-in-out;
}
}
input[type="text"] {
padding: 0.7rem 1rem;
}
}
.toggle {
position: absolute;
top: 2.2rem;
right: 6rem;
transform: scale(2);
display: none;
}
}
#import 'media';
#media (max-width: 850px) {
header {
height: auto;
#navbar {
flex-direction: column;
align-items: start;
input[type="text"] {
margin: 1rem 0 1.4rem 3rem;
}
ul {
padding-bottom: 1rem;
}
}
.toggle {
display: inline-block;
}
.nav-search,
.nav-left {
display: none;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css"
integrity="sha384-OLYO0LymqQ+uHXELyx93kblK5YIS3B2ZfLGBmsJaUyor7CpMTBsahDHByqSuWW+q" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="scss/style.css">
<title>AllMart</title>
</head>
<body>
<header>
<div class="container">
<nav id="navbar">
<div class="nav-logo">
AllMart
</div>
<div class="nav-search">
<form>
<input type="text" placeholder="Search Product...">
<input type="submit" value="SEARCH">
</form>
</div>
<div class="nav-left">
<ul>
<li id="cart"><i class="fas fa-shopping-cart"></i> CART</li>
<li id="profile"><i class="fas fa-user"></i> SIGN IN</li>
</ul>
</div>
</nav>
<span class="toggle"><i class="fas fa-bars"></i></span>
</div>
</header>
<script src="js/index.js"></script>
</body>
</html>
and this is the output I get whenever I click on the icon
I have no idea what is going wrong if anyone knows, please help
You need to use === or == in if statements, not =, which is the assignment operator. === is preferred because it tests for strict equality (no type conversion).
if(navSearch.style.display === "none")
else if(navSearch.style.display === "inline-block") {
Hi I have tried to develop off of the Skeleton Framework and have adjusted the grid design. Although everything is slow falling into place I cannot find where this small gap is coming from on the right hand side. See below picture for what I mean. I have attached the CSS and HTML page. Apologies for the mess of CSS its three style sheets in one. Any suggestion would be great as I feel I may not be able to see the trees through the forest at this point.
/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.column,
.columns {
width: 100%;
float: left;
box-sizing: border-box;
}
/* For devices larger than 400px */
#media (min-width: 400px) {
.container {
width: 85%;
padding: 0;
}
}
/* For devices larger than 550px */
#media (min-width: 1050px) {
.container {
width: 80%;
}
.column,
.columns {
margin-left: 0;
}
.column:first-child,
.columns:first-child {
margin-left: 0;
}
.one.column,
.one.columns {
width: 8.333%;
}
.two.columns {
width: 16.66%;
}
.three.columns {
width: 25%;
}
.four.columns {
width: 33.33%;
}
.five.columns {
width: 41.66%;
}
.six.columns {
width: 50%;
}
.seven.columns {
width: 58.33%;
}
.eight.columns {
width: 66.663%;
}
.nine.columns {
width: 75%;
}
.ten.columns {
width: 83.33%;
}
.eleven.columns {
width: 91.66%;
}
.twelve.columns {
width: 100%;
margin-left: 0;
}
.one-third.column {
width: 30.6666666667%;
}
.two-thirds.column {
width: 65.3333333333%;
}
.one-half.column {
width: 48%;
}
/* Offsets */
.offset-by-one.column,
.offset-by-one.columns {
margin-left: 8.66666666667%;
}
.offset-by-two.column,
.offset-by-two.columns {
margin-left: 17.3333333333%;
}
.offset-by-three.column,
.offset-by-three.columns {
margin-left: 26%;
}
.offset-by-four.column,
.offset-by-four.columns {
margin-left: 34.6666666667%;
}
.offset-by-five.column,
.offset-by-five.columns {
margin-left: 43.3333333333%;
}
.offset-by-six.column,
.offset-by-six.columns {
margin-left: 52%;
}
.offset-by-seven.column,
.offset-by-seven.columns {
margin-left: 60.6666666667%;
}
.offset-by-eight.column,
.offset-by-eight.columns {
margin-left: 69.3333333333%;
}
.offset-by-nine.column,
.offset-by-nine.columns {
margin-left: 78.0%;
}
.offset-by-ten.column,
.offset-by-ten.columns {
margin-left: 86.6666666667%;
}
.offset-by-eleven.column,
.offset-by-eleven.columns {
margin-left: 95.3333333333%;
}
.offset-by-one-third.column,
.offset-by-one-third.columns {
margin-left: 34.6666666667%;
}
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns {
margin-left: 69.3333333333%;
}
.offset-by-one-half.column,
.offset-by-one-half.columns {
margin-left: 52%;
}
}
/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
font-size: 62.5%;
}
body {
font-size: 1.5em;
/* currently ems cause chrome bug misinterpreting rems on body element */
line-height: 1.6;
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #222;
}
/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 2rem;
font-weight: 300;
}
h1 {
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.1rem;
}
h2 {
font-size: 3.6rem;
line-height: 1.25;
letter-spacing: -.1rem;
}
h3 {
font-size: 3.0rem;
line-height: 1.3;
letter-spacing: -.1rem;
}
h4 {
font-size: 2.4rem;
line-height: 1.35;
letter-spacing: -.08rem;
}
h5 {
font-size: 1.8rem;
line-height: 1.5;
letter-spacing: -.05rem;
}
h6 {
font-size: 1.5rem;
line-height: 1.6;
letter-spacing: 0;
}
/* Larger than phablet */
#media (min-width: 550px) {
h1 {
font-size: 5.0rem;
}
h2 {
font-size: 4.2rem;
}
h3 {
font-size: 3.6rem;
}
h4 {
font-size: 3.0rem;
}
h5 {
font-size: 2.4rem;
}
h6 {
font-size: 1.5rem;
}
}
p {
margin-top: 0;
}
/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
color: #1EAEDB;
}
a:hover {
color: #0FA0CE;
}
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
display: inline-block;
height: 38px;
padding: 0 30px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
color: #333;
border-color: #888;
outline: 0;
}
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
color: #FFF;
background-color: #33C3F0;
border-color: #33C3F0;
}
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
color: #FFF;
background-color: #1EAEDB;
border-color: #1EAEDB;
}
/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
height: 38px;
padding: 6px 10px;
/* The 6px vertically centers text on FF, ignored by Webkit */
background-color: #fff;
border: 1px solid #D1D1D1;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box;
}
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
textarea {
min-height: 65px;
padding-top: 6px;
padding-bottom: 6px;
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border: 1px solid #33C3F0;
outline: 0;
}
label,
legend {
display: block;
margin-bottom: .5rem;
font-weight: 600;
}
fieldset {
padding: 0;
border-width: 0;
}
input[type="checkbox"],
input[type="radio"] {
display: inline;
}
label > .label-body {
display: inline-block;
margin-left: .5rem;
font-weight: normal;
}
/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
list-style: circle inside;
}
ol {
list-style: decimal inside;
}
ol,
ul {
padding-left: 0;
margin-top: 0;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin: 1.5rem 0 1.5rem 3rem;
font-size: 90%;
}
/*li {
margin-bottom: 1rem; }*/
/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
padding: .2rem .5rem;
margin: 0 .2rem;
font-size: 90%;
white-space: nowrap;
background: #F1F1F1;
border: 1px solid #E1E1E1;
border-radius: 4px;
}
pre > code {
display: block;
padding: 1rem 1.5rem;
white-space: pre;
}
/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #E1E1E1;
}
th:first-child,
td:first-child {
padding-left: 0;
}
th:last-child,
td:last-child {
padding-right: 0;
}
/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
margin-bottom: 1rem;
}
input,
textarea,
select,
fieldset {
margin-bottom: 1.5rem;
}
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
margin-bottom: 2.5rem;
}
/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
width: 100%;
box-sizing: border-box;
}
.u-max-full-width {
max-width: 100%;
box-sizing: border-box;
}
.u-pull-right {
float: right;
}
.u-pull-left {
float: left;
}
/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
margin-top: 3rem;
margin-bottom: 3.5rem;
border-width: 0;
border-top: 1px solid #E1E1E1;
}
/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
content: "";
display: table;
clear: both;
}
/* Navigation Bar
-------------------------------------------------- */
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
/* Float the list items side by side */
ul.topnav li {
float: left;
}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.topnav li a:hover {
background-color: #111;
}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {
display: none;
}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width: 680px) {
ul.topnav li:not(:first-child) {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width: 680px) {
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
/* Larger than mobile */
#media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */
#media (min-width: 550px) {}
/* Larger than tablet */
#media (min-width: 750px) {}
/* Larger than desktop */
#media (min-width: 1000px) {}
/* Larger than Desktop HD */
#media (min-width: 1200px) {} .full-width-container {
width:100%;
max-width:100%;
clear:both;
margin:0 auto;
}
/* CSS Document */
.cBox {
border-right:2px #DADADA solid;
}
.cBoxCenter {
text-align:center;
border-right:2px #DADADA solid;
padding:1%;
}
.cBoxMain {
border-top:2px #DADADA solid;
}
.cBoxEnd {
text-align: center;
}
button {
color: white;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff6e00+0,cc0600+100 */
background: #ff6e00;
/* Old browsers */
background: -moz-linear-gradient(top, #ff6e00 0%, #cc0600 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff6e00 0%, #cc0600 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff6e00 0%, #cc0600 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff6e00', endColorstr='#cc0600', GradientType=0);
/* IE6-9 */
border: 0;
}
.content {
background-image: url(../img/hbg.png);
}
.subcontent {
background-image: url(../img/hbg.png);
}
.columns img {
max-width: 100%;
}
.content .columns {
padding: 2%;
}
.columns {} .row {
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
-webkit-box-flex: 0;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.fillimage {
background-image: url(../img/ldn.jpg);
background-position: center;
background-size: cover;
}
#charset "utf-8";
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,700,700italic);
/* CSS Document */
html,
body {
background-image: url(../img/bg.png);
font-family: 'Open Sans', sans-serif;
height: 100%;
}
.head {
background-image: url(../img/hbg.png);
}
.head img {
max-width: 100%;
}
.logo {
padding: 2rem;
}
.logo img {
display: block;
margin: auto;
display: block;
margin: auto;
float: left;
max-height: 100%;
}
.headerimage {} .headerimage img {
display: block;
margin: auto;
float: left;
max-height: 100%;
}
/* ----- Contract Form ---- */
#form {
min-width: 300px;
max-width: 600px;
margin: auto;
font-family: sans-serif;
}
#form h2 {
color: #27748A;
font-size: 35px;
margin: 0;
}
#form p {
font-size: 20px;
color: #222222;
}
#form div {
margin-top: 10px;
}
#form input,
textarea,
button {
width: 50%;
padding: 3px 5px;
}
#form label {
font-weight: bold;
font-size: 20px;
color: #184552;
}
#form button {} #form button:hover {
background-color: #CBEAF2;
}
.required {
color: #dd6666;
}
#footer {
background-image: url(../img/bg2.png);
display: block;
color: white;
}
#footer .columns {
padding: 2%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Central Computers</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/ccframe.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/content.css">
</head>
<body>
<!-- Primary Page Layout -->
<div class="container">
<!-- Header -->
<div class="row">
<div class="columns head">
<div class="four columns logo">
<img src="img/logo.png" alt="Logo">
</div>
<div class="eight columns headerimage">
<img src="img/london.png" alt="London">
</div>
</div>
</div>
<!-- Header -->
<!-- Nav Bar -->
<div class="row">
<div class="twelve columns">
<ul class="topnav">
<li>Home</li>
<li>Buyers</li>
<li>Sellers</li>
<li>Student Property</li>
<li>Hotels</li>
<li>News</li>
<li>Contact</li>
<li class="icon">
☰
</li>
</ul>
</div>
</div>
<!-- Nav Bar -->
<!-- Content -->
<div class="row subcontent ">
<div class="four columns cBoxCenter">
<h3>BUYERS</h3>
<p>
If you are a Buyer, looking for Off-Market Properties in prime central locations, then please get in contact with …
</p>
<button>Learn More</button>
</div>
<div class="four columns cBoxCenter ">
<h3>SELLERS</h3>
<p>
If you have properties you wish to sell privately through our off-market collection, we can promote them for you …
</p>
<button>Learn More</button>
</div>
<div class="four columns cBoxEnd fillimage">
</div>
</div>
<div class="row content">
<div class="eight columns cBoxMain cBox">
<h2>Off-Market Properties UK</h2>
<p>If you are looking to buy or sell off-market properties, then you certainly have come to the right place. Off-Market Properties UK has over 30 years of experience in the global property business and we have many clients with an appetite for off-market properties to whom we already offer an expanding portfolio of outstanding development opportunities. Many of the off-market properties we listed this year sold within one month.</p>
<p>Our service is completely bespoke and our task is to connect buyers to sellers with maximum discretion, confidentiality and with minimum fuss. Even though Off-Market Properties UK’s core market is central London, including: Belgravia, Knightsbridge, Kensington, Chelsea, Notting Hill, Covent Garden, Earls Court, we also have properties and development opportunities in other parts of the UK. Basically, wherever the market is most dynamic. If you own a property in an area where we do not yet cover, still try us.</p>
<p>Why go off market? We understand that many property owners prefer to sell their properties privately and not publicly. Confidentiality is usually the reason, perhaps for family reasons or because the owner has a high profile. An advantage to owners is that interest in off market properties tend often to come from serious investors able to exchange quickly.</p>
</div>
<div class="four columns cBoxMain">
<h3>Contact Us</h3>
<form id="form" action="/process.php" method="post">
<p>Use the form below to get in touch, or give us a call on xxx-xxx-xxx
<!--fields-->
</form>
<div>
<label for='name'>Name<span class='required'>(required)</span></label>
<input type='text' name='name' placeholder='your name here' required />
</div>
<div>
<label for='tel'>Tel</label>
<input type='tel' name='tel' placeholder='your telephone here' />
</div>
<div>
<label for='email'>Email <span class='required'>(required)</span></label>
<input type='email' name='email' placeholder='you#yourdomain.com' required />
</div>
<div>
<label for='message'>Message <span class='required'>(required)</span></label>
<textarea name='message' required></textarea>
</div>
<div>
<button type='submit'>Send Message</button>
</div>
</div>
</div>
<!-- Content -->
</div>
<!-- Container -->
<!-- Footer -->
<div class="full full-width-container" id="footer">
<div class="container">
<div class="row">
<div class="four columns">
<h4>Contact Us</h4>
<p>Please get in contact with us to learn more about our Off-Market Properties:</p>
<p>Tel: +44 208 920 9414<br>
Mob: +44 7463 424 888<br>
Email: om#offmarketpropertiesuk.com</p>
<p><img src="img/logo.png" width="300" height="85"></p>
</div>
<div class="four columns">
<h4>Off Market Properties UK</h4>
<p>If you are looking to buy or sell an off-market properties, then you certainly have come to the right place. </p>
<p>Our service is completely bespoke and our task is to connect buyers to sellers with maximum discretion, confidentiality and with minimum fuss. Even though Off Market Properties UK’s core market is central London, including: Belgravia, Knightsbridge, Kensington, Chelsea, Notting Hill, Covent Garden, Earls Court, we also have properties in other parts of the UK.</p>
</div>
<div class="four columns" style="overflow:hidden;">
<h3>Contact Us</h3>
<form id="form" action="/process.php" method="post">
<p>Use the form below to get in touch, or give us a call on xxx-xxx-xxx
<!--fields-->
</form>
<div>
<label for='name'>Name<span class='required'>(required)</span></label>
<input type='text' name='name' placeholder='your name here' required />
</div>
<div>
<label for='tel'>Tel</label>
<input type='tel' name='tel' placeholder='your telephone here' />
</div>
<div>
<label for='email'>Email <span class='required'>(required)</span></label>
<input type='email' name='email' placeholder='you#yourdomain.com' required />
</div>
<div>
<button type='submit'>Send Message</button>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
<script src="js/menu.js"></script>
</html>
You should remove container width from here
#media (min-width: 400px) {.container {
// width: 85%; //commented width
padding: 0;
}
}
Turns out after much more thinking and banging of the head and desk I realized my calculations are off by a fraction.
Turns out I forgot to round up the final decimal digit place.
.one.column,
.one.columns { width: 8.33333333333%; }
.two.columns { width: 16.6666666667%; }
.three.columns { width: 25.0%; }
.four.columns { width: 33.3333333333%; }
.five.columns { width: 41.6666666667%; }
.six.columns { width: 50.0%; }
.seven.columns { width: 58.3333333333%; }
.eight.columns { width: 66.6666666667%; }
.nine.columns { width: 75.0%; }
.ten.columns { width: 83.3333333333%; }
.eleven.columns { width: 91.6666666667%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }