I wonder why an update of the following CSS properties: width , position does not enlarge the vertical nav bar on my page.aspx.
As an illustration, please find below the CSS:
/* The sidebar menu */
.sidenav {
/*height: 100%;*/ /* Full-height: remove this if you want "auto" height */
width: 300px; /* Set the width of the sidebar */
/*position: fixed;*/ /* Fixed Sidebar (stay in place on scroll) */
position: absolute;
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
/*background-color: #111*/; /* Black */
background-color: #eee;
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 50px;
font-family: 'Segoe UI Historic';
font-size: 19px;
}
/* The navigation menu links */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
/*font-size: 25px;*/
font-size: 19px;
color: #818181;
display: block;
font-family: 'Segoe UI Historic';
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
/*color: #f1f1f1;*/
/*color: #2196F3;*/
color: #1912e3;
font-family: 'Segoe UI Historic';
}
/* Style page content */
.main {
margin-left: 160px; /* Same as the width of the sidebar */
padding: 0px 10px;
font-family: 'Segoe UI Historic';
}
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
body {
font-family: "Segoe UI Historic";
}
A feedback would highly be appreciated.
Randomly, based on an "trial and error" approach, I have empirically found out that
substituting in the CSS the property width:300px by width:20% did work. Thus I would appreciate to know, if possible, a rationale behind such random discovery.
Related
I need help making it so when I shrink the width of my browser that it will be responsive and my navbar links will appear under my navbar title. Can someone help me out with trying to get this done.
I believe that I will need to use a flexbox to do this. I've been trying a few different ways, but cant seem to get the links in pagetitle id and the nav id to appear vertically.
html, body {
margin:0;
padding:0;
}
body {
background-color: #AC876A; /* this is the turqoise color */
color: black; /* color of font */
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* no tail font is more readable for small font */
font-size:16px;
}
#titleNav { /* titleNav is fixed, always at the top */
/* position fixed removes the element from the normal flow, placing it where you specify with top/bottom, left/right */
position:fixed;
top:0px;
left:0px;
z-index: 1; /* To make sure titleNav is on top of content, give it a higher z-index than content (content would have default value of zero). */
width: 100%;
background-color:rgb(71, 39, 14);
padding-bottom: 10px;
/* height: 86px; /* NEW */
color: burlywood;
font-family: serif;
font-weight: bold;
border-bottom: 1px solid #68615D;
}
#pageTitle { /* no change */
padding:12px;
padding-bottom: 0px;
font-size:48px;
letter-spacing: 1.5px; /* spaces out letters a bit */
}
#nav { /* fix the nav bar */
position: fixed;
padding-right: 10rem;
top: 0px;
right: 0px;
text-align:right;
font-size:24px;
padding-bottom: 12px;
padding-top:32px;
overflow: hidden; /*when content to big to fit in area */
}
#nav a { /* no change */
text-decoration:none; /* Do not want links in "nav" to be underlined */
color: #C8C8C8; /* light gray: to provide color for links, you have to style the "a" tag */
float: left;
padding-left: 16px;
padding-right: 16px;
}
#nav a:hover{
background-color: #ddd;
color: black;
}
#nav a.active{
border-bottom: 2px solid black;
}
#content { /* Added padding top and bottom to prevent top/bottom content from getting hidden under titleNav/footer */
padding:12px;
padding-top: 80px; /* prevent the top of the content from getting hidden under the fixed titleNav */
padding-bottom: 40px; /* prevent the the bottom of the content from getting hidden under the fixed footer */
}
#footer { /* footer fixed, always at the bottom */
position: fixed;
bottom: 0px;
left: 0px;
z-index: 1; /* make sure footer is on top of content which would have default z-index value of 0 */
background-color:rgb(71, 39, 14);
color: burlywood;
width:100%;
text-align:center;
padding:8px;
}
<!DOCTYPE html><html>
<!-- Use this type of comment within HTML -->
<title>U-Bin Moving</title>
<!-- this is your internal style sheet -->
<link href="style/myStyle.css" rel="stylesheet">
<div id="titleNav">
<div id="pageTitle">
U-Bin Moving
</div>
<div id="nav">
Home
Services
About Us
Contact
</div>
</div>
<div id="content">
<h2>The Right Moving Company For You</h2>
<p>
At U-Bin Storage we will get the job done for the lowest price.
</p>
<p style="text-align:center;">
<img src="pics/box.jpg" style="width:50%; border-radius:10px;">
</p>
</div> <!-- content. [[Keep track of nesting]] -->
<div id="footer">
[ Kyle Hrivnak ]
</div>
Here is the updated css file. Used flex box in the #titleNav and #nav.
html, body {
margin:0;
padding:0;
}
body {
background-color: #AC876A; /* this is the turqoise color */
color: black; /* color of font */
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* no tail font is more readable for small font */
font-size:16px;
}
#titleNav { /* titleNav is fixed, always at the top */
/* position fixed removes the element from the normal flow, placing it where you specify with top/bottom, left/right */
position:fixed;
top:0px;
left:0px;
z-index: 1;
width: 100vw;
background-color:rgb(71, 39, 14);
padding-bottom: 10px;
/* height: 86px; /* NEW */
color: burlywood;
font-family: serif;
font-weight: bold;
border-bottom: 1px solid #68615D;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#pageTitle { /* no change */
padding:12px;
padding-bottom: 0px;
font-size:48px;
letter-spacing: 1.5px; /* spaces out letters a bit */
}
#nav { /* fix the nav bar */
display: flex;
flex-wrap: wrap;
font-size:24px;
padding-bottom: 12px;
padding-top:32px;
}
#nav a { /* no change */
text-decoration:none; /* Do not want links in "nav" to be underlined */
color: #C8C8C8; /* light gray: to provide color for links, you have to style the "a" tag */
float: left;
padding-left: 16px;
padding-right: 16px;
}
#nav a:hover{
background-color: #ddd;
color: black;
}
#nav a.active{
border-bottom: 2px solid black;
}
#content { /* Added padding top and bottom to prevent top/bottom content from getting hidden under titleNav/footer */
padding:12px;
padding-top: 80px; /* prevent the top of the content from getting hidden under the fixed titleNav */
padding-bottom: 40px; /* prevent the the bottom of the content from getting hidden under the fixed footer */
}
#footer { /* footer fixed, always at the bottom */
position: fixed;
bottom: 0px;
left: 0px;
z-index: 1; /* make sure footer is on top of content which would have default z-index value of 0 */
background-color:rgb(71, 39, 14);
color: burlywood;
width:100%;
text-align:center;
padding:8px;
}
You can look into position: sticky; which I think would work better for you example, but to keep it simple I stuck to just correcting your CSS...
Set #content padding-top: 100px or close to 100px and remove the positioning and padding from #nav so it looks like:
#nav {
text-align: right;
font-size: 24px;
overflow: hidden; /*when content to big to fit in area */
}
html, body {
margin:0;
padding:0;
}
body {
background-color: #AC876A; /* this is the turqoise color */
color: black; /* color of font */
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* no tail font is more readable for small font */
font-size:16px;
}
#titleNav { /* titleNav is fixed, always at the top */
/* position fixed removes the element from the normal flow, placing it where you specify with top/bottom, left/right */
position:fixed;
top:0px;
left:0px;
z-index: 1; /* To make sure titleNav is on top of content, give it a higher z-index than content (content would have default value of zero). */
width: 100%;
background-color:rgb(71, 39, 14);
padding-bottom: 10px;
/* height: 86px; /* NEW */
color: burlywood;
font-family: serif;
font-weight: bold;
border-bottom: 1px solid #68615D;
}
#pageTitle { /* no change */
padding:12px;
padding-bottom: 0px;
font-size:48px;
letter-spacing: 1.5px; /* spaces out letters a bit */
}
#nav {
text-align:right;
font-size:24px;
overflow: hidden; /*when content to big to fit in area */
}
#nav a { /* no change */
text-decoration:none; /* Do not want links in "nav" to be underlined */
color: #C8C8C8; /* light gray: to provide color for links, you have to style the "a" tag */
float: left;
padding-left: 16px;
padding-right: 16px;
}
#nav a:hover{
background-color: #ddd;
color: black;
}
#nav a.active{
border-bottom: 2px solid black;
}
#content { /* Added padding top and bottom to prevent top/bottom content from getting hidden under titleNav/footer */
padding:12px;
padding-top: 100px; /* prevent the top of the content from getting hidden under the fixed titleNav */
padding-bottom: 40px; /* prevent the the bottom of the content from getting hidden under the fixed footer */
}
#footer { /* footer fixed, always at the bottom */
position: fixed;
bottom: 0px;
left: 0px;
z-index: 1; /* make sure footer is on top of content which would have default z-index value of 0 */
background-color:rgb(71, 39, 14);
color: burlywood;
width:100%;
text-align:center;
padding:8px;
}
<!DOCTYPE html><html>
<!-- Use this type of comment within HTML -->
<title>U-Bin Moving</title>
<!-- this is your internal style sheet -->
<link href="style/myStyle.css" rel="stylesheet">
<div id="titleNav">
<div id="pageTitle">
U-Bin Moving
</div>
<div id="nav">
Home
Services
About Us
Contact
</div>
</div>
<div id="content">
<h2>The Right Moving Company For You</h2>
<p>
At U-Bin Storage we will get the job done for the lowest price.
</p>
<p style="text-align:center;">
<img src="pics/box.jpg" style="width:50%; border-radius:10px;">
</p>
</div> <!-- content. [[Keep track of nesting]] -->
<div id="footer">
[ Kyle Hrivnak ]
</div>
I'm trying to make a horizontal navigation bar that has some menu items in a browser but condenses down to a hamburger menu if used on a mobile or other smaller device. I've been having a lot of trouble with actually removing the menu items and adding them to the hamburger menu. Any help would be greatly appreciated.
sample HTML:
<div class="navbar">
First Name
Projects
Resume
About
</div>
sample CSS:
.navbar {
overflow: hidden;
background-color: #ECECEC;
width:100vw;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
border-bottom: 1px solid black;
}
/* Links inside the navbar */
.navbar a {
float: left;
display: flex;
color: #474243;
text-align: center;
padding: 30px 16px;
text-decoration: none;
font-size: 150%;
font-family: 'Roboto', sans-serif;
}
.navbar a:nth-of-type(1) {
/* padding-right: 680px; */
color: black;
margin-right: 680px;
padding-left: 50px;
/*background: #777; */
font-size: 200%;
font-family: 'Roboto', sans-serif;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
#media (max-width: 952px){
navbar a{
font-size: 16px;
}
}
You can use the #media query. Here's some examples and guidelines
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I would like to move the circular image of myself located in the sidebar up and in line with my name displayed in the header. The contact and tech skills sections might need adjusting as well.
I have learned about absolute versus relative and how it relates to this, but I just can't implement a working solution.
This is what I have been working with:
<div style="position:relative; height:60px;">
<img src="profile_pic_circular.png"
style="position:absolute; top:-10px; left:-30px; width:80px; height:80px; border:none;"
alt="profile"
title="profile photo" />
</div>
Link to my resume with picture.
Code:
#import url("https://fonts.googleapis.com/css?family=Montserrat|Playfair+Display&display=swap");
/* Main text is monserrat*/
body {
font-family: "Montserrat", sans-serif;
font-weight: 300;
line-height: 1.3;
color: #444;
}
/* Give headers playfair font */
h1,
h2,
h3 {
font-family: "Playfair Display", serif;
color: #000;
}
/* When in PDF export mode make sure superscripts are nice and small and italic */
sup {
font-size: 0.45rem;
font-style: italic;
}
/* Avoid the breaking within a section */
.blocks {
break-inside: avoid;
}
* {
/* Override default right margin for sidebar*/
--pagedjs-margin-right: 0.2in;
--pagedjs-margin-left: 0.2in;
}
/* Customize some of the sizing variables */
:root {
--sidebar-width: 12rem; /* Shrink sidebar width */
--sidebar-background-color: #f7fbff; /* Make sidebar blue */
--sidebar-horizontal-padding: 0.01in; /* Reduce sidebar padding */
--decorator-outer-dim: 10px; /* Make position deliniating circles larger */
--decorator-border: 2px solid #bdd7e7; /* Make timeline a blue as well*/
}
.details .place {
margin-top: 0.25rem;
}
.main-block:not(.concise) .details div {
padding-top: 0.009rem;
}
/* Laptop icon isn't centered by default which is lame */
.fa-laptop {
margin-left: -3px;
}
/* When we have links at bottom in a list make sure they actually are numbered */
#links li {
list-style-type: decimal;
}
/* Dont put the little fake list point in front of links */
.aside li::before {
display: none;
}
/* Move closer to start and up towards header */
.aside ul {
padding-left: 1rem;
}
.aside li::before {
position: relative;
margin-left: -4.25pt;
content: "• ";
}
/* Make sure elements in asside are centered and have a nice small text */
.aside {
width: calc(var(--sidebar-width) + 9px);
line-height: 1.2;
font-size: 0.75rem;
}
/* Make little circle outline be a light blue */
.decorator::after {
background-color: #08306b;
}
/* Remove the fake bullets from lists */
.aside li::before {
content: auto;
}
.skill-bar {
color: white;
padding: 0.1rem 0.25rem;
margin-top: 3px;
position: relative;
width: 100%;
}
/* When the class no-timeline is added we remove the after psuedo element from the header... */
/* Removes the psuedo element on h2 tags for this section */
.section.no-timeline h2::after {
content: none;
}
/* Without adding padding the content is all up on the title */
.section.no-timeline h2 {
padding-bottom: 1rem;
}
/* Add styles for little cards */
.info-card{
width: 220px;
float: left;
padding: 0.5rem;
margin: 0.5rem;
box-shadow: 1px 1px 4px black;
}
I inspected the sidebar (right-click, choose Inspect) and saw that .aside had a padding. Remove it to align your picture with your headline.
padding: 0.6in var(--sidebar-horizontal-padding)
I have created a site using HTML and CSS. The site is currently not responsive and I need to change into a responsive one. I have used media queries but it doesn't seem to be working. Are there any mistakes in my code? I have applied media queries to the entire CSS. Should I apply media query to the entire CSS or only a particular part of the CSS?
I tried using the media query #media screen and (max-width: 300px) { } and it works when resizing the browser but after that when the browser is maximized again the desktop style is not getting applied.
#media screen and (max-width: 300px) {
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #fff;
margin: 0;
/* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center;
}
.thrColElsHdr #container {
width: 800px;
background: #FFFFFF;
margin: 0 auto;
/* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left;
/* this overrides the text-align:
center on the body element. */
margin-bottom: 0px;
}
.thrColElsHdr #header {
background: #DDDDDD;
padding: 0 10px;
/* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead
of text, you may want to remove the padding. */
background-image: url(images/top.png);
height: 160px;
}
#top_menu {
color: #e5e491;
font-size: 15px;
text-decoration: none;
height: -20px;
width: auto;
float: right;
margin: 90px 0 -50px 0;
}
#top_login {
color: #e5e491;
font-size: 10px;
text-decoration: none;
float: right;
text-align: right;
margin: 0px 0 0px 0;
width: 600px;
height: 30px;
position: relative;
top: -160px;
}
.thrColElsHdr #header h1 {
margin: 0;
/* zeroing the margin of the last element in
the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 0px 0;
/* using padding instead of margin will allow you to
keep the element away from the edges of the div */
color: #FFF;
font-family: "Times New Roman", Times, serif;
height: 160px;
}
.thrColElsHdr #sidebar1 {
float: left;
width: 16em;
/* since this element is floated, a width must be given */
background: #75b808;
/* top and bottom padding create visual space within this div */
margin: 15px 10px 15px 15px;
background-image: url(images/news_top.png);
background-repeat: no-repeat;
padding: 15px 2px 2px 2px;
font-size: 10px;
}
.thrColElsHdr #sidebar2 {
float: right;
width: 17em;
/* since this element is floated, a width must be given */
background: #EBEBEB;
/* the background color will be displayed for the length of the content in the column, but no further */
padding: 10px 0;
/* top and bottom padding create visual
space within this div */
border: #0a4b67;
border-width: thick;
margin: 5px;
font-size: 10px;
}
.thrColElsHdr #sidebar1 h3,
.thrColElsHdr #sidebar1 p,
.thrColElsHdr #sidebar2 p,
.thrColElsHdr #sidebar2 h3 {
margin-left: 10px;
/* the left and right margin
should be given to every element that will be placed in the side columns */
margin-right: 10px;
}
.thrColElsHdr #mainContent {
margin: 0 12em 0 1em;
/* the right margin can be given in ems or pixels. It creates the space down the right side of the page.
*/
color: #0a4b67;
}
.thrColElsHdr #mainContent h2 h3 h4 {
color: #0a4b67;
}
.thrColElsHdr #footer {
padding: 0 10px;
/* this padding matches the left alignment of the elements in the divs that appear above it. */
background: #E1E994;
}
.thrColElsHdr #line {
padding: 0 10px;
/* this padding matches the left alignment of the elements in the divs that appear above it. */
background: #E1E994;
margin-top: 0px;
}
.thrColElsHdr #footer p {
margin: 0;
/* zeroing the margins of the first element in the footer will
avoid the possibility of margin collapse - a space between divs */
padding: 10px 0;
/* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
/* Miscellaneous classes for reuse */
.fltrt {
/* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft {
/* this class can be used to float an element left in your
page */
float: left;
margin-right: 8px;
}
.clearfloat {
/* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}
.thrColElsHdr #container #header #top_menu_logo {
margin-top: 0em;
margin-right: 0em;
margin-bottom: 0em;
margin-left: 0em;
float: left;
}
.thrColElsHdr #container #header #top_menu a {
color: #e5e491;
}
.thrColElsHdr #container #subheading {
font-size: 14px;
height: 211px;
}
div#nifty {
font-size: 12px;
background: #2d6482;
width: 300px;
}
div.rounded div {
height: 1px;
overflow: hidden;
}
#radiusx,
#radiusy {
text-align: right;
width: 20px;
}
div#nifty p {
color: #dfe791;
padding: 2px;
margin: 2px;
}
#thetext {
float: right;
width: 380px;
padding: 10px;
font-size: 12px;
font-weight: bold;
}
#theimg {
float: left;
width: 400px;
}
}
</style>
please any idea any mistake please comment my question ?
The way to do media queries is this:
/* rules that apply regardless of resolution */
.some > .css > .selector {
display: block;
background-color: rgb(255, 255, 255);
}
#media screen and (min-width: 1440px) {
/* rules that apply for screens >= 1440px */
.some > .css > .selector {
width: 1280px;
color: rgb(144, 144, 144);
}
}
#media screen and (min-width: 1024px) and (max-width: 1439px) {
/* rules that apply for screens 1024px - 1439px */
.some > .css > .selector {
width: 920px;
color: rgb(102, 102, 102);
}
}
#media screen and (min-width: 640px) and (max-width: 1023px) {
/* rules that apply for screens 640px - 1023px */
.some > .css > .selector {
width: 500px;
color: rgb(64, 64, 64);
}
}
#media screen and (max-width: 639px) {
/* rules that apply for screens 639px and below */
.some > .css > .selector {
width: 300px;
color: rgb(0, 0, 0);
}
}
Alter the conditions with your desired breakpoints, of course.
As a guideline, always apply your media queries after your style for that element / logical section of elements. This makes it convenient later on to find and edit your styles for a particular element across all resolutions.
A few things to note for first-timers:
ensure that you use px values that don't overlap in the media queries.
the rules within media queries will "overwrite" those outside of it.
You should do a link tag for the css and have this meta tag
and your
#media screen and (max-width: 300px) {}
does not make sense because then you will choose a screen that's smaller than 300px width
#media screen and (min-width: 300px) and (max-width: 460px) {}
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
I am creating a website using Jekyll, and publishing it using Github pages. When I jekyll serve the website in local, everything works fine, and it looks normal both from my computer and smartphone. But when I visit the Github pages one from my smartphone, some divs seem to be shifted a bit, and the font-awesome icons are not rendered. Strangely, it works fine when I visit it (the Github pages one) from my computer.
I am not sure where to look at. Could something happen on github and be overriding only some media queries?
I have no idea yet what is relevant in the code, but I'll try to create some MCV example. Until then, the source code is here and the website is here.
Here's the CSS, mostly taken from a Pure css layout:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*
* -- BASE STYLES --
* Most of these are inherited from Base, but I want to change a few.
*/
body {
line-height: 1.7em;
color: #7f8c8d;
font-size: 13px;
}
h1,
h2,
h3,
h4,
h5,
h6,
label {
color: #34495e;
}
div.tweet-box {
font-size: 20px;
font-weight: bold;
border-left: 3px solid #1f8dd6;
padding: 1em 1.6em;
font-weight: 100;
border-radius: 5px;
line-height: 1em;
}
.fat {
font-weight: bold;
}
a.shy-link {
text-decoration: none;
color: #7f8c8d;
}
a:visited.shy-link{
text-decoration: none;
color: #7f8c8d;
}
a:hover.shy-link{
text-decoration: none;
color: #34495e;
}
.pure-img-responsive {
max-width: 100%;
height: auto;
}
/*
* -- LAYOUT STYLES --
* These are some useful classes which I will need
*/
.l-box {
padding: 0.4em;
}
.l-box-lrg {
padding: 2em;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.is-center {
text-align: center;
}
/*
* -- PURE FORM STYLES --
* Style the form inputs and labels
*/
.pure-form label {
margin: 1em 0 0;
font-weight: bold;
font-size: 100%;
}
.pure-form input[type] {
border: 2px solid #ddd;
box-shadow: none;
font-size: 100%;
width: 100%;
margin-bottom: 1em;
}
/*
* -- PURE BUTTON STYLES --
* I want my pure-button elements to look a little different
*/
.pure-button {
background-color: #1f8dd6;
color: white;
padding: 0.5em 2em;
border-radius: 5px;
}
a.pure-button-primary {
background: white;
color: #1f8dd6;
border-radius: 5px;
font-size: 120%;
}
/*
* -- MENU STYLES --
* I want to customize how my .pure-menu looks at the top of the page
*/
.home-menu {
padding: 0.5em;
text-align: center;
box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
}
.home-menu {
background: #2d3e50;
}
.pure-menu.pure-menu-fixed {
/* Fixed menus normally have a border at the bottom. */
border-bottom: none;
/* I need a higher z-index here because of the scroll-over effect. */
z-index: 4;
}
.home-menu .pure-menu-heading {
color: white;
font-weight: 400;
font-size: 120%;
}
.home-menu .pure-menu-selected a {
color: white;
}
.home-menu a {
color: #6FBEF3;
}
.home-menu li a:hover,
.home-menu li a:focus {
background: none;
border: none;
color: #AECFE5;
}
/*
* -- SPLASH STYLES --
* This is the blue top section that appears on the page.
*/
.splash-container {
background: #1f8dd6;
z-index: 1;
overflow: hidden;
/* The following styles are required for the "scroll-over" effect */
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed !important;
}
.splash {
/* absolute center .splash within .splash-container */
width: 80%;
height: 50%;
margin: auto;
position: absolute;
top: 100px; left: 0; bottom: 0; right: 0;
text-align: center;
text-transform: uppercase;
}
/* This is the main heading that appears on the blue section */
.splash-head {
font-size: 20px;
font-weight: bold;
color: white;
border: 3px solid white;
padding: 1em 1.6em;
font-weight: 100;
border-radius: 5px;
line-height: 1em;
}
/*
* -- CONTENT STYLES --
* This represents the content area (everything below the blue section)
*/
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.content-caret img {
display: block;
margin-right: auto;
margin-left: auto;
animation: blink 2s;
animation-iteration-count: infinite;
}
.content-caret img.content-caret-bottom {
animation-delay: 0.1s;
transform: translate(0, -80%);
}
.content-caret img.content-caret-top {
animation-delay: 0s;
}
.content-wrapper {
/* These styles are required for the "scroll-over" effect */
position: absolute;
top: 87%;
width: 100%;
min-height: 12%;
z-index: 2;
background: transparent;
}
.content-wrapper-solid {
background: white;
}
/* This is the class used for the main content headers () */
.content-head {
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 2em 0 1em;
/*padding: 10px;*/
}
/* This is a modifier class used when the content-head is inside a ribbon */
.content-head-ribbon {
color: white;
}
/* This is the class used for the content sub-headers () */
.content-subhead {
color: #1f8dd6;
}
.content-subhead i {
margin-right: 7px;
}
/* This is the class used for the dark-background areas. */
.ribbon {
background: #2d3e50;
color: #aaa;
}
/* This is the class used for the footer */
.footer {
background: #111;
font-size: 11px;
}
/*
* -- TABLET (AND UP) MEDIA QUERIES --
* On tablets and other medium-sized devices, we want to customize some
* of the mobile styles.
*/
#media (min-width: 48em) {
/* We increase the body font size */
body {
font-size: 16px;
}
/* We want to give the content area some more padding */
.content {
padding: 1em;
}
/* We can align the menu header to the left, but float the
menu items to the right. */
.home-menu {
text-align: left;
}
.home-menu ul {
float: right;
}
/* We increase the height of the splash-container */
/* .splash-container {
height: 500px;
}*/
/* We decrease the width of the .splash, since we have more width
to work with */
.splash {
width: 50%;
height: 50%;
}
.splash-head {
font-size: 250%;
}
/* We remove the border-separator assigned to .l-box-lrg */
.l-box-lrg {
border: none;
}
}
/*
* -- DESKTOP (AND UP) MEDIA QUERIES --
* On desktops and other large devices, we want to over-ride some
* of the mobile and tablet styles.
*/
#media (min-width: 78em) {
/* We increase the header font size even more */
.splash-head {
font-size: 300%;
}
}
EDIT:
Here are a few pictures to explain what I mean.
From the Android default browser (which doesn't support CSS3 transitions and transforms, it seems): (OK)
From Firefox on Android: (NO HEADER, WEIRD BLUE BAR: NOT OK)
From my desktop's Firefox (resized to match a phone's dimension): (OK)
What's surprising is that it seems to only occur on firefox on Android. I also tried on an iPhone, and the result is as expected. Why that only happens from Github-pages and not from my local server is what startles me the most.
EDIT 2:
I just compared the css produced by Github Pages and the css produced by my server, and besides a few linebreaks and spaces here and there, they are identical. Could the difference reside in the HTML?
I've just reproduced this on Firefox 38 on Ubuntu.
While trying to find a box-model problem I saw this in my Firefox security console :
Blocked loading mixed active content "http://yui.yahooapis.com/pure/0.6.0/pure-min.css"[Learn More] nicowcow.github.io
Blocked loading mixed active content "http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css"[Learn More] nicowcow.github.io
Blocked loading mixed active content "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"[Learn More]
Then the problem might be here (see MDN documentation about MixedContent).
So, the solution is to request those three ressources over https.
This does work for Font-awesome at https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css but not for pure files (NET::ERR_CERT_COMMON_NAME_INVALID).
You will have to host them on your server or find another provider which serve over htpps.