How to Center Logo in Responsive Header [closed]


Tags: html,css,responsive-design,media-queries,multiple-columns

Problem :

Please watch as the page is scaled:

picture 1

picure 2

picture 3

picture 4

picture 5

picture 6

As you can see, the responsive header is working perfectly from mobile to tablet size, but then does not center from tablet to desktop. How can I get the image to center in pictures 5-6? I'm new to the 12-column grid system, so please enlighten me if you think that is what's causing the problem. Thank you!

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>
<div class="row">
  <!--first row-->
  <div class="col-12" "col-m-12">
    <div class="logo">
      <a href="index.html">
        <img src="images/logo3.png" alt="logo" height="450" width="1130">
      </a>
    </div>
  </div>
</div>
<!--ends first row-->
</header>


<div class="navigation">
<nav>
<ul>
<li><a href="index3.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" id="background2">
<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 info@knightsbasketballacademy.com to learn how to become a 
Knight today.</p>    

</div>

<div class="col-3 col-m-12">
<aside>
<h2>What?</h2>
<p>The KBA is a non-profit amateur basketball club focused on 
individual player development and team concepts. </p>
<h2>Where?</h2>
<p>We are located in St. Louis, Missouri. Practices are held at the 
 Des Peres Lodge.</p>
<h2>How?</h2>
<p>Visit our About page for more contact 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*/ 

.knights {margin-top:0px}

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

.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");}

#background2 {background-color:white;}

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%; text-align:center;}
.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%; text-align:center;}
.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;}

EDIT: The code for the logo can be found in the header (first row), under the div class "logo". I already tried "text-align:center" for the logo class. I don't know what else to try.

EDIT2 Please, what I need help understanding is how to specify the style for the desktop size vs the style for the tablet size. For example, I may need margin-left: 100px in desktop but not in tablet or mobile. That's what I'm confused about.



Solution :

Try this:

<header>
<center>
<div class="row">
  <!--first row-->
  <div class="col-12" "col-m-12">
    <div class="logo">
      <a href="index.html">
        <img src="images/logo3.png" alt="logo" height="450" width="1130">
      </a>
    </div>
  </div>
</div>
</center
<!--ends first row-->
</header>

    CSS Howto..

    In Firebug, how to tell what is overriding a style?

    How to make float navbars with JS and CSS?

    How are these check-marks being drawn?

    How to link to an image from a CSS file when using the resource plugin 1.2.14

    CSS visited links- how to recognize visited links which visited by clicking through my app?

    How do I apply padding or a margin to this heading displayed as a table-cell?

    CSS - How to add a second background image

    How to add conditional formatting to list items in CSS

    CSS - How to hide div by hovering another div [duplicate]

    How to cancel a too-broad CSS color declaration in a later stylesheet?

    How to create an image tag cloud

    how to get a css slide transition using bootstrap modal and angular ui?

    How can I position a child element behind its parent in IE7 and earlier

    CSS how to have two divs to the right of one div but not beside each other

    How to make this slider more fluid?

    How to modify and save html/css in server-side?

    How to change text direction of every line of text using javascript/jquery?

    How to create a wrapper with different angles in CSS

    How can I make images stack on top of each other as web page scales down?

    How to make a function set css width with a JavaScript variable?

    How to get the scroll bar with CSS overflow on iOS

    How to avoid with css when background of the second line covers the letters of the first line?

    How do I get the tooltip background to extend or grow as I input more text?

    How to show hidden button with css media query?

    How to achieve a lightbox effect with css only? Example available

    How to display a number (generated dynamically) into a square using CSS

    How to slide a DIV on link click

    How to make an Image overlay the site on click?

    How do I use pseudo-classes to select all children except first and last?

    How to make the Draggable element to get visible on top of all the element in the screen while dragging?