I have the 1920px stylesheet complete at a page width of 1560px. I'm trying to style the next width for 1366px screens using @media queries but when I change anything it changes globally.

I'm a novice at CSS and HTML and really need some help linking to separate stylesheets (1920px, 1366, 768, 360) that I can edit without either one affecting the other. I've tried to this code unsuccessfully:

<script type="text/javascript">
var reswidth = screen.width;
if (reswidth < 1560) {document.write('<link rel="stylesheet" type="text/css" href="style1366px.css" />');}
else {document.write('<link rel="stylesheet" type="text/css" href="style.css" />');}

I'd really like to be able to implement this code within an @media query:

-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);

I've spent hours upon hours trying but I haven't been able figure it out. I have the site uploaded to Dropbox. If anyone can help I'd be truly grateful.

I also can't figure out how to keep the top right and main menu aligned to the search box when resizing the browser window horizontally so if anyone has the time then please help, I'm starting to lose it :)


Your question is off-topic on here, but some quick tips.

To print your style, you can use wp_add_inline_style(). find a stylesheet and hook to it to print your styles, instead of using style link in a script link (which obviously won't work). This is an example for you, which goes in your theme/child-theme's functions.php file:

function add_my_inline_css(){
    wp_add_inline_style('HOOK','@media {body { color:black } }');

That's the best practice to add inline CSS to your theme's header. Change the HOOK to your theme's stylesheet ID. You can find it in your theme's header on any page. For example, if this is the style in your theme's header:

<link id="kymadic-css" rel="stylesheet" type="text/css" href="https://example.com/wp-content/theme/my-theme/tyle.css">

Then your hook's name is kymadic. After using the above code, this will be added to your theme's header:

<style>@media {body { color:black } }</style>

Now, a tip for responsive design. Media queries can be limited to a minimum and maximum width. The general syntax for a media query is like this:

@media only screen and (max-width: 1000px) and (min-width: 800px) { ... }

This will be activated when your screen's size is above 800px wide but not greater than 1000px. You can remove one of the queries, for example:

@media only screen and (max-width: 1000px) { ... }

Will affect any screen smaller than 1000px, and this:

@media only screen and (min-width: 800px){ ... }

Will affect any screen larger than 800px wide. You can read more about responsive design at W3Schools.

Not the answer you're looking for? Browse other questions tagged or ask your own question.