same class looks different on different pages - css

I'm trying to figure out what's wrong with my responsive website.
On a desktop it looks fine, but when you view the mobile version, the class ".game-box" looks fine on the main page, but on other pages the text inside that class looks tiny.
I coded the styles in SCSS. Here is the full code:
/* MIXIINS */
#mixin hFonts($font-size, $device-font-size) {
font-size: $font-size;
font-family: $font-serif;
color: $font-color-med;
#media screen and (max-device-width: $media-mobile-med) {
font-size: $device-font-size;
}
}
/* FONTS */
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
#import url("https://fonts.googleapis.com/css?family=Alegreya:700");
$font-serif: 'Alegreya', serif;
$font-sans: 'Source Sans Pro', sans-serif;
$font-color-dark: #222;
$font-color-med: #444;
$font-color-light: white;
$font-size-small: 12px;
$font-size-med: 16px;
$font-size-large: 24px;
$font-size-xl: 32px;
$font-size-xxl: 48px;
$font-size-nav: 19px;
/* COLORS & BACKGROUNDS */
#import 'gradient';
$websiteBackground: #343434 url("/img/footer_lodyas.png");
$navBackground: #505050 url("/img/tweed.png");
$contentBackgroundColor: ghostwhite;
$sidebarColor: ghostwhite - #111;
/* VARIABLES */
$headerHeight: 150px;
$navHeight: $headerHeight - 90px;
$imgPosition: $headerHeight - 184px;
$titlePosition: ($headerHeight - $navHeight) / 2 - 18px;
$foot-height: 90px;
$sidebarWidth: 300px;
$gutter: 10px;
$media-narrow: 845px;
$media-mobile-small: 640px;
$media-mobile-med: 720px;
$media-mobile-large: 1080px;
/* RESET */
%reset { margin: 0; padding: 0; }
html, body {#extend %reset; background: $websiteBackground; height: 100%;}
div {#extend %reset;}
h1 { #include hFonts($font-size-large, $font-size-xxl); }
h2 { #include hFonts($font-size-med, $font-size-xl); }
p, li, a, q, blockquote { font-family: $font-sans; color: $font-color-med;}
/* CLASSES */
.container { padding: 0 $gutter; }
.light-text { color: $font-color-light; }
.link-inactive { text-decoration: line-through; }
.game-box {
font-family: $font-sans;
float: left;
width: calc(33% - 2 * #{$gutter});
min-height: 300px;
margin: $gutter; padding: 0;
border: 1px solid blue;
border-radius: $gutter / 2;
overflow: hidden;
box-shadow: 1px 1px $gutter / 2 0 black;
background-color: white;
.box-title {
padding: $gutter;
color: $font-color-light;
#extend .blueGradient;
}
.box-description {
padding: 0 $gutter;
}
#media screen and (max-device-width: $media-mobile-med) {
margin: 2 * $gutter;
width: calc(100% - 4 * #{$gutter});
font-size: $font-size-large;
}
}
.top-image {
background: {
position: center center;
size: cover;
repeat: no-repeat;
}
width: 100%; height: 360px;
float: right;
&--main {
#extend .top-image;
background-image: URL("/img/epicFrontPage.png");
height: 500px;
}
&--syshack {
#extend .top-image;
background-image: URL('/img/SysHackGamePhoto.png');
}
}
.quarter-image {
float: right;
width: calc(25%);
}
/* ELEMENTS & ID'S */
#wrapper {
max-width: 1080px; width:100%; min-width:720px;
height: 100%;
margin: 0 auto;
}
header {
float: left;
width: 100%; height: $headerHeight;
#extend .blueGradient;
nav {
background: $navBackground;
height: $navHeight;
}
h1 {
display: inline-block;
color: $font-color-light;
margin-top: $titlePosition;
margin-left: 290px;
font-size: $font-size-xl;
#media screen and (max-device-width: $media-mobile-med) {
margin-top: 15px;
font-size: $font-size-xxl;
}
}
#teg-brain {
position: absolute;
top: $imgPosition;
}
}
#nav-menu {
float: right;
margin: 0; padding: 0;
li {
display: inline-block;
#extend %reset;
color: $font-color-light;
text-decoration: none;
font-size: $font-size-nav;
a {
display: inline-block;
color: inherit;
text-decoration: inherit;
font-size: inherit;
padding: 18px $gutter;
#media screen and (max-device-width: $media-mobile-med) {
padding: 10px $gutter;
}
}
& > ul.submenu {
position: absolute;
top: $navHeight;
//margin-left: 22px;
padding-left: 0;
display: none;
z-index: 10;
li {
background-color: rgb(64,64,64);
display: block;
a { display: block; padding: 18px $gutter; }
&:hover {
background-color: rgb(128,128,128);
}
}
#media screen and (max-device-width: $media-mobile-med) {
margin-left: 51px;
}
}
&:hover {
background-color: rgba(255,255,255,.2);
& ul.submenu {
display: block;
}
}
#media screen and (max-device-width: $media-mobile-med) {
font-size: $font-size-xl;
// padding: 9px $gutter;
}
}
}
#main {
float: left;
width: 100%;
background-color: $contentBackgroundColor;
min-height: calc(100% - #{$headerHeight} );
//overflow-y: auto;
//overflow-x: hidden;
}
#latest-news {
font-size: 16px;
float: left;
width: calc(100% - 2 * #{$gutter});
#media screen and (max-device-width: $media-mobile-med) {
font-size: $font-size-large;
}
}
#BMG-meetup {
margin: $gutter;
#media screen and (max-device-width: $media-mobile-med) {
display: none;
}
}
blockquote {
background-color: $contentBackgroundColor - #111;
border-left: $gutter solid #{$contentBackgroundColor - #333};
margin: 1.5em $gutter;
padding: 0.5em $gutter;
quotes: "\201C""\201D";
&:before {
color: $font-color-med;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
p { display: inline; }
}
/*
#sidebar {
float: left;
background-color: $sidebarColor;
width: $sidebarWidth - 2 * $gutter;
min-height: calc(100% - #{$headerHeight} );
}
*/
#mc_embed_signup {
float: right;
width: $sidebarWidth;
font:14px Helvetica,Arial,sans-serif;
#media screen and (max-width: $media-narrow) {
display: none;
}
}
#mc_embed_signup input.button { display: inline-block; }
#mc_embed_signup input.email { display: inline-block; }

