same class looks different on different pages - css

Question

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; }

Answer 1

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;
}