Need help creating custom media queries from Mozilla

I am using Foundation 5 and I am creating a header that contains the website’s logo and title, which has column widths of 4 (logo) and 8 (title).

When I shrink the browser window in Mozilla’s Responsive view, the logo begins to decrease in size. But when the size of the window is 479 x 1024, the logo enlarges again.

I would like to control the size of the logo and keep it small but this requires creating a custom media query. How would I do this?

Here is the code and I have attached 3 screenshots:

HTML

<header>
	<div class="row">
		<div class="small-12 medium-4 large-4 centered columns">
		
		<a href="#"><img src="img/logo2.png" class="titlestyle"></a></div>
		
		<div class="small-12 medium-8 large-8 centered columns">
		<img src="img/title2.png" class="logostyle"/>
		</div>
	</div>
</header>

You’ve forgotten to post the CSS which goes along with that. :slight_smile: