Overriding the preset media queries

  • So I love the way this theme looks but I want to edit the way the media queries control responsiveness. The problem is, the media queries aren’t in style.css but are buried in different php functions in different files. It goes like this:

    The actual media queries are located in actions.php

    /*
 * The Media Queries
 */
function pw_add_media_queries() {
	global $pw_content_width, $pw_first_sidebar, $pw_second_sidebar, $pw_site;
	$ipad = 720 / $pw_site;
	?>
@media only screen and (max-device-width: 768px), only screen and (max-width: 768px) {
		#body-wrapper { width: 720px !important; padding: 0 10px; }
		body.fullwidth #maincontent, #headerbanner, #footer { width: 720px !important; }
		#header_image { background-size: 720px !important; height: <?php echo 720/$pw_site*HEADER_IMAGE_HEIGHT; ?>px !important; }
		#maincontent { width: <?php echo ($pw_content_width * $ipad) - 10; ?>px !important; }
		#firstsidebar { width: <?php echo $pw_first_sidebar * $ipad; ?>px !important; }
		#secondsidebar { width: <?php echo ($pw_second_sidebar * $ipad) - 15; ?>px !important; }
	}
	@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
		#body-wrapper { width: 420px !important; padding: 0 10px; }
		body.fullwidth #maincontent, #headerbanner, #footer { width: 420px !important; }
		#maincontent { width: 420px !important; }
		#header_image { background-size: 420px !important; height: <?php echo 420/$pw_site*HEADER_IMAGE_HEIGHT; ?>px !important; }
		.home article { width: 100%; }
		#firstsidebar, #secondsidebar { float: none; width: 100% !important; }
		#main-wrapper > li { margin: 0 !important; }
		#extendedfooter .bottom-widget { width: 100%; margin: 0 0 20px; }
	}<?php
}
add_action('pw_media_queries', 'pw_add_media_queries');

    The function pw_media_queries then shows up in inc/stylesheet.php which adds the media queries css to some other sitewide css.

    <?php do_action("pw_media_queries"); ?>

    Then it’s finally included in functions.php along with several other files.

    if(!empty($_GET['action']) && $_GET['action']=="pw-activate" && empty($pw_welcome))
include(get_template_directory()."/admin/inc/stylesheet.php");

    Then all these files get written into the <head> tag in the final html.

    I have a child theme set up, but I can’t override the media queries from there because they’re being written in as in-line css (with !important, no less). My question is what’s the best way of changing/overriding the media queries but without deleting the other css added during stylesheet.php (which is what removing the include from functions.php would do) and without editing the parent theme?

    I’m not particularly experienced in php (the whole point of using this child theme was I’d only be writing css. oh well!), so any help is super appreciated… Thanks!

  • The topic ‘Overriding the preset media queries’ is closed to new replies.