I've looked everywhere for a reasonable answer to this, but I can't find it. I have a relatively simple responsive website and it works fine on every screen, except for below 768px. For some reason, the body gets stretched and I get some horizontal scrolling, despite everything being set to 100%. The body is the only portion that appears to be wider than the viewport. I have a typical reset stylesheet to clear all padding and margins. I didn't forget to set meta name="viewport" tags or initial-scale. I honestly have no idea what is going on. The layout is fine on a tablet. It is even correct if I turn my phone to landscape. It's only in portrait that the body gets stretched about 15px outside the viewport and I have some horizontal scrolling. There is just blank white space on the right. You can check out the link on your phone to see the issue firsthand. Any ideas on how to fix this?
The layout is pretty simple
<body>
<div data-ng-include="'app/layout/shell.html'">
</div>
</body>
Here's the shell
<header class="fixed-header-shell" data-ng-include="'app/layout/topnav.html'"></header>
<div class="sections-shell" data-ng-view></div>
<footer class="footer-shell" data-ng-include="'app/layout/footer.html'"></footer>
All of the shell's are set to 100% width and have no right or left padding. Here is the entire page css for reference.
#import "colors";
#import "fonts";
#import "reset";
#import "init";
/***********************
Variables
************************/
/*Header*/
#defaultHeaderHeight: 110px;
#defaultNavHeight: 50px;
#defaultHeaderPadding: #defaultHeaderHeight/2 - #defaultNavHeight/2;
#defaultHeaderSidePadding: 5.0%;
/*Footer*/
#defaultFooterHeight: 70px;
/*Section*/
#defaultSectionPadding: 60px;
//#defaultSidePadding: 5.0%;
#defaultSidePadding: 0px;
#defaultSectionHeaderMargin: 35px;
#mediumSidePadding: 2.5%;
#smallSidePadding: 1.5%;
#sectionShellWidth: 100%;
#defaultSectionWidth: 55%;
/***********************
Mixins
************************/
.Clickable
{
&:hover
{
text-decoration:none;
cursor: pointer;
color: #primaryAccent;
}
&:visited
{
text-decoration:none;
}
&:active
{
text-decoration:none;
}
&:link
{
text-decoration:none;
}
}
.Button
{
padding: 8px;
background-color: #divider;
color: #primaryDark;
border-style: solid;
border-radius: 3px;
}
.Image(#imageURL, #radius, #size)
{
background-image: url(#imageURL);
-webkit-border-radius:#radius;
-moz-border-radius:#radius;
border-radius:#radius;
background-position: center;
background-size: #size #size;
width: #size;
height: #size;
}
/***********************
Body
************************/
body
{
background-color: #primaryBackground;
width: 100%;
}
/***********************
Shells
************************/
.fixed-header-shell
{
width: 100%;
position: fixed;
top: 0px;
z-index: 10;
background-color: #primaryBackgroundDark;
}
.sections-shell
{
width: 100%;
margin-top: #defaultHeaderHeight;
min-height: 900px;
background-color: #primaryBackground;
}
.footer-shell
{
width: 100%;
background-color: #primaryBackgroundDark;
}
/***********************
Blocks
************************/
.fixed-header-block
{
background-color: #primaryBackgroundDark;
height: #defaultHeaderHeight;
clear: both;
width: 100%;
//padding-left: #defaultHeaderSidePadding;
//padding-right: #defaultHeaderSidePadding;
}
.section-block
{
background-color: #primaryBackground;
width: #defaultSectionWidth;
padding-top: #defaultSectionPadding;
padding-bottom: #defaultSectionPadding;
margin-right: auto;
margin-left: auto;
text-align: left;
border-style: solid;
border-bottom-width: 1.5px;
border-bottom-color: #divider;
}
.footer-block
{
background-color: #primaryBackgroundDark;
text-align: center;
padding-top: #defaultSectionPadding;
padding-bottom: #defaultSectionPadding;
height: #defaultFooterHeight;
}
/***********************
Header
************************/
.fixed-header-logo
{
.HeadingLogo;
.Clickable;
height: #defaultHeaderHeight;
line-height: #defaultHeaderHeight;
//margin-left: #defaultHeaderSidePadding;
text-align: left;
color: #white;
}
.fixed-header-nav
{
height: #defaultHeaderHeight;
//margin-right: #defaultHeaderSidePadding;
text-align: right;
}
.fixed-header-nav-link
{
.Clickable;
.HeadingLink;
line-height: #defaultHeaderHeight;
margin-left: 18px;
//margin-right: 9px;
color: #white;
}
/***********************
Footer
************************/
.footer-link
{
.Clickable;
text-align: center;
.fa
{
.Clickable;
color: #secondaryTextWhite;
width: 5em;
line-height: #defaultFooterHeight / 2;
}
}
.footer-text
{
.FooterText;
color: #secondaryTextWhite;
margin: auto;
line-height: #defaultFooterHeight / 2;
width: 24em;
}
/***********************
Sections
************************/
.section-block-text
{
.BodyText;
color: #text;
margin-top: #defaultSectionHeaderMargin;
}
.section-header
{
.SectionHeader;
text-align: left;
color: #text;
}
.section-sub-header
{
.SectionSubHeader;
margin-top: #defaultSectionHeaderMargin / 2;
color: #text;
}
/***********************
Columns
************************/
.col
{
display: block;
float:left;
margin: 0 0 0 0;
}
.span_2_of_2
{
width: 100%;
}
.span_1_of_2
{
width: 50%;
}
/***********************
Grouping
************************/
.group:before,
.group:after
{
content:"";
display:table;
}
.group:after
{
clear:both;
}
.group
{
zoom:1; /* For IE 6/7 */
width: 95%;
margin: auto;
}
/***********************
Intro
************************/
#intro
{
background-color: #primaryBackgroundDark;
text-align: center;
.section-block
{
border-style: none;
background-color: #primaryBackgroundDark;
}
}
#intro-avatar
{
.Image("../../content/images/profile2.png", 9999px, 200px);
margin: auto;
}
#intro-tagline
{
.HeadingTagline;
color: #white;
margin-top: 75px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/***********************
Posts
************************/
#details
{
border-style: none;
}
.post-link
{
.Clickable;
}
.post-date
{
text-align: left;
color: #secondaryText;
.PostDate
}
.post-title
{
.PostTitle;
.Clickable;
margin-top: 5px;
text-align: left;
color: #text;
}
.post-full-title
{
.PostTitle;
margin-top: 5px;
text-align: left;
color: #text;
}
.post-text
{
.BodyText;
margin-top: 5px;
text-align: left;
color: #text;
}
.post-full-text
{
.BodyText;
margin-top: 5px;
padding-bottom: 50px;
text-align: left;
color: #text;
border-style: solid;
border-bottom-width: 1.5px;
border-bottom-color: #divider;
}
.post-navigation
{
.Clickable;
.Button;
.BodyText;
display: inline-block;
margin-top: 50px;
}
/***********************
Projects
************************/
.project-section
{
text-align: left;
}
.project-title
{
.PostTitle;
margin-top: 5px;
text-align: left;
color: #text;
}
.project-text
{
.BodyText;
margin-top: 15px;
text-align: left;
color: #text;
}
.project-image
{
width: 100%;
//height: 450px;
border-color: #primaryLight;
border-width: 2px;
border-style: solid;
object-fit: contain;
object-position: center;
}
.project-link
{
.Clickable;
}
/***********************
Contact
************************/
#contact
{
.fa
{
color:#primaryAccent;
margin-right: 10px;
width: 24px;
}
}
/***********************
Links
************************/
#links
{
background-color: #primaryBackgroundOff;
h3
{
color:#primaryDark;
}
a
{
.Clickable;
color: #primaryDark;
text-align: center;
}
#facebook
{
.Image("../../content/images/facebook.png", 9999px, 75px);
margin: auto;
}
#linkedin
{
.Image("../../content/images/linkedin.png", 9999px, 75px);
margin: auto;
}
#google
{
.Image("../../content/images/google.png", 9999px, 75px);
margin: auto;
}
#github
{
.Image("../../content/images/github.png", 9999px, 75px);
margin: auto;
}
}
.resume-link
{
margin-top: 1.5em;
.Clickable;
.Button;
.BodyText;
display: inline-block;
}
/***********************
Media Queries
************************/
#media screen and (max-width: 1024px)
{
.fixed-header-block
{
//padding-right: #mediumSidePadding;
//padding-left: #mediumSidePadding;
}
.section-block
{
//padding-right: #mediumSidePadding;
//padding-left: #mediumSidePadding;
width: 70%;
}
}
#media screen and (max-width: 800px)
{
.fixed-header-shell
{
position: relative;
}
.fixed-header-nav
{
text-align: center;
height: #defaultHeaderHeight / 3;
}
.fixed-header-nav-link
{
line-height: #defaultHeaderHeight / 3;
margin-left: 15px;
margin-right: 15px;
}
.fixed-header-logo
{
text-align: center;
line-height: #defaultHeaderHeight * 2 / 3;
height: #defaultHeaderHeight * 2 / 3;
}
.fixed-header-block
{
//padding-right: #smallSidePadding;
//padding-left: #smallSidePadding;
}
.sections-shell
{
margin-top: 0;
}
.section-block
{
//padding-right: #smallSidePadding;
//padding-left: #smallSidePadding;
width: 90%;
}
.col
{
margin: 0 0 0 0%;
}
.span_2_of_2,
.span_1_of_2,
{
width: 100%;
}
#intro-tagline
{
font-size: 3.4em;
}
}
#media screen and (max-width: 480px)
{
#intro-tagline
{
font-size: 3em;
}
}
You have a fixed width of 24em on your .footer-text
Remove that and you will be good.
Related
I'm unable to find the parse error in my css. The mobile website looks responsive in firefox but not Chrome. I am assuming that the parse error is affecting the scaling.
I've been trying to find the error with W3 CSS Validator. Not giving me enough to find the error other than stating "parse error". Might have missed RBRACE but scanned code and couldn't find one missing. Nor any typo.
#media only screen and (max-width: 600px) {
body {
font-size: 16px;
}
#nav {
height: 3.75em;
position: fixed;
top: 0;
width: 100%;
transition: 1s;
border-radius: 0em;
}
#nav .scrolled {
background-color: transparent;
}
#logo {
position: relative;
margin-top: 0.15em;
margin-left: 0.0625em;
height: 1.5em;
}
.m-hidden {
visibility: hidden;
}
.burger {
margin-top: -19.3em;
margin-left: 20.625em;
float: right;
visibility: visible;
position: absolute;
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 1.5625em;
height: 0.125em;
background-color: white;
margin: 0.375em 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-5px, 3px) ;
transform: rotate(-45deg) translate(-5px, 3px) ;
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
.overlay {
height: 100%;
width: 100%;
position: fixed;
z-index: 1; /* Sit on top */
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
.overlay-content {
position: relative;
top: 25%; /* 25% from the top */
width: 100%; /* 100% width */
text-align: center; /* Centered text/links */
margin-top: 1.875em; /* 30px top margin to avoid conflict with the close button on smaller screens */
}
.overlay a {
padding: 0.5em;
text-decoration: none;
font-size: 1.875em;
color: #818181;
display: block; /* Display block instead of inline */
transition: 0.3s; /* Transition effects on hover (color) */
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
text-decoration: none;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 1.25em}
.overlay .closebtn {
font-size: 2.5em;
top: 15px;
right: 35px;
}
}
.cover {
height: 100%;
}
.cover h2 {
margin-left: -0.2em;
margin-top: 6em;
font-size: 2.5em;
text-align: left;
}
.who {
height: 80%;
}
.who h1 {
position: relative;
margin-top: 1em;
margin-left: 2em;
font-size: 3.125em;
text-shadow: 5px 0px white;
text-align: center;
}
.who h2 {
margin-left: 1.5625em;
float: left;
font-size: 0.9375em;
width: 18.75em;
text-align: center;
}
.who a {
position: absolute;
margin-top: 0em;
margin-left: 0em;
float: right;
color: lightgrey;
font-size: 0.9375em;
text-decoration: underline;
https://stackoverflow.com/help visibility: hidden;
}
.service {
height: 95%;
/* background-image: url('../img/mobile/red.jpg');*/
}
.service h1{
margin-top: -4.375em;
font-size: 2em;
}
.service h2{
width: 70%;
font-size: 0.9375em;
}
.service_2 {
margin: 0em;
display: table;
width: 100%;
height: 95%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
.service_2 .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.service_2 .content {
text-align: right;
}
.service_2 img {
padding-top: 1em;
height: 6.5em;
}
.service_2 h1 {
font-family: haboro, serif;
font-weight: bold;
font-size: 2em;
text-align: right;
margin-left: -12em;
}
.service_2 h2 {
margin-right: 0em;
float: right;
text-align: right;
font-size: 0.9375em;
width: 18.75em;
}
.service_3 {
height: 95%;
margin-top: -14.7em;
}
.service_3 h1{
font-size: 2em;
}
.service_3 h2{
width: 70%;
font-size: 0.9375em;
}
.service_3 span {
font-size: 0.9375em;
}
.portfolio-title {
margin-top: 0em;
padding: 5em;
text-align: center;
}
.portfolio-title h1 {
font-size: 2.5em;
}
.portfolio-title hr {
width: 10em;
}
.portfolio-title h3 {
font-size: 0.9375em;
color: white;
}
.box-wrap {
display: table;
padding: 0em;
}
.zoom {
position: relative;
}
.box-content h1 {
height: 100%;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.frame {
display: table;
float: none;
height: 16em;
width: 100%;
}
.frame img {
height: 16em;
width: 100%;
}
.frame p {
op: 65%;
}
.frame2 {
display: table;
float: none;
height: 16em;
width: 100%;
}
.frame2 img {
height: 16em;
width: 100%;
}
.frame2 p {
top: 65%;
}
.frame3 {
display: table;
float: none;
height: 16em;
width: 100%;
}
.frame3 img {
height: 16em;
width: 100%;
}
.frame4 {
display: table;
float: none;
height: 16em;
width: 100%;
}
.frame4 img {
height: 16em;
width: 100%;
}
.frame4 p {
top: 65%;
}
.frame5 {
display: table;
float: none;
height: 16em;
width: 100%;
}
.frame5 img {
height: 16em;
width: 100%;
}
.frame6 {
display: table;
float: none;
height: 16em;
width: 100%;
}
.frame6 img {
height: 16em;
width: 100%;
}
.project-btn {
display: table;
height: 3.125em;
width: 100%;
background-color: #C7C4BF;
color: black;
text-align: center;
margin-bottom: 0em;
}
.project-btn h3 {
padding-top: 0em;
font-size: 0.9375em;
}
.project-btn a {
color: black;
}
.project-btn a:hover {
text-decoration: none;
color: grey;
}
.contact {
height: 60%;
margin-bottom: 33.3em;
}
.contact h1 {
margin: 0em;
font-size: 1.5625em;
}
.contact-btn {
margin-top: 1.25em;
height: 2.5em;
width: 9.375em;
font-size: 0.9375em;
}
.contact-btn:hover {
font-size: 9.375em;
}
footer {
height: 80%;
}
.footercontent {
margin-left: -12em;
}
footer img {
height: 3.125em;
margin-bottom: 0.9375em;
}
footer p:nth-child(4) {
font-size: 0.75em;
}
footer .foot {
font-family: haboro, serif;
font-size: 1em;
padding-bottom: 0.0625em;
}
footer .break {
margin-left: 2em;
margin-top: -0.3125em;
border-bottom: 1px solid white;
border-width: 1px;
width: 4.375em;
}
footer a {
color: white;
text-decoration: none;
}
footer a:hover {
text-decoration: none;
color: grey;
}
footer i {
font-size: 1.25em;
margin-bottom: 0.625em;
}
.footer-icons {
font-size: 0.625em;
margin-right: 1em;
}
.fmobile {
margin-left: 0.3125em;
position: absolute;
visibility: visible;
align-items: center;
}
}
There is a text https://stackoverflow.com/help in your .who a. Remove this line.
.who a {
position: absolute;
margin-top: 0em;
margin-left: 0em;
float: right;
color: lightgrey;
font-size: 0.9375em;
text-decoration: underline;
visibility: hidden;
}
The property op does not exist. Do uou mean top or opacity ??
.frame p {
op: 65%;
}
I am trying to fix a CSS created by someone else(I took over a job from a other company for my current client)
As for now everything working in my website except on my Samsung Galaxy S8. The footer doesnt follow the rules. I have putted everything I could find online with
#media only screen and (min-width: 360px) and (max-width: 767px) {
/* Your Styles... */
}
But still when I'm going on the website on my S8. The text in a specific part that I want to follow rules..doesnt. (Part is Footer-right2)
On iPad, Desktop its working except this.
Any ideas ?
Here my CSS :
#media and (min-width: 360px) and (max-width: 767px) {
#footer .footer-wrapper .footer-right2 {
text-align: center;
font-size: 0.5em;
font-weight: 300;
padding-left: 15px;
margin:auto;
max-width:200px;
}
#footer .footer-logo {
display: inline-block;
padding-left: 15px;
margin:auto; } }
It's working for other size so here one of them as exemple :
#media (max-width: 768px) {
#header .header-wrapper {
height: 85px; }
#header .header-toggle-menu {
position: fixed;
top: 30px;
right: 15px;
z-index: 7000;
display: block; }
#header .header-toggle-menu span {
display: block;
width: 42px;
height: 7px;
border-radius: 3px;
background-color: #1d1d1d;
transition: background-color 0.175s linear; }
#header .header-toggle-menu span + span {
margin-top: 4px; }
#header .header-menu {
position: fixed;
right: 0;
top: 0;
bottom: 0;
z-index: 6000;
padding: 7px;
width: 300px;
background-color: #08ab0f;
padding-top: 85px;
transform: translateX(300px);
transition: transform 0.225s ease-in-out; }
#header .header-menu a {
display: block;
padding: 7px;
font-size: 0.85em;
font-weight: 900;
color: #ffffff;
transition: none;
background-color: #e13649;
margin-bottom: 7px; }
#header .header-menu a:hover, #header .header-menu a:focus {
color: #ffffff; }
#header.active .header-menu {
transform: translateX(0); }
#header.active .header-toggle-menu span {
background-color: #ffffff; }
#footer .footer-wrapper .form-message {
top: 85px; }
#footer .footer-wrapper .footer-right2 {
text-align: center;
font-size: 0.5em;
font-weight: 300;
padding-left: 15px;
margin:auto;
max-width:200px;
}
#footer .footer-logo {
display: inline-block;
padding-left: 15px;
margin:auto; }
#page {
padding-top: 85px; }
.slider-container {
height: 530px;
background-color: #08ab0f; }
.slider-container .slider-slides {
height: 500px; }
.slider-container .slider-slides .slides-item {
position: relative; }
.slider-container .slider-slides .slides-item .item-left, .slider-container .slider-slides .slides-item .item-right {
position: absolute;
top: 0;
left: 0;
right: auto;
width: 100%;
height: 100%; }
.slider-container .slider-slides .slides-item .item-left {
z-index: 100;
background-color: rgba(0, 0, 0, 0.3);
text-align: center; }
.slider-container .slider-slides .slides-item .item-right {
z-index: 50; }
.slider-container .slider-navigation {
position: absolute;
bottom: 0; }
.single-team_member .team-member-header {
display: block;
align-items: stretch;
justify-content: center;
flex-direction: column;
flex-wrap: nowrap; }
.single-team_member .team-member-header .header-image {
padding: 0; }
.single-team_member .team-member-header .header-image:before {
content: '';
display: block;
padding-bottom: 56.75%; }
.single-team_member .team-member-header .header-content {
background-color: #1d1d1d;
padding: 30px 15px; } }
I'm in the midst of creating a responsive portfolio at the moment and I'm running into a bit of trouble.
Before a certain breakpoint (css media query), the second and third paragraph in the 'About' section of my website are in floats. As the window gets smaller, the text starts to overlap the footer and eventually create a whitespace at the bottom and side. When it reaches the breakpoint, the floats are valued as 'none'.
How can I make it so that the height of the container is determined by how much content is in there (i.e. the normal behaviour)? I've tried a clearfix, but that doesn't seem to work.
https://codepen.io/webdevkid/pen/gmBVMj
HTML
<body>
<nav>
<div id="logo"><a id="logo-link" href="index.html"><span id="word-1">Potential </span><span id="word-2">Beginning</span></a><div id="menu-icon"></div></div><div class="clear"></div>
<ul id="main-links">
<li><span class="word-position">About</span></li>
<li><span class="word-position">Work</span></li>
<li class="last-child"><span class="word-position">Contact</span></li>
</ul>
</nav>
<div id="main-container">
<div id="introductory-background">
<div id="introductory-overlay">
<div id="introductory-content">
<div id="introductory-container">
<h1 id="role-header">Junior Web Developer</h1>
<h3 id="role-support-text">...but that's not all I can do</h3>
<a id="read-more" class="no-select">Read More</a>
</div>
</div>
</div>
</div>
<div id="about-section">
<br />
<br />
<div id="photo-frame">
<div id="picture"></div>
</div>
<br />
<div id="about-text-container">
<p>Hi There! My name is Ed Garbutt, a Junior Web Developer based in South Buckinghamshire, with a huge passion for all things programming.</p>
<br />
<p id="about-left-side" class="side-by-side">Sadly, I'm not like most Developer out thers. I don't drink Red Bull or Monster Cans. I'm not a fan of Start Wars. I don't read Marvel Comic Books, but I am someone who likes going outside here and then.</p>
<p id="about-right-side" class="side-by-side">All jokes aside, what you <b>will</b> get is someone who prides himself on attention to details, who will always rise to a challenge ans is constantly looking to better himself, building upon his existing knowledge of programming languages and frameworks.</p>
</div>
</div>
</div>
<footer>
<p id="footer-text">
© 2016 Ed Garbutt. All rights reserved.
</p>
</footer>
</body>
CSS
body {
margin: 0;
}
nav {
width: 100%;
height: 50px;
position: fixed;
background-color: rgb(40, 40, 40);
border-bottom-style: solid;
border-bottom-color: rgb(238, 0, 0);
border-bottom-width: 7.5px;
padding-top: 14px;
z-index: 10;
}
#logo {
position: relative;
bottom: 5px;
font-size: 30px;
padding-left: 8px;
float: left;
font-family: bebas;
}
#word-1 {
color: rgb(0, 154, 205);
}
#word-2 {
color: rgb(255, 250, 250);
}
ul#main-links {
list-style: none;
margin: 0;
padding-right: 50px;
float: right;
height: 100%;
border-bottom: 7.5px solid transparent;
display: block;
font-size: 0;
}
ul#main-links li {
display: inline-block;
text-align: center;
border-bottom-style: solid;
border-bottom-width: 7.5px;
border-bottom-color: rgb(238, 0, 0);
color: white;
font-family: arcon;
font-size: 18px;
height: 100%;
width: 90px;
position: relative;
z-index: 2;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: white;
}
a:active {
text-decoration: none;
color: white;
}
a#logo-link {
text-decoration: none;
}
a#logo-link:visited {
text-decoration: none;
color: inherit;
}
a#logo-link:active {
text-decoration: none;
color: inherit;
}
ul#main-links > a > li > span.word-position {
position: relative;
top: 5px;
}
#menu-icon {
height: 48px;
width: 48px;
display: none;
cursor: pointer;
background-image: url("../images/hamburg-white-2.png");
}
#main-container {
padding-top: 71.4px;
}
#media screen and (min-width: 656px) {
ul#main-links {
display: block !important;
}
}
#media screen and (max-width: 656px) {
nav {
height: initial;
}
#logo {
width: 100%;
float: none;
padding-left: 0;
text-align: center;
bottom: 8px;
}
#menu-icon {
display: inline-block;
/* float: right;*/
position: absolute;
right: 10px;
top: -2px;
}
ul#main-links {
display: none;
float: none;
padding-right: 0;
padding-left: 0;
width: 100%;
}
ul#main-links li {
width: 100%;
display: block;
border: none;
padding: 10px 0;
}
ul#main-links li:not(.last-child) {
border-bottom-style: solid;
border-bottom-color: rgb(238, 0, 0);
border-bottom-width: 2.5px;
}
ul#main-links > a > li > span.word-position {
top: 0px;
}
#main-container {
padding-top: 62.4px;
}
}
#media screen and (max-width: 400px) {
#logo {
bottom: 7.5px;
font-size: 23px;
padding-left: 10px;
text-align: left;
}
#menu-icon {
height: 32px;
width: 32px;
background-image: url("../images/hamburg-white-1.png");
top: 0.4px;
right: 20px;
}
#main-container {
padding-top: 52.4px;
}
}
/* ----INTORDUCTION---- */
#introductory-background {
background-image: url('../images/eternity-1024x768.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
/* min-height: 527px;*/
height: 90vh;
background-size: 100% 100%;
overflow: auto;
}
#introductory-overlay {
display: table;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
#introductory-content {
margin-left: auto;
margin-right: auto;
display: table-cell;
vertical-align: middle;
text-align: center;
}
#introductory-container {
position: relative;
bottom: 60px;
}
h1#role-header {
display: block;
position: relative;
right: 5em;
opacity: 0;
font-size: 48px;
color: rgb(255, 250, 250);
}
h3#role-support-text {
display: block;
opacity: 0;
position: relative;
top: 20px;
font-size: 30px;
color: rgb(255, 250, 250);
}
#read-more {
border-radius: 38px;
background-color: rgb(255, 250, 250);
padding: 0.5em 1.5em;
font-size: 24px;
cursor: pointer;
}
#media screen and (max-width: 656px) {
#introductory-container {
bottom: 60px;
}
h1#role-header {
font-size: 37px;
}
h3#role-support-text {
top: 15px;
font-size: 24px;
}
#read-more {
font-size: 19px;
}
}
#media screen and (max-width: 400px) {
#introductory-container {
bottom: 72.5px;
}
h1#role-header {
font-size: 28px;
}
h3#role-support-text {
top: 11px;
font-size: 20px;
}
#read-more {
font-size: 16px;
}
}
/* -------------------- */
/* -------ABOUT-------- */
#about-section {
width: 100%;
height: 500px;
background-color: rgb(131, 111, 235);
}
#photo-frame {
margin: 0 auto;
background-color: royalblue;
width: 180px;
height: 180px;
border-radius: 100px;
border-style: solid;
border-color: beige;
border-width: 7.5px;
z-index: 2;
}
#photo-frame > #picture {
width: 100%;
height: 100%;
background-image: url('../images/Ed.png');
border-radius: 100px;
}
#about-section > #about-text-container {
margin: 0 auto;
width: 80%;
}
#about-section > #about-text-container > p {
margin: 0;
text-align: center;
/* padding: 0 3rem;*/
font-size: 22px;
}
#about-section > #about-text-container > p.side-by-side {
/* display: inline-block;*/
width: 45%;
text-align: justify;
}
#about-section > #about-text-container > p#about-left-side {
float: left;
}
#about-section > #about-text-container > p#about-right-side{
float: right;
}
#media screen and (max-width: 868px) {
#about-section > #about-text-container > p.side-by-side {
/* display: inline-block;*/
width: 100%;
}
#about-section > #about-text-container > p#about-left-side {
float: none;
padding-bottom: 1.5rem;
}
#about-section > #about-text-container > p#about-right-side{
float: none;
}
}
#media screen and (max-width: 656px) {
#photo-frame {
width: 150px;
height: 150px;
}
#about-section > #about-text-container {
width: 90%;
}
#about-section > #about-text-container > p {
text-align: justify;
padding: 0 1.5rem;
font-size: 20px;
}
}
#media screen and (max-width: 400px) {
#photo-frame {
width: 125px;
height: 125px;
}
#about-section > #about-text-container {
width: 100%;
}
#about-section > #about-text-container > p {
padding: 0 0.5rem;
font-size: 18px;
}
}
/* -------------------- */
/* -------FOOTER------- */
footer {
width: 100%;
background-color: black;
}
footer > p#footer-text {
margin: 0;
text-align: center;
font-family: arial;
color: rgb(169, 169, 169);
padding: 20px;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* -------------------- */
.no-select {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
Try this:
#about-section {
width: 100%;
background-color: rgb(131, 111, 235);
}
Description
You are using #about-section id remove the height property or use height:auto, you have given a fixed height. And use float:left as well in p tag ids.
here your update code
So this boils down to your p.side-by-side definition which is set at 45%.
If you want to not have columns on small screen sizes, then the approach would be to only set that 45% value with a break-point above mobile.
Your using a non-mobile first approach that makes this stuff harder (in my opinion). The easier way to go about it is to not add any width styles to those columns, and only add the 45% and the float, once the screen is above (say) 768px. In other words your media queries will generally have min values, not max.
I think a good way to start to think mobile-first is to realise that mobile layouts use kind of "less" CSS than desktops. So you keep it simple, just using semantic html, and then add in styles as the screen size increases to start making columns etc.
I'm having a strange CSS problem where the main div container on my website shifts to the right when I visit certain pages. This happens even though there is no specific CSS rule to move it
I've uploaded a temp version of my site here:
http://myawesometestsite.ddns.net/
When you go to the Publications and Contact page the entire container shifts to the right by a few pixels. The position appears to be correct and unshifted on all other pages
This is the full CSS I'm using:
body {
background-color: #dcd8cf;
font-family: Raleway, Arial, sans-serif;
font-size: 1em;
}
h1 {
font-size: 1.5em;
color: #832C00;
margin-bottom: 30px;
}
h2 {
font-size: 1.2em;
color: #832C00;
margin-top: 30px;
}
h3 {
font-size: 1em;
margin-bottom: 5px;
margin-top: 20px;
}
h4 {
font-size: 1em;
font-style: italic;
margin-top: 0px;
margin-left: 10px;
margin-bottom: 5px;
}
.container {
position: relative;
left: 50%;
margin-left: -470px;
width: 940px;
border: 1px solid black;
}
/*
Header
*/
header {
position: relative;
display: inline-block;
width: 100%;
height: 180px;
background-color: #a63700;
}
header h1 {
position: absolute;
font-size: 2.5em;
color: #e6e6dc;
top: 50px;
left: 100px;
margin: 0px;
}
header h2 {
position: absolute;
font-size: 0.77em;
color: #e6e6dc;
top: 100px;
left: 100px;
margin: 0px;
opacity: 0.7;
}
header img {
border: 2px solid #e6e6dc;
border-radius: 50%;
max-width: 100%;
max-height: 100%;
}
.profileImage {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
max-width: 150px;
max-height: 150px;
}
.skillIcons {
position: absolute;
right: 25px;
top: 15px;
}
.skillIcons img {
display: inline;
width: 75px;
height: 75px;
padding: 5px;
margin: 15px;
opacity: 0.7;
}
/*
Navigation menu
*/
nav {
position: relative;
z-index: 1;
text-align: center;
letter-spacing: 2px;
background-color: #a63700;
height: 50px;
width: 100%;
}
nav a {
position: relative;
top: 20px;
color: #D1D1C9;
text-decoration: none;
padding: 0 30px;
}
nav a:hover {
border-bottom: solid 1px #e6e6dc;
padding-bottom: 3px;
}
.navSelected {
text-shadow:0px 0px 1px white;
color: white;
}
/*
Main content
*/
main {
position: relative;
background-color: white;
padding: 10px;
}
/*
Footer
*/
footer {
position: relative;
color: #e6e6dc;
background-color: #a63700;
font-size: 10pt;
padding: 10px;
}
.leftFooter ul {
padding-left: 0px;
}
.leftFooter li {
display: inline;
list-style-type: none;
}
.leftFooter li a {
color: #e6e6dc;
text-decoration: none;
}
.leftFooter li + li:before {
color: #e6e6dc;
content: "|";
padding: 10px;
}
.rightFooter {
position: absolute;
right: 10px;
top: 4px;
}
.rightFooter img {
display: inline;
max-width: 30px;
max-height: 30px;
vertical-align: middle;
margin-top: -3px;
}
.copyright {
font-size: 1em;
}
/*
Home page
*/
/*
Publications page
*/
.hangingIndent {
padding-left: 1.5em;
text-indent:-1.5em;
}
.publications h2 {
margin-top: 50px;
}
/*
Code page
*/
.codeProjects a {
color: #a63700;
text-decoration: none;
}
.codeProjects a:hover {
text-decoration: underline;
}
.codeProjects p {
margin-left: 10px;
}
/*
CV page
*/
.cvContainer {
width: 90%;
margin: 0 auto;
}
.cvEntry {
margin-bottom: 30px;
margin-left: 20px;
margin-right: 20px;
}
.sectionHeading {
width: 100%;
border-bottom: 1px solid #000;
}
.alignLeft {
display: block;
float: left;
text-align: left;
width: 80%;
margin-top: 10px;
}
.alignLeft p {
font-size: 1em;
}
.alignLeftSub {
margin-top: -10px;
margin-left: 20px;
}
.alignRight {
display: block;
float: right;
text-align: right;
width: 20%;
margin-top: 10px;
}
.clear {
clear: both;
}
/*
Contact page
*/
.contactInfo {
margin-left: 20px;
}
.contactInfo img {
display: inline;
max-width: 30px;
max-height: 30px;
vertical-align: middle;
}
.emailHidden {
display: none;
}
.contactInfo a {
margin-left: 5px;
color: #a63700;
text-decoration: none;
}
.contactInfo #emailAddress {
margin-left: 2px;
}
.contactInfo #emailAddress a {
margin-left: 8px;
}
/*
Media queries
*/
#media screen and (max-width : 940px) {
.container {
position: relative;
left: 0px;
margin: 0px;
width: 100%;
}
header h1 {
left: 5%;
margin: 0px;
}
header h2 {
left: 5%;
margin: 0px;
}
.skillIcons img {
max-width: 70px;
max-height: 70px;
margin-left: 5px;
margin-right: 0px;
}
}
#media screen and (max-width : 800px) {
header h1 {
display: none;
}
header h2 {
display: none;
}
.skillIcons img {
display: none;
}
nav {
height: 150px;
}
nav a {
display: block;
}
nav a:hover {
border-bottom: none;
padding-bottom: 0px;
}
}
#media screen and (max-width : 600px) {
.rightFooter {
position: relative;
display: block;
margin-left: 10px;
}
}
I don't believe there's anything in here that's causing the container to shift for just those 2 pages but maybe I'm missing something. Anyone have any idea whats causing this?
Add "overflow-y: scroll;" to your "body" selector. It should look like this in your CSS:
body {
background-color: #dcd8cf;
font-family: Raleway, Arial, sans-serif;
font-size: 1em;
overflow-y: scroll;
}
The lenght of the pages create a vertical scroll bar. Publication and contact are small then the other are more big then the screen. for fix this you need an overflow-y set to scroll;
body {
overflow-y: scroll;
}
I'm trying to create a new page in which I apply my own CSS and use some of the components developed here: http://aozora.github.io/bootmetro/index.html.
Problem is that on one component the browser is only applying the style from my file and not the style defined on the .css file I downloaded from the site. Trouble is that firebug shows that the file is being tranfered to the user but somehow its not being used even if the class defined from tag is clearly defined on the other .css file.
Heres the source of the page:
<div class="header">
<div class="right textHeader">
<div class="left logo"><p class="title">Portal para la gestión y control<br>
de la implementación del sistema de información PAI
</p>
</div>
<div class="right textInfo">
<div class="left greetTime">
<img src="/Content/Images/calendar.png"> 27/04/2013 12:15:25 p.m.
</div>
<div class="greet">
Hola, <a class="username" href="/Account/Manage" title="Manage">administrador</a>!
<form action="/Account/LogOff" id="logoutForm" method="post"><input name="__RequestVerificationToken" value="gsGgnTHMhT55z7aQFmarrbLlUQK4x2nuMNZP_kXbqRx2j3kWOhNSc3RptPzG8118PGgkQOpU_erRuCcZ7GvH4FhKNAlaCug0dFUGKjiFqbP5wjhFTJConDCIZzZppq090" type="hidden"> Desconectarse
</form> </div>
</div>
</div>
<div class="left imgHeader">
<img src="/Content/Images/logo-minSalud.png">
<img src="/Content/Images/logo-prosperidad.png">
</div>
</div>
<div id="categories">
Inicio
</div>
<div id="content">
<h2>Bienvenido</h2>
This is the item I want to apply the class to
Administrar banco de información**Administrar usuariosReportes gerenciales
</div>
Here's the firebug screenshot:
And here's the screenshot showing that both files are being downloaded:
Here's my css file:
body {
color: #353535;
background-color: #fff;
background: url("Images/bg.jpg") repeat-x 0 0 #EBEBEB;
font-size: 1em;
margin: 0;
padding: 0;
font-family: 'Maven Pro', sans-serif;
}
header, footer, nav, section
{
display: block;
}
.editButton {
background:url(Images/editarPequeño.ico);
background-repeat: no-repeat;
display: block;
text-indent: -9999px; /* hides the link text */
}
.deleteButton {
background:url(Images/deletePequeno.ico);
background-repeat: no-repeat;
display: block;
text-indent: -9999px; /* hides the link text */
}
.left
{
float:left
}
.right {
float: right;
}
.navBar {
background-color: #F7921E;
height: 48px;
}
/*//////////TABLA LISTADO /////////////////////////*/
table {
color: #333;
/*font-family: Helvetica, Arial, sans-serif;*/
/*width: 640px;*/
border-collapse:
collapse; border-spacing: 0;
margin-left:auto;
margin-right:auto;
}
td, th {
border: 1px solid transparent; /* No more visible border */
height: 30px;
transition: all 0.3s; /* Simple transition for hover effect */
}
th {
background: #5DBCD2; /* Darken header a bit */
font-weight: bold;
border: 1px solid #CCC;
}
td {
background: #FAFAFA;
text-align: center;
}
/* Cells in even rows (2,4,6...) are one color */
tr:nth-child(even) td { background: #F1F1F1; }
/* Cells in odd rows (1,3,5...) are another (excludes header cells) */
tr:nth-child(odd) td { background: #FEFEFE; }
tr td:hover { background: #666; color: #FFF; } /* Hover cell effect! */
/*///////////////////////////////*/
.title {
/*font-family: 'Montserrat', sans-serif;*/
/*width: 500px;*/
font-weight: bold;
}
.greet {
font-size: 0.78em;
}
.textInfo {
width:50%;
/*height:100%;*/
}
/*///////////////////////////////////////*/
.listView {
margin-left: 0px;
list-style: none outside none;
}
ul{
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
.metrouicss .listview:before, .metrouicss .listview:after {
display: table;
content: "";
}
/*///////////////////////////////////////*/
.okButton {
background: -moz-linear-gradient(center top , #ff6600 0px, #ff6600 100%) repeat scroll 0 0 transparent;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
opacity: 0.75;
padding: 6px 10px;
margin-top:5px;
display:block;
margin:0px auto;
}
.okButton {
transition: opacity 0.2s ease 0s;
}
.footer {
width: 100%;
height: 100px;
background: none repeat scroll 0% 0% rgb(138, 188, 203);
margin-top:50px;
color: rgb(0, 0, 0);
font-size: 0.7em;
border-top: 1px solid rgb(98, 143, 156);
}
.logo {
width:50%
}
.textHeader {
width:63%
}
.greetTime {
font-size: 0.58em;
/*width: 15px;*/
}
.header {
height: 122px;
width: auto;
margin-top:20px;
/*margin-left:5%;*/
/*margin: 0px auto;*/
}
/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
border: 1px solid #ddd;
padding: 0 1.4em 1.4em 1.4em;
margin: 0 0 1.5em 0;
}
legend {
font-size: 1.2em;
font-weight: bold;
color:black
}
textarea {
min-height: 75px;
}
.editor-label {
margin: 1em 0 0 0;
}
.editor-field {
margin: 0.5em 0 0 0;
}
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
color: #f00;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
border: 1px solid #f00;
background-color: #fee;
}
.validation-summary-errors {
font-weight: bold;
color: #f00;
}
.validation-summary-valid {
display: none;
}
/*CSS Aditions*/
BODY { font-size: 1em; margin: 0; }
DIV#header DIV.title, DIV.item H3, DIV.item H4, DIV.pager A
{
/*font: bold 1em "Arial Narrow", "Franklin Gothic Medium", Arial;*/
}
A#loginLink {
font-size:1.5em;
}
/*DIV#header { background-color: #5DBCD2; border-bottom: 2px solid #111; color: black; }*/
DIV#header DIV.title { font-size: 2em; padding: .6em; }
DIV#title { font-size: 2em; padding: .6em;float:right }
DIV#headerImages { float:left}
/*DIV#content { border-left: 2px solid gray; margin-left: 9em; padding: 1em; }*/
DIV#categories { float: left; width: 8em; padding: .3em; }
DIV.item { border-top: 1px dotted gray; padding-top: .7em; margin-bottom: .7em; }
DIV.item:first-child { border-top:none; padding-top: 0; }
DIV.item H3 { font-size: 1.3em; margin: 0 0 .25em 0; }
DIV.item H4 { font-size: 1.1em; margin:.4em 0 0 0; }
DIV.pager { text-align:right; border-top: 2px solid silver;
padding: .5em 0 0 0; margin-top: 1em; }
DIV.pager A { font-size: 1.1em; color: #666; text-decoration: none;
padding: 0 .4em 0 .4em; }
DIV.pager A:hover { background-color: Silver; }
DIV.pager A.selected { background-color: #353535; color: White; }
DIV#categories A
{
font: bold 1.1em "Arial Narrow","Franklin Gothic Medium",Arial; display: block;
text-decoration: none; padding: .6em; color: Black;
border-bottom: 1px solid silver;
}
DIV#categories A.selected { background-color: #666; color: White; }
DIV#categories A:hover { background-color: #CCC; }
DIV#categories A.selected:hover { background-color: #666; }
And heres the css file i downloaded
/* Metro Tiles
-------------------------------------------------- */
.bg-color-blue {
background-color: #0072BC !important;
}
.bg-color-blueDark {
background-color: #662D91 !important;
}
.bg-color-green {
background-color: #01a31c !important;
}
.bg-color-greenDark {
background-color: #008641 !important;
}
.bg-color-red {
background-color: #bc1c48 !important;
}
.bg-color-yellow {
background-color: #ffc40d !important;
}
.bg-color-orange {
background-color: #CD4900 !important;
}
.bg-color-pink {
background-color: #c3325f !important;
}
.bg-color-purple {
background-color: #603cba !important;
}
.bg-color-darken {
background-color: #1c1c1c !important;
}
.metro {
overflow: hidden;
}
.metro .carousel-control {
top: 20%;
}
.metro .metro-sections {
height: auto;
position: relative;
overflow: hidden;
width: 10000px;
}
.metro-sections h2 {
margin-left: 5px;
font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
font-weight: 300;
text-transform: lowercase;
}
.metro .metro-sections .metro-section {
position: relative;
float: left;
/*width: 810px !important;*/
width: auto;
height: auto;
margin-right: 75px;
}
/* fixed widths for tile sections
units are measured per square tile width, i.e.: tile-span-1 = 160px = 1 square tile width (including margin)
*/
.metro .metro-sections .metro-section.tile-span-1 { width: 160px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-2 { width: 320px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-3 { width: 480px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-4 { width: 640px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-5 { width: 640px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-6 { width: 800px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-7 { width: 960px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-8 { width: 1120px; margin-left: 0;}
/*default tile definition */
.metro .tile {
position: relative;
display: block;
float: left;
margin: 5px;
padding: 0;
/*padding-bottom: 1px;*/
width: 150px;
height: 150px;
color: #FFF;
cursor: pointer;
overflow: hidden;
text-decoration: none;
background-color: #2C83EF;
}
.metro .tile:hover {
outline: 3px #225a68 solid;
}
.scroll {
-webkit-transition:left 0.6s ease; /* here the animation is set on 5 seconds */
-moz-transition:left 0.6s ease;
-o-transition:left 0.6s ease;
transition:left 0.6s ease;
}
/* Metro Tiles Templates
-------------------------------------------------- */
.metro .tile.square.text {
width: 110px;
height: 110px;
padding: 20px;
}
.metro .tile.square.image {
width: 150px;
height: 150px;
padding: 0;
}
.metro .tile.square.image img {
max-width: 150px;
max-height: 150px;
}
.metro .tile.squarepeek {
width: 150px;
height: 300px;
}
.metro .tile.squarepeek .text-inner {
width: 110px;
height: 110px;
padding: 20px;
}
.metro .tile.wide.text {
width: 270px;
height: 110px;
padding: 20px;
}
.metro .tile.wide.image {
width: 310px;
height: 150px;
}
.metro .tile.wide.image.collection img {
max-width: 158px;
max-height: 150px;
float: left;
}
/* template for full image */
.metro .tile.wide.imagetext.wideimage {
width: 310px;
height: 150px;
padding: 0;
}
/* template with normal 80x80 image */
.metro .tile.wide.imagetext {
width: 270px;
height: 110px;
padding: 20px;
}
.metro .tile.wide.imagetext .textover-wrapper {
position: absolute;
bottom: 0;
width: 270px;
height: 48px;
padding: 2px 20px;
background-color: inherit;
}
.metro .tile.widepeek {
width: 310px;
height: 300px;
}
/* Default Tile
-------------------------------------------------- */
.metro .tile.app .image-wrapper {
display: block;
width: 150px;
height: 80px;
margin-top: 20px;
padding: 8px 0;
text-align: center;
vertical-align: middle;
}
.metro .tile.app .image-wrapper img {
max-width: 80px;
max-height: 80px;
margin: 0 auto;
}
.metro .tile .app-label {
bottom: 5px;
font-size: 12px;
left: 20px;
position: absolute;
}
.metro .tile .app-count {
position: absolute;
right: 20px;
bottom: 10px;
font-size: 14px;
font-weight: bold;
}
.metro .tile.wide.app {
width: 310px;
height: 150px;
}
.metro .tile.wide.app .image-wrapper {
width: 310px;
}
.image-wrapper span.icon {
font-size: 80px;
height: 80px;
line-height: 80px;
width: 80px;
}
/*
-------------------------------------------------- */
.metro .tile.square.text .text-big {
font-size: 76px;
line-height: 76px;
text-align: left;
overflow: hidden;
}
.metro .tile.square.text.tilesquareblock .text {
font-size: 14px;
font-weight: bold;
text-align: left;
overflow: hidden;
}
/* normal header in 1 line of wrapped text*/
.metro .tile .text-header {
font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
font-weight: 300;
font-size: 34px;
line-height: 36px;
max-height: 36px;
text-align: left;
overflow: hidden;
}
/* One string of large text wrapped over a maximum of three lines.*/
.metro .tile .text-header3 {
font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
font-weight: 300;
font-size: 34px;
line-height: 36px;
text-align: left;
max-height: 110px;
overflow: hidden;
}
/* 1 line of regular text (not wrapped) */
.metro .tile .text {
font-size: 15px;
line-height: 18px;
height: 18px;
font-weight: normal;
text-align: left;
overflow: hidden;
}
/* regular text wrapped over a maximum of 2 lines */
.metro .tile .text2 {
font-size: 15px;
font-weight: normal;
line-height: 20px;
max-height: 44px;
overflow: hidden;
text-align: left;
}
/* regular text wrapped over a maximum of 3 lines */
.metro .tile .text3 {
font-size: 15px;
line-height: 18px;
font-weight: normal;
text-align: left;
max-height: 56px;
overflow: hidden;
}
/* regular text wrapped over a maximum of 4 lines */
.metro .tile .text4 {
font-size: 15px;
line-height: 18px;
font-weight: normal;
text-align: left;
max-height: 72px;
overflow: hidden;
}
/* regular text wrapped over a maximum of 5 lines */
.metro .tile .text5 {
font-size: 15px;
line-height: 18px;
font-weight: normal;
text-align: left;
max-height: 92px;
overflow: hidden;
}
/* Image Only Tiles
-------------------------------------------------- */
.metro .tile.square.image img {
max-width: 150px;
max-height: 150px;
}
/* Wide Text Only Tiles
-------------------------------------------------- */
.metro .tile .column {
display: block;
float: left;
width: 130px;
}
.metro .tile .column2-label {
display: block;
float: left;
width: 90px;
}
.metro .tile .column2-text {
display: block;
float: left;
width: 160px;
}
.metro .tile .column3-label {
display: block;
float: left;
width: 50px;
}
.metro .tile .column3-text {
display: block;
float: left;
width: 200px;
}
/* Wide Image Only Tiles
-------------------------------------------------- */
.metro .tile.wide.image .mini-tiles {
display: inline-block;
float: left;
width: 152px;
height: 150px;
}
.metro .tile.wide.image .mini-tiles img {
display: inline-block;
float: left;
max-width: 75px;
max-height: 75px;
border-left: 1px solid #2A2A2A;
}
/* Wide Image & Text Tiles
-------------------------------------------------- */
.metro .tile.wide.imagetext .column-text,
.metro .tile.wide.text .column-text {
display: block;
float: left;
width: 180px;
padding-left: 10px;
}
.metro .tile.wide.text .column-text-big {
display: block;
float: left;
width: 80px;
}
.metro .tile.wide.imagetext .image-wrapper {
display: block;
float: left;
width: 80px;
height: 80px;
}
.metro .tile.wide.imagetext .image-wrapper img {
max-width: 80px;
max-height: 80px;
}
/* ListView
-------------------------------------------------- */
.listview-container.grid-layout {
border: solid 2px rgba(0, 0, 0, 0.13);
height: 240px;
overflow: auto;
padding: 2px;
background-color: #FFF;
}
.mediumListIconTextItem {
display: inline-block;
position: relative;
vertical-align: top;;
width: 282px;
height: 70px;
padding: 5px;
margin-bottom: 7px;
margin-right: 24px;
border: solid 3px transparent;
overflow: hidden;
background-color: #FFF;
cursor: pointer;
}
.mediumListIconTextItem:hover {
border: solid 3px #b3b3b3;
background-color: #b3b3b3;
}
.mediumListIconTextItem img.mediumListIconTextItem-Image {
display: inline-block;
vertical-align: top;;
width: 60px;
height: 60px;
margin: 5px;
}
.mediumListIconTextItem .mediumListIconTextItem-Image[class^="icon-"],
.mediumListIconTextItem .mediumListIconTextItem-Image[class*=" icon-"] {
display: inline-block;
width: 60px;
height: 60px;
font-size: 60px;
line-height: 60px;
margin: 5px;
}
.mediumListIconTextItem .mediumListIconTextItem-Detail {
display: inline-block;
vertical-align: top;;
margin: 5px;
}
.mediumListIconTextItem.selected {
background-color: #4617b4;
}
.mediumListIconTextItem.selected:after {
position: absolute;
top: 5px;
right: 5px;
width: 16px;
height: 16px;
font-family: 'IcoMoon';
content: "\e03c";
color: #FFF;
font-size: 16px;
}
.mediumListIconTextItem.selected:hover {
border: solid 3px #b3b3b3;
background-color: #4617b4;
}
.mediumListIconTextItem.selected .mediumListIconTextItem-Detail,
.mediumListIconTextItem.selected .mediumListIconTextItem-Detail h4,
.mediumListIconTextItem.selected .mediumListIconTextItem-Detail h6 {
color: #FFF;
}
/* Special undocumented tiles for ads
-------------------------------------------------- */
#ad-container {
background-color: #0072BC;
height: 90px;
margin-top: 10px;
text-align: center;
width: 100%;
}
/*Button (125x125)*/
.metro .tile.ad.ad125 {
width: 125px;
height: 125px;
padding: 12px 13px 13px 12px;
}
/*Small Rectangle (180x150)*/
.metro .tile.wide.ad.ad125 {
width: 180px;
height: 150px;
padding: 0 65px;
}
All the rules from the downloaded file that affect the .tile class start like this .metro .tile which means that the .tile element must be a descendant of a .metro element (an element with class metro)
You html does not show your link being inside a .metro element so the styles do not apply ..
it seems that stylesheets are loaded, but from basic look at the Metro Tiles CSS I decided that you forgot to put metro class to any parent of your tile, for example add class to your content
<div id="content" class="metro">