I changed the font size to 2em in this media query and it seems to look better.
#media screen and (max-device-width: 720px)
.game-box, .game-box--right {
margin: 20px;
width: calc(100% - 4 * 10px);
font-size: 2em;
}

Related

Admob Native Ad CSS Google Info Button Background Color

How we can change background color of google ads info button from css. We have customized the ad but we cannot change background color of google ad info button. I have seen some native ads that have changed the color, even thoug I delete add every part of the code it doesn't go anywhere so how can I change background color of it? I have added the css code and picture
/* Note: 1px = 1dp in this css */
/* == Colors == */
body {
background-color: #ffffff;
}
.title-link {
color: #000000;
}
.button {
background-color: #9D0000;
}
.button-text,
.button-link {
color: #FFFFFF;
}
.price,
.reviews {
color: rgba(0,0,0,0.5);
}
.reviews svg {
fill: rgba(0,0,0,0.7);
}
.url-link {
color: rgba(0,0,0,0.3);
}
.body {
color: rgba(0,0,0,0.7);
}
/* == Fonts == */
body {
font-family: "Lobster";
font-weight: normal;
font-size: 10px;
}
#media (min-height: 300px) {
body {
font-size: 11px;
}
}
#media (min-width: 360px) and (min-height: 300px) {
body {
font-size: 12px;
}
}
#media (min-width: 700px) and (min-height: 300px) {
body {
font-size: 16px;
}
}
.title {
font-size: 1.1em;
line-height: 1.2em;
}
.button {
font-size: 1.1em;
}
.body,
.price,
.reviews,
.url {
font-size: 1em;
line-height: 1.1em;
}
#media (min-width: 360px) and (min-height: 300px) {
.title {
font-size: 1.2em;
line-height: 1.25em;
}
.button {
font-size: 1.2em;
}
}
#media (min-width: 700px) and (min-height: 300px) {
.title {
font-size: 1.3em;
line-height: 1.35em;
}
.button {
font-size: 1.3em;
}
}
/* == Layout == */
.title {
margin-bottom: 5px;
padding: 5px 0 0 8px;
}
.body {
margin: 2px 8px;
}
.button {
position: absolute;
bottom: 8px;
left: 8px;
}
/* == App install and video ad layouts == */
.app-icon {
float: left;
margin: 0 8px 4px 8px;
padding: 0;
}
.image-gallery,
.video {
margin: 0 auto 8px auto;
}
/* == Content ad layout == */
.image {
margin: 0 auto 4px auto;
}
/* == Body == */
.body {
/* add more customizations here */
}
/* == App icon == */
.app-icon img {
height: 50px;
width: 50px;
border-radius: 20%;
}
#media (min-width: 360px) and (min-height: 300px) {
.app-icon img {
height: 70px;
width: 70px;
}
}
/* == Title == */
.title {
display: block;
text-align: left;
}
/* == Button == */
.button {
border: none;
border-radius: 20px;
box-shadow: 0 0 2px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.24);
}
.button-link {
display: block;
position: relative;
padding: 0 1em;
}
.button svg {
display: none;
}
.button {
width: 90%;
width: calc(100% - 16px);
height: 2.8em;
}
.button-text {
display: block;
line-height: 2.8em;
text-align: center;
}
#media (min-width: 700px) and (min-height: 300px) {
.button {
height: 2em;
}
.button-text {
line-height: 2em;
}
}
/**
* == Large image and video ==
* App install:
* Use .image-gallery selector
* Content:
* Use .image selector
* Video:
* Use .video selector
*/
.image-link,
.image img {
width: 100%;
height: 100%;
}
.image-gallery a,
.image a {
display: block;
line-height: 0;
}
.image-gallery,
.video,
.image {
width: 90%;
width: calc(100% - 16px);
}
.image-gallery,
.video {
height: 50%;
height: calc(100% - 11em);
}
.image {
height: 50%;
height: calc(100% - 10em);
}
#media (min-width: 700px) and (min-height: 300px) {
.image-gallery,
.video {
height: calc(100% - 8.5em);
}
.image {
height: calc(100% - 8em);
}
}
/* == Attribution == */
.attribution {
background-color: #ffffff;
border-radius: 2px;
color: #aeaeae;
display: table;
font-size: 10px;
line-height: 13px;
margin: 4px 8px;
padding: 0 3px;
position: absolute;
top: 0;
left: 0;
}
.rtl .attribution {
background-color: #ffffff;
left: auto;
right: 0;
}
/* == Other == */
.ads a {
text-decoration: none;
}
.ads, .ad {
/**
* DO NOT TOUCH OR REMOVE
* Will break image rendering
*/
height: 100%;
width: 100%;
padding: 0;
word-wrap: break-word;
}
.ad {
/* Padding for attribution */
padding-top: 23px;
height: calc(100% - 23px);
}
#DanielStorm found how to change it but now Admob does not allow it
I'm not really familiar with CSS but you can inspect the element and see that the id is abgbg and that its color is set to #cdcccc by default. I've changed it to orange(#FFA500) in the screenshot. I'm not sure how to express this in CSS, or if it is even possible, but this should point you in the right direction.
Edit:
After playing around with it for a miniute you can change the background color like so:
.abgbg {
fill: #FFFFFF !important;
}

Responsive CSS is not working but works half way

Hi guys I am having a problem with my responsive CSS. It is working fine with max-width:321px but not when I try to do max-width:500px. I am trying to understand why and what I am doing wrong. Please help...
/*/Mobile MAINCSS/*/
img {
max-width: 100%;
height: auto;
}
#media screen and (max-width: 320px) {
/*/Nav and Header/*/
iframe {
width: 100%;
height: 700px;
}
body {
color: red;
}
#nav {
display: none;
width: 100%;
}
#logomain {
width: 100%;
height: auto;
display: none;
}
.logo {
display: none;
}
.logoright {
display: none;
}
.mobile-number {
display: block;
text-align: center;
background:#333399;
}
.mobile-number a:link {
color: red;
text-decoration: none;
}
.mobile-number a:visited {
color: red;
text-decoration: none;
}
#head_wrap {
width: 100%;
height: auto;
}
#head {
width: 100%;
height: auto;
}
/*/Mobile Navigation/*/
#mobilenav {
display: block;
margin: 0 auto;
width: 100%;
height: auto;
background: #333399;
color: white;
font-size: 18px;
text-align: center;
}
.mobile ul {
display: inline;
margin: 0 auto;
width: 100%;
height: auto;
}
.mobile ul li {
display: inline-block;
padding: 10px;
}
.mobile a:link {
color: white;
text-decoration: none;
font-weight: bold;
text-shadow: 1px 1px 1px black;
border-radius: 5px 5px 5px 5px;
padding: 5px;
}
.mobile a:visited {
color: white;
}
}
/*/Content/*/
#content {
width: 100%;
height: auto;
}
#content_wrapper {
width: 100%;
height: auto;
}
#bizmain {
width: 100%;
height: auto;
}
.bizexpress {
float: none;
}
.bizpro {
float: none;
}
.pro {
float: none;
}
/*/Footer/*/
#footer {
width: 100%;
height: auto;
}
/*/Additional Updates 02/28/2015/*/
.main-right {
width: 100%;
height: auto;
text-align: center;
}
.main-left {
width: 100%;
height: auto;
float: none;
text-align: center;
}
.form {
width: 100%;
height: auto;
}
.form-control {
width: 50%;
}
.input-group-addon {
font-size: inherit;
}
/*/Website Design/*/
.evoke {
width: 100%;
height: auto;
}
.evokeemotions {
width: 100%;
height: auto;
}
.resource1 {
float: none;
text-align: center;
}
.resource2 {
float: none;
text-align: center;
}
.resource3 {
float: none;
text-align: center;
}
}
#media screen and (max-width: 500px)
{
}
#media screen and (max-width: 320px)
{
}
You are right no problem please. place 500px Css above 300px

