Question about responsive formatting

[Ctrl-z My PC]

Hello,

On my site: http://Ctrlzmypc.com at the top is the logo, and a slogan next to it. Pulled all the way right is the contact information. When I go smaller to 768px, the contact information shifts down and centers under the logo / slogan. Below 600px screen, the slogan shifts down and everything centers.

My Problem: Whenever I go from <600px back to regular, the slogan gets crunched next to the logo....Is this a problem I should even worry about? I mean if someone is viewing it under 600, chances are they are on a mobile device and wont be switching to full desktop view without refreshing...But it still irks me.

I've included all pertinent html / css for this question if anyone cares to take a stab at it...Sorry for the long post too.

Thanks in advance for any help!

The code for the header:

<header class="col12">
 		<div id="logo">
			<h1><a href="/" title="Ctrl-z My PC">Ctrl-z <span>My PC</span></a></h1>
			<span id="slogan">
				<em><strong>Fredericksburg's <span style="color: #f58908">emergency</span> computer repair.</strong></em>
			</span>
		</div> 

			
		<div id="contact_top">
			<p><span id="call_us">Call us:</span> <a href="tel:+1-540-538-8587" title="Call Us"><span>(540) 538-8587</span></a></p>
			<p><a href="/contact-us" title="Contact Us">Support@CtrlzMyPC.com</a></p>
			<address>
				112 Ashby Street<BR/> Fredericksburg, Va 22401
			</address>
		</div>
			
</header>

For the CSS, I have this for all desktop sized screens for the header...:

/* HEADER INFORMATION 
============================================================================================== */
header {background: #fff; width: 100%; overflow: hidden; clear: both; margin: 0px;}

/* LOGO AND SLOGAN */
#logo {padding: 10px; float: left}
#logo h1, #logo h1 a { color: #373737; font-size: 2em; line-height: 1em; margin: 10px 0 0 0 ; float: left;}
#logo h1 span  { font-size: .5em; color: #0798d7; font-style: italic;}
#logo #slogan { border-left: 1px solid #ececec; padding:10px 0 10px 21px; height: 32px; color:#424c58; font-size: 1em; position: relative; top: 50px; margin-left: 21px; vertical-align: middle; }


/* CONTACT BOX AT TOP */
#contact_top {text-align: right; padding: 20px 20px 0 0; float: right;}
#contact_top p, #contact_top address {margin-bottom: .5em;}
#contact_top #call_us {color: #aeaeae; font-size: 1em;}
#contact_top p a, #contact_top address {font-size: .8125em; font-weight: bold}
#contact_top p a span { color: #6c6c6c; font-size: 1.25em !important}

And for the grid itself on all screens:

.container {
    max-width:1100px;
	margin:0 auto;
	width: 100%;
	padding: 0px
}

.content{
	max-width:1080px;
	padding: 0px;
	margin: 0 auto;	
	width: 98%;
}


.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
	float:left;
	margin-right:1.845%;	
}

/*Default + 12 COLUNAS*/
 .col1{width:6.642%;}
 .col2{width:15.129%;}  
 .col3{width:23.616%;}  
 .col4{width:32.103%;}  
 .col5{width:40.590%;}  
 .col6{width:49.077%;}  
 .col7{width:57.546%;}  
 .col8{width:66.051%;}  
 .col9{width:74.538%;}  
 .col10{width:83.025%;} 
 .col11{width:91.512%;} 
 .col12{width:100%; margin-right:0px;}

And finally for different screen sizes:

/* All styles below are for smaller browesr sizes.  Starts with a 768px, then a 600px */
/*===================================================== MOBILE BROWSERS =============================================================*/

/* 768px */		
@media only screen and (max-width : 768px) {

	#contact_top, #logo {float: none; }
	#contact_top {text-align: center; padding: 0; clear: both;}

}


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

	/* RESET BASE VALUES FOR STYLES */
	.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col3_wide, .col6_wide, .colhalf_wide {
	float: none;
	margin:0;
	width:100%;
	clear: both}

	#contact_top, 
		#logo , 
		#logo h1, 
		#logo h1 a ,
		#logo #slogan {float: none; margin: 0px; padding: 0px; height: auto; width: 100%; border: 0px;}
	
	#logo { width: 100%; padding-top: 10px; text-align: center;}
	#logo #slogan { padding-bottom: 10px; color:#424c58; font-size: .85em; clear: both; top: auto; display: block; width: 100%; text-align: center; height: auto;}

	#contact_top  {text-align: center; padding: 0; clear: both;}
}

 

[CLC]

Maybe you should set your content and header to a set px width

You just posted on my thread I believe about minimum width and max width. Maybe you should use a set width in px or use what you have with a minimum with also?

min-width: 1000px;
max-width: auto;

 

[Ctrl-z My PC]

I dont think it has to do with min-width because it flows smoothly from max to 768 to 600...And then back from 600 to 768...but once it hits max again, it messes up. It's in chrome, but not FF... Hopefully its jsut a chrome thing then. Haven't tried it in IE.

 

[CLC]

Hey try a percentage instead?

/* left side */

.left {float:left;width:55%;margin:20px 20px 20px 20px}

I try IE, Firefox, and Chrome everytime i make a change. Also I use Inetrenderer addon for Firefox for the older versions of IE.

 

[lscott3]

Which grid system are you using? I know with a few grid systems that header at the top which is 12 columns would be broken up into other columns such as this here:

<!-- this is an example using the bootstrap grid -->
<div class='span12'>
  <div class='row'>
    <div class='span4'>
      <!-- this is where the logo markup would go -->
    </div>
    <div class='span6'>
      <!-- this is where the slogan markup would go -->
    </div>
    <div class='2'>
      <!-- this is where the contact info would go -->
    </div>
  </div>
</div>

The span classes would vary based on the grid system you are using though. By the looks of the source code though it does look as if bootstrap is included but I am not sure why the other grid system is in place.