Responsive Media Queries

[Magically]

Hey,

 

So I am trying to make my portfolio website responsive for different screen resolutions. I am using media queries but they are not over-riding the native styles. I believe my syntax is correct but I will share it with you guys to see if I have done anything wrong. 

<link href="css/responsiveIndex.css" rel="stylesheet" type="text/css"/>

This links to my stylesheet. 

 

I am currently testing for a with a resolution of 1680 x 1050 which has the following media query

@media only screen and (min-width : 1680px) {	.cont_1_text {	font:Helvetica, Sans-serif;	font-size: 120px;	color: #ffffff;	}	.cont_1_text2 {	font: Helvetica, Sans-serif;	font-size: 50px;	color: #ffffff;	}}

All it needs is for the text to be scaled down a bit.

Thanks in advance to who ever can help me fix this issue. 

[Aho]

Can you post your HTML and other CSS styles?

 

I'm not sure why your text isn't scaling without seeing your markup and CSS, but the font property should also be given a size value, otherwise it won't work. 

 

Instead of using both the font and font-size properties, simply use:

@media only screen and (min-width: 1680px) {    .cont_1_text {        font: 120px Helvetica, Sans-serif;        color: #ffffff;    }     .cont_1_text2 {        font: 50px Helvetica, Sans-serif;        color: #ffffff;    }}

or you could change font to font-family.

[Magically]

What other HTML & CSS do you need to see specifically? 

 

And changing font to font-family didn't work

 

It's weird since I had it working but than I moved my file into a css folder in my directory and it stopped working

[Aho]

In that case, it's more than likely an issue with your relative path to the 'responsiveIndex.css' being incorrect.

 

Load the page and log the network requests with your browser and you should see all the assets it downloads. If 'responsiveIndex.css' results in a 404 status, you have an issue with the file's path.

 

Otherwise, use your browser's DOM tree to debug what's going on. 

[Magically]

In that case, it's more than likely an issue with your relative path to the 'responsiveIndex.css' being incorrect.

 

Load the page and log the network requests with your browser and you should see all the assets it downloads. If 'responsiveIndex.css' results in a 404 status, you have an issue with the file's path.

 

Otherwise, use your browser's DOM tree to debug what's going on. 

 

I decided to throw out the responsiveness till the end, I am going to design the website for my screen-size and focus on the responsive side of things at the end 

[Unknown_Guy]

I decided to throw out the responsiveness till the end, I am going to design the website for my screen-size and focus on the responsive side of things at the end 

I wouldn't recommend that. It's much harder to make everything responsive later than doing it from start.

 

Are you using something like http://getbootstrap.com/2.3.2/ ? Making responsive design that way is much much easier. Another good thing that comes with it is browser support especially IE.