#media queries not working in IE11 but working on Chrome/FF

So I've been working on getting these wallboards for my company responsive. Thing is, with the css I've inserted it works brilliant on Chrome and FF. But nothing happens at all on IE, and they are going from FF to IE atm, so this has to work.
The code looks like this:
html, body {
background: none repeat scroll 0 0 #8FAE9F;
font-family: Trebuchet MS;
font-size: 27px;
font-weight: bold;
height: 99%;
margin: 0 auto;
padding: 0;
text-align: center;
}
.column.OBJ0, .column.OBJ1 { /* margin bruges til at mindske eller øge mellemrummet mellem overskrifterne */
max-width: 12.0em;
margin-right: -1.2em;
margin-left: -1.2em;
}
.blueBorder, .thresholds {
margin: 0;
padding: 5px;
width: 98%;
}
.thresholds {
display: inline;
float: left;
}
.Threshold_NONE {
color: black;
}
.Threshold_INFO {
color: green;
}
.Threshold_WARNING {
color: yellow;
}
.Threshold_ALERT {
color: red;
}
.Threshold_INFO, .Threshold_WARNING, .Threshold_ALERT, .Threshold_NONE {
font-size: 5em;
}
.displayText {
}
.column {
display: inline-block;
float: left;
margin: 0;
padding: 0;
text-align: center;
vertical-align: text-top;
line-height: normal;
white-space: nowrap;
}
.header { /* max-height ændres hvis brugere skal tættere på overskrift */
color: black;
font-size: 3em;
margin-left: -4px;
margin-right: -4px;
margin-top: -4px;
max-height: 1em;
}
.columnwrapper {
min-width: 378px;
text-align: center;
white-space: nowrap;
width: 25%;
}
.displayAgent {
}
.displayAgent img {
float: left;
margin-bottom: auto;
margin-right: 0.5em;
margin-top: auto;
}
.displayAgent1 {
}
.displayAgent2 {
background-color: #E6E6E6;
}
.displayAgentName {
display: table;
text-align: right;
}
.displayAgentStatusImg {
padding-left: 0.5em;
}
.displayAgentStatus {
display: inline;
width: 71px;
}
.displayAgentStateTime {
display: inline;
width: 61px;
}
.displayAgentStatus_LoggedIn {
}
.displayAgentStatus_NotReady {
}
.displayAgentStatus_Ready {
}
.displayAgentStatus_Reserved {
}
.displayAgentStatus_LoggedOut {
}
.displayAgentStatus_Talking {
}
.displayAgentStatus_Working {
}
div .displayAgentStateTime {
display: none;
}
div .displayAgentStatus {
display: none;
}
.PoweredBy {
bottom: 10px;
display: none;
font-size: 0.8em;
padding: 5px;
position: fixed;
right: 10px;
}
.lastupdate {
background: none repeat scroll 0 0 white;
display: table;
font-size: 1.2em;
margin-top: 0;
width: 7em;
}
.viewerDisplayItemErrorPanel {
color: red;
font-weight: bold;
}
.headline.remedyItem {
font-weight: bold;
}
.remedyItem span {
display: inline-block;
font-size: 1em;
max-height: 1.2em;
overflow: hidden;
}
div.headline.remedyItem {
text-align: center;
border-bottom: 4px solid;
}
span.remedyId {
width: 6em;
}
span.remedyCustomer {
width: 6em;
}
span.remedyPriority {
width: 2em;
}
span.remedyCaseTitle {
text-align: left;
width: 17em;
}
span.remedySLA {
width: 5em;
}
span.remedySubSlaType {
display: none;
}
span.remedyHidden {
}
span.remedyShowSLA {
width: 4em;
}
span.remedyGroup {
width: 6em;
}
div.column.Remedy {
clear: left;
margin-top: 0.5em;
}
div.column.Remedy h2 {
display: none;
}
div.uccx_exchange_user span.exchangeStatus {
display: none;
}
div.uccx_exchange_user span.uccxStatus {
display: none;
}
div.uccx_exchange_user span.user { /* Desto højere width, desto mindre afstand mellem brugere horisontalt*/
display: inline-block;
font-size: 1em;
width: 3.9em;
}
div.uccx_exchange_user { /* Desto højere height, desto mere afstand mellem brugere vertikalt */
max-height: 0.92em;
}
div.uccx_exchange_user img {
margin-top: 0.2em;
padding: 0;
}
.viewerDisplayItemShowPanel.øst { /* Dette påvirker øst brugeres position. */
clear: right;
float: right;
text-align: left;
}
.viewerDisplayItemShowPanel.vest { /* Dette påvirker vest brugeres position. */
clear: left;
float: left;
text-align: right;
margin-left: 1.5em;
}
.viewerDisplayItemShowPanel.øst div img { /* Dette påvirker øst brugeres status position. */
float: center;
margin-left: -5.6em;
margin-right: 0.0em;
}
.viewerDisplayItemShowPanel.vest div img { /* Dette påvirker vest brugeres status position. */
float: center;
margin-left: -0.8em;
margin-right: 0.1em;
}
.column h2.header { /* font-size ændres for at ændre gruppenavnets skriftstørrelse. */
font-size: 1.7em;
margin: 0;
}
.headline.remedyItem .remedyPriority {
background: none repeat scroll 0 0 red;
display: none;
}
.headline.remedyItem .remedyCustomer {
margin-right: 3em;
}
span.NOT_SET {
color: white;
}
div.FIX_AT_NONE .remedyId {
color: yellow;
}
span.NORMAL_ALERT, span.FIX_AT_ALERT {
color: red;
}
span.NORMAL_WARNING, span.FIX_AT_WARNING {
color: yellow;
}
span.NONE_WARNING, span.NONE_NONE {
color: blue;
}
span.NONE_ALERT {
color: purple;
}
.BURNED {
color: red;
}
.P1.remedyPriority {
background-color: red;
}
.P2.remedyPriority {
background-color: yellow;
}
span.RESPECTED {
color: green;
}
span.remedyUserLoginID {
display: none;
}
span.penaltyOn {
display: none;
}
#media all and (max-width: 1080px) {
html, body {
font-size: 20px;
}}
#media all and (max-width:800px) {
/* Dette smides ind til skalering. Alt der foregår i denne boks sker når skærmen kommer under 640px. */
html, body {
font-size: 15px;
}}
So what am I doing wrong?
The program only allows me to enter css, not make extern css files or anything. Just one css file like this.
Thanks for your help in advice
Mikkel - The intern!
Media Query work in IE-11 by this way:
#media all and (min-width: 1024px) {
...
}
More details source link

