Menu icon Foundation
Media queries & Equal height columns

Hello,

I am using media queries for the logo and title of a webpage in order to make it responsive. I encountered a few problems:

1. The logo and title are in separate columns (large-4 and large-8) and when I shrink the browser window the columns are not at an equal height. I created the columns using the Foundation framework and I included "data-equalizer" and "data-equalizer-watch."

2. The logo appears to stick out of its containing column when the browser window shrinks to 700px.

3. When the browser window shrinks to 700px, the last part of the title is pushed down instead of having the words on one line.

When I created the media queries I used this webpage http://foundation.zurb.com/docs/media-queries.html
and I had to add additional breakpoints in order to keep the title on one line.


Thank you for the assistance!

10 21 2014 3 37 57 pm

MEDIA QUERIES

<style type="text/css">
/* MEDIA QUERIES */

// Small screens
@media only screen { 

    .the_logo { width: 184px; height: 65px; }

    .the_title { font-family: Georgia; font-size: 1em; color: #ffffff; }	
 } /* Define mobile styles */

@media only screen and (max-device-width: 480px) { 

	.the_logo { width: 184px; height: 65px; }
	
	.the_title { font-family: Georgia; font-size: 1em; color: #ffffff; }		
} /* width is defined when the phone or tablet is in landscape mode. 480px is the total width of the phone in landscape */


@media only screen and (max-width: 40em) { 

	.the_logo { width: 184px; height: 65px; }
	
	.the_title { font-family: Georgia; font-size: 1.2em; color: #ffffff; }		
} /* max-width 640px, mobile-only styles, use when QAing mobile issues */


// Medium screens

@media only screen and (min-width: 40.063em) { 

	.the_title { font-family: Georgia; font-size: 1.4em; color: #ffffff; } 	
	
} /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 48.063em) { 

	.titlestyle { border-right: solid 1px #cccccc; padding-right: 2.56em;} 
	
	.the_title { font-family: Georgia; font-size: 1.6em; color: #ffffff; }
	
} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */



@media only screen and (min-width: 48.063em) and (max-width: 54.063em) { 

	.titlestyle { border-right: solid 1px #cccccc; padding-right: 2.56em;} 
	
	.the_title { font-family: Georgia; font-size: 1.6em; color: #ffffff; }
	
} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

@media only screen and (min-width: 54.063em) and (max-width: 64em) { 

	.titlestyle { border-right: solid 1px #cccccc; padding-right: 2.56em;} 
	
	.the_title { padding: 0.10em 0 0.10em 0; font-family: Georgia; font-size: 1.8em; color: #ffffff; }
	
} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */


// Large screens
@media only screen and (min-width: 64.063em) { 

	.titlestyle { border-right: solid 1px #cccccc; padding-right: 2.56em;} 
	
	.the_title { padding: 0.10em 0 0.10em 0; font-family: Georgia; font-size: 2em; color: #ffffff; }
	  
} /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { 

	.titlestyle { border-right: solid 1px #cccccc; padding-right: 2.56em; }
	
	.the_title { padding: 0.10em 0 0.10em 0; font-family: Georgia; font-size: 2em; color: #ffffff; }
} /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */


@media only screen and (min-width: 90em) and (max-width: 190em) { 

	.titlestyle { border-right: solid 1px #cccccc; padding-right: 2.56em; }
	
	.the_title { padding: 0.10em 0 0.10em 0;  font-family: Georgia; font-size: 2em; color: #ffffff; }
	
} /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
</style>
            

         

<body> 
<!-- body content here --> 

<header>
    <div class="row" data-equalizer>
		<div class="small-12 medium-4 large-4 centered columns header1" data-equalizer-watch>
			<a href="#"><img class="the_logo" src="img/logo2.png" alt="logo placeholder image"></a>
		</div>
		
		<div class="small-12 medium-8 large-8 centered columns header2" data-equalizer-watch>

			<h1 class="the_title">Center for Interprofessional Education</h1> 

		</div>
	</div>
</header>

<hr>
	

<script src="js/vendor/jquery.js"></script> 
<script src="js/foundation.js"></script>
 <script src="js/foundation/foundation.equalizer.js"></script>
<script>
      $(document).foundation();

      var doc = document.documentElement;
      doc.setAttribute('data-useragent', navigator.userAgent);
    </script>

</body> 
     

media queriesFoundation 5css

Hello,

I am using media queries for the logo and title of a webpage in order to make it responsive. I encountered a few problems:

1. The logo and title are in separate columns (large-4 and large-8) and when I shrink the browser window the columns are not at an equal height. I created the columns using the Foundation framework and I included "data-equalizer" and "data-equalizer-watch."

2. The logo appears to stick out of its containing column when the browser window shrinks to 700px.

3. When the browser window shrinks to 700px, the last part of the title is pushed down instead of having the words on one line.

When I created the media queries I used this webpage http://foundation.zurb.com/docs/media-queries.html
and I had to add additional breakpoints in order to keep the title on one line.


Thank you for the assistance!

10 21 2014 3 37 57 pm

MEDIA QUERIES

<style type="text/css">
/* MEDIA QUERIES */

// Small screens
@media only screen { 

    .the_logo { width: 184px; height: 65px; }

    .the_title { font-family: Georgia; font-size: 1em; color: #ffffff; }	
 } /* Define mobile styles */

@media only screen and (max-device-width: 480px) { 

	.the_logo { width: 184px; height: 65px; }
	
	.the_title { font-family: Georgia; font-size: 1em; color: #ffffff; }		
} /* width is defined when the phone or tablet is in landscape mode. 480px is the total width of the phone in landscape */


@media only screen and (max-width: 40em) { 

	.the_logo { width: 184px; height: 65px; }
	
	.the_title { font-family: Georgia; font-size: 1.2em; color: #ffffff; }		
} /* max-width 640px, mobile-only styles, use when QAing mobile issues */


// Medium screens

@media only screen and (min-width: 40.063em) { 

	.the_title { font-family: Georgia; font-size: 1.4em; color: #ffffff; } 	
	
} /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 48.063em) { 

	.titlestyle { border-right: solid 1px #cccccc; padding-right: 2.56em;} 
	
	.the_title { font-family: Georgia; font-size: 1.6em; color: #ffffff; }
	
} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */



@media only screen and (min-width: 48.063em) and (max-width: 54.063em) { 

	.titlestyle { border-right: solid 1px #cccccc; padding-right: 2.56em;} 
	
	.the_title { font-family: Georgia; font-size: 1.6em; color: #ffffff; }
	
} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

@media only screen and (min-width: 54.063em) and (max-width: 64em) { 

	.titlestyle { border-right: solid 1px #cccccc; padding-right: 2.56em;} 
	
	.the_title { padding: 0.10em 0 0.10em 0; font-family: Georgia; font-size: 1.8em; color: #ffffff; }
	
} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */


// Large screens
@media only screen and (min-width: 64.063em) { 

	.titlestyle { border-right: solid 1px #cccccc; padding-right: 2.56em;} 
	
	.the_title { padding: 0.10em 0 0.10em 0; font-family: Georgia; font-size: 2em; color: #ffffff; }
	  
} /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { 

	.titlestyle { border-right: solid 1px #cccccc; padding-right: 2.56em; }
	
	.the_title { padding: 0.10em 0 0.10em 0; font-family: Georgia; font-size: 2em; color: #ffffff; }
} /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */


@media only screen and (min-width: 90em) and (max-width: 190em) { 

	.titlestyle { border-right: solid 1px #cccccc; padding-right: 2.56em; }
	
	.the_title { padding: 0.10em 0 0.10em 0;  font-family: Georgia; font-size: 2em; color: #ffffff; }
	
} /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
</style>
            

         

<body> 
<!-- body content here --> 

<header>
    <div class="row" data-equalizer>
		<div class="small-12 medium-4 large-4 centered columns header1" data-equalizer-watch>
			<a href="#"><img class="the_logo" src="img/logo2.png" alt="logo placeholder image"></a>
		</div>
		
		<div class="small-12 medium-8 large-8 centered columns header2" data-equalizer-watch>

			<h1 class="the_title">Center for Interprofessional Education</h1> 

		</div>
	</div>
</header>

<hr>
	

<script src="js/vendor/jquery.js"></script> 
<script src="js/foundation.js"></script>
 <script src="js/foundation/foundation.equalizer.js"></script>
<script>
      $(document).foundation();

      var doc = document.documentElement;
      doc.setAttribute('data-useragent', navigator.userAgent);
    </script>

</body>