Paul Paul - 2 months ago 12
CSS Question

same class looks different on different pages

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

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