Getting CSS error when testing Rails app with Capybara

I'm getting an error I can't correct when testing with Rspec and Capybara in my rails app.
Failure/Error: visit('/')
ActionView::Template::Error:
Invalid CSS after " text-indent:": expected expression (e.g. 1px, bold), was "}"
It says the error is occurring in app/assets/stylesheets/application.css. I have nothing in there as of yet and cannot locate the issue. I think the error(based on what I've read) may have something to do with my css or scss file extensions. I've tinkered with them a bit with no change so here I am asking for help.
My registration_spec.rb
require 'spec_helper'
describe "Signing Up" do
it "allows a user to sign up for the site and creates the object in the database" do
expect(User.count).to eq(0)
visit('/')
expect(page).to have_content("Sign Up")
click_link "Sign Up"
fill_in "First Name", with: "John"
fill_in "Last Name", with: "Smith"
fill_in "Password", with: "password123"
fill_in "Password Confirmation", with: "password123"
click_button "Sign Up"
expect(User.count).to eq(1)
end
end
Here's my style.css
#about {
background: #efeddf;
padding: 20px;
border: 2px solid #57645d;
}
#about-content {
text-align: left;
}
#article-image {
float: left;
}
#article-links {
list-style-type: none;
}
#article-links a {
font-weight: bold;
color: #3f4944;
text-decoration: none;
}
#article-links img {
margin-right: 20px;
}
#article-show {
background: #efeddf;
padding: 20px;
border: 2px solid #57645d;
}
.bit-5 {
background: white;
padding: 20px;
text-align: center;
border: 2px solid #57645d;
color: #606e67;
float: right;
display: block;
}
.bit-75 {
background: white;
padding: 20px;
text-align: left;
border: 5px solid #57645d;
color: #606e67;
text-indent:
}
.clearfooter {
height: 330px;
clear: both;
}
#contact {
background: #efeddf;
padding: 20px;
border: 2px solid #57645d;
}
#contact-content {
text-align: left;
}
footer {
position: relative;
width: 100%;
height: 330px;
background: #3f4944;
}
html,body {
background: #efeddf;
height: 100%;
}
#title a {
color: #555;
text-decoration: none !important;
}
#main-header {
height: 180px;
background: #57645d;
position: fixed;
top: 0px;
margin: auto;
z-index: 100000;
width: 100%;
}
#main-nav ul {
text-align: center;
margin-top: 120px;
}
#main-nav ul li {
padding-left: 10px;
display: inline-block;
margin-right: 20px;
}
#main-nav ul li a {
text-decoration: none;
color: #efeddf;
font-size: x-large;
}
#new-article-path a {
font-weight: bold;
color: #3f4944;
}
#recent-article li {
list-style: none;
}
#recent-article li a {
color: #57645d;
text-decoration: none;
}
My grid(lemonade.css)
*,
*:after,
*:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
/* Set the width of the grid */
.frame {
margin: auto;
width: 1100px;
margin-top: 200px;
min-height: 100%;
margin-bottom: -330px;
position: relative;
}
/* Attribute selector */
[class*='bit-'] {
float: left;
padding: 0.3em;
}
/* Floats last ".bit-" to the right */
[class*='bit-']:last-of-type {
float: right
}
/* Clearfix */
.frame:after {
content: "";
display: table;
clear: both
}
/* Main Widths */
.bit-1 { width: 100% }
.bit-2 { width: 50% }
.bit-3 { width: 33.33% }
.bit-4 { width: 25% }
.bit-5 { width: 20% }
.bit-6 { width: 16.6666666667% }
.bit-7 { width: 14.2857142857% }
.bit-8 { width: 12.5% }
.bit-9 { width: 11.1111111111% }
.bit-10 { width: 10% }
.bit-11 { width: 9.09090909091% }
.bit-12 { width: 8.33% }
.bit-75 { width:75%}
.bit-25 { width:25%}
/* Landscape mobile & down */
#media (max-width: 30em) {
.bit-1,
.bit-2,
.bit-3,
.bit-4,
.bit-5,
.bit-6,
.bit-7,
.bit-8,
.bit-9,
.bit-10,
.bit-11,
.bit-12 {
width: 100%;
}
}
/* Portrait tablet to landscape */
#media (min-width: 30em) and (max-width: 50em) {
.bit-4,
.bit-6,
.bit-8,
.bit-10,
.bit-12 {
width: 50%
}
.bit-1,
.bit-2,
.bit-3,
.bit-5,
.bit-7,
.bit-9,
.bit-11 {
width: 100%
}
}
/* Landscape to small desktop */
#media (min-width: 50em) and (max-width: 68.750em) {
.bit-2,
.bit-7 {
width: 100%
}
.bit-4,
.bit-8,
.bit-10,
.bit-12 {
width: 50%
}
}
Im still pretty new at all this so any help/and or criticisms would be appreciated. Thanks.
Your style.css is invalid which is causing following error:
Failure/Error: visit('/') ActionView::Template::Error: Invalid CSS
after " text-indent:": expected expression (e.g. 1px, bold), was "}"
In your style.css, for class .bit-75, you forgot to set value of text-indent property
.bit-75 {
background: white;
padding: 20px;
text-align: left;
border: 5px solid #57645d;
color: #606e67;
text-indent: // <-- set a value here for eg : 10px;
}

