html css responsive-design media-queries

Responsive Website - Defining Mobile in CSS

Basically, the white background style applies to the desktop and tablet sizes but not the mobile. As the page gets smaller, we eventually lose the white background behind "Welcome" and the paragraph beneath it. How do I adjust my CSS so that the background will apply to all sizes?

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Knights Basketball Academy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles3.css" type="text/css" rel="stylesheet">
<script type="text/javascript">

var slideimages = new Array(); // create new array to preload images
slideimages[0] = new Image(); // create new instance of image object
slideimages[0].src = "images/slider1.png"; // set image src property 
to image path, preloading image in the process

slideimages[1] = new Image();
slideimages[1].src = "images/slider2.png";
slideimages[2] = new Image();
slideimages[2].src = "images/slider3.png";
slideimages[3] = new Image();
slideimages[3].src = "images/slider4.png";

</script>
</head>

<body>

<header id="header-wrap">
<div id="fixed">
<div class="row"><!--first row-->
    <div id="images">


            <a href="index.html">
            <img id="logo" src="images/logo2.png" alt="logo"
 height="250" width="250">
            </a>



            <img id="text" src="images/header.png" alt="header"
 height="250" width="880">



    <div id="socialIcons">

        <div  class="social">
        <a href="#"><img src="images/twitter.png"></a>
        </div>

        <div class="social">
        <a href="#"><img src="images/facebook.png"></a>
        </div>

        <div class="social">
        <a href="#"><img src="images/youtube.png"></a>
        </div>

        <div class="social">
        <a href="#"><img src="images/instagram.png"></a>
        </div>
    </div>
    </div>
 </div><!--ends first row-->
</div>
</header>


<div class="navigation">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="roster.html">Roster</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Calendar</a></li>
</ul>
</nav>
</div>

<div id="background"><!--background image-->
<div class="row"><!--second row-->

<div style="text-align:center"><!--image slider-->

<img src="images/slider1.png" id="slide" width="713" height="250" />

<script type="text/javascript">

//variable that increments through the images
var step=0;

function slideit(){
 //if browser does not support the image object, exit.
 if (!document.images)
 return
 document.getElementById('slide').src = slideimages[step].src;
 if (step<3)
 step++;
 else
 step=0;
 //call function "slideit()" every 5 seconds
 setTimeout("slideit()",5000);
}

slideit();
</script>
</div>
</div>

<div class="row"><!--third row-->

<div class="col-3 col-m-3">
<img src="images/image5.jpg" alt="Team Photo">
</div>

<div class="col-6 col-m-9">
<h1>Welcome</h1>
<p>Knights Basketball Academy is a non-profit 
amateur basketball club focused on individual player development 
and team concepts.  With our elite coaching staff,  we are 
confident that all players can achieve their own maximum potential 
while maintaining excellent character and integrity. 
<br>
<br>
Contact us at [email protected] to learn how to 
become a Knight today.</p>    

</div>

<div class="col-3 col-m-12">
<aside>
<h2>What?</h2>
<p>This is information about the website</p>
<h2>Where?</h2>
<p>This website was created in St. Louis, MO.</p>
<h2>How?</h2>
<p>Visit our contact page for more information.</p>
</aside>
</div>

</div><!--ends third row-->

<footer>
<p>&copy;2016 KNIGHTS BASKETBALL ACADEMY</p>
</footer>
</div><!--ends background-->
</body>
</html>

CSS:

*{box-sizing:border-box;}

.row:after{content:"";
       clear:both;
       display:block;}

[class*="col-"]{float:left;
            padding:10px;}

/*global styles*/   
#header-wrap {position:relative;
              top:0;
              width:100%;
              min-height:260px;
              height:100%;
              z-index:9999;
              background:#fff;}

#fixed {position:fixed;
        width:100%;
        top:0;
        background-color:#fff;}

.knights {margin-top:0px}

.logo img {max-width:100%;
           height:auto;}

img#logo {width:250px;
          height: 250px;
          float:left;
          margin-left:30px;}

img#text {margin-top:50px;
          float:left;
          margin-left:125px;
          width:650px;}

#images {width:1400px;}

#socialIcons {padding-top:10px;
              margin-left:1264px;}

.fixed{position:fixed;
       width:100%;
       top:0;
       background-color;}  

.social {float:left;
        margin-left:2px;
        margin-right:2px;}

.banner {display: inline-block;
         margin-left:auto;
         margin-right:auto;}

.navigation {text-align:center;
             background-color:#000000;
             padding:0px;}

#banner {text-align:center;
         margin-bottom: 0px;}

#background {background-image: url("images/background.jpg");}

a{text-decoration:none;
  color:white;}

a:visited {color:white;}

nav{margin:auto;
    height:auto;}

nav ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     font-family:Arial;}

nav li {
     padding: 10px;
     margin-bottom: 7px;
     background-color :#000000;
     color: #ffffff;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px
rgba(0,0,0,0.24);
     display:block;
     margin-left:30px;
     margin-right:30px;}


nav li:hover {
     background-color: #8E8E8E;}

aside{background-color:#C5202A;
      padding:15px;
      color:#fff;
      text-align:center;
      font-size:1.1em;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12),
        0 1px 2px rgba(0,0,0,0.24);}

footer{background-color:#000000;
      color:#fff;
      text-align:center;
      font-size:0.9em;
      padding:15px;}

img{max-width:100%;
    height:auto;
}

/*mobile phones first*/
[class*="col-"]{
width:100%;
}

/*tablet*/
@media only screen and (min-width:600px)
{

/*12 column grid*/

.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%; background-color:white;margin-top:10px;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}

nav {height:auto;}

nav li {display:inline-block;}

}   

@media only screen and (min-width:768px)
{   

/*12 column grid*/

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%; background-color:white;margin-top:10px;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}  

nav {height:auto;}

nav li {display:inline-block;
        text-align:center;}  

}


div.clear { clear:both;}

I didn't create this 12-column grid system in the CSS, it's just the guideline that we used in our class, so I have to say I don't really understand it. First of all, what does this do?

[clas*="col-"]{
width:100%;
}

And it looks like the first 12 columns should apply to the tablet size, while the second 12 columns should apply to the desktop size. So does this mean that I need to create a new set of 12 column classes for the "/mobile phones first/" section? Thank you!

Solution

This is the DIV your "Welcome..." text is in:

<div class="col-6 col-m-9">

Your CSS contains a white background definition only in media queries: First for .col-m-9 for all viewport sizes with min-width: 600px, then for .col-m-9 for all sizes with min-width: 768px. But there is no CSS rule that would apply to that DIV on screens/windows below 600px width...

So add another class to the above DIV, for example

<div class="col-6 col-m-9 col-sm-12">

and add a CSS rule for .col-sm-12 that defines a white background, either in a media query for widths below 600px or in the general section above the other rules.