Media Queries being read with wrong syntax

Once I accidentally left out some proper syntax for my media queries at the stated mobile viewport. It displayed correctly, which is awesome, but I'd like to be using the correct syntax, and am curious to know why / how this is occurring. Below are the styles involved.
/* Smartphones (Landscape) ----------- */
#media only screen and (min-width: 320px) and (max-width: 480px)
ul.ui-tabs-nav li.ui-state-active a {
background-color: #C6C699;
height: 17px;
text-shadow: none;
width: 77px;
}
.content .full header, .content .full .entry-summary, .content .full .entry-content, .content .full .entry-meta, .content .full .edit-link {
margin-top: 3px;
padding: 15px;
width: 100%;
}
#topbgimg { display: none; }
#topvidarea {
margin-left: 21%;
margin-right: 20%;
margin-top: -5px;
max-width: 400px;
}
#topmenucontain { display: none; }
.fmenu { display: none; }
#clogo { display: none; }
#youtube1, #youtube2 { display: none; }
#wrapper {
margin: 0 1em;
}
h1 {
font-size: 2em;
}
#logoimg { display: none; }
#notification {
height: 200px;
margin: 0;
width: 100%;
padding-top:20px;
}
.ui-tabs .ui-tabs-nav li a {
border: 3px solid white;
color: white;
}
#branding {
width: 100%;
padding: 1em 0;
margin: 0;
text-align: center;
}
#topbtn, #topbtn2, #topbtn3 {
width: 75px;
}
#topbtnbuy {
background: none repeat scroll 0 0 #C6C699;
border: 1px solid #C6C699;
color: #333333;
display: inline;
float: left;
font-family: Georgia;
font-size: 12px;
height: 42px;
margin-right: 10px;
margin-top: -1px;
width: 25%;
}
a.box:link {
min-width: 70%;
}
nav#access {
border-bottom: 1px dashed #CFCFCF;
position: relative;
text-align: center;
}
nav#access ul.menu li:nth-child(n+5) {
display: none;
}
.content {
min-height: 0;
background-image: none !important;
border-bottom: 1px dashed #CFCFCF;
}
/* Hide Background & Overlay Images */
.overlay {
display: none;
}
.has-background {
min-height: 0;
}
.content header, .content .entry-summary,
.content .entry-content, .content .edit-link,
footer.entry-meta {
width: 100%;
}
.content header, .has-background header {
margin-top: 2em;
}
.content header h2 a, .single .content header h2 {
font-size: 2em;
}
.content section.right,
.content section.left,
.content section.full,
.content section.center {
padding: 0;
}
.content section.center header,
.content section.center .entry-summary,
.content section.center .entry-content,
.content section.center .edit-link,
.content section.center footer.entry-meta,
.content section.right header,
.content section.right .entry-summary,
.content section.right .entry-content,
.content section.right .edit-link,
.content section.right footer.entry-meta {
left: 0;
}
#comments {
margin: 1em 0;
}
#comment, #commentform input,
#commentform #submit, #commentform #comment {
width: 416px;
}
.commentlist {
width: 424px;
}
#commentform #submit {
width: 430px;
}
#comments, #commentform #comment-reply {
width: 100%;
}
.cat-links, .entry-meta .sep:nth-child(n+4),
.comments-link, .edit-link {
display: none;
}
/* Footer */
#footer {
width: 100%;
padding: 1em 0;
}
#footer-widgets {
margin-bottom: 1em;
}
#footer .widget {
width: 45%;
margin: 0.5em 0;
}
.third-box {
width: 89%;
}
#buybutton { width: 95%; }
.scrolldowntext { margin-top: 40px; }
#notification {
background-color: #333333;
border-bottom: 5px solid #C6C699;
font-size: 22px;
height: 200px;
padding-top: 20px;
position: absolute;
width: 100%;
z-index: 9990;
}
#topcaption {
display: none;
}
#logoimg { display: none;}
#topmenucontain {
margin: -33px auto 0;
width: 50%; }
a.box:link {
color: #C6C699;
display: inline;
float: left;
font-family: Georgia;
font-size: 12px;
height: 50px;
margin-right: 10px;
min-width: 75px;
}
#videoscreenshot { height: 215px; width: 100%; }
.fancybox-iframe { display: hidden; }
}
Once I left out the additional { at the end of '#media only screen and (min-width: 320px) and (max-width: 480px)' all my media queries were being read?
Update: Just tried removing all styles within specified above viewport, in attempts to start from scratch properly in case some styles were whatever.
BUT, within starting, I simply am trying to hide the top menu within the viewport. And this is ignored and not rendering for some reason?
/* Smartphones (Landscape) ----------- */
#media only screen and (min-width: 320px) and (max-width: 480px) {
#topvidarea {
margin-left: 24%;
margin-right: 20%;
margin-top: -265px;
max-width: 400px;
}
#topmenucontain { display: none; }
}
You have no opening bracket in your media query but you do have a closing one:
#media only screen and (min-width: 320px) and (max-width: 480px) {
......
}
All your other media queries where probably being read because you were not properly closing your first query, and thus the query did not know where to begin and end.

Resources