Exploring the realm of cross-device magic, I have a challenge on my hands. My goal is to eliminate a slider image for screen widths smaller than 622px. Through experimentation, I have discovered that removing the image URL in CSS achieves the desired effect.
Here's my strategy...
I plan to enqueue a .js file in Wordpress to monitor when the screen size dips below 622px, and then utilize .js to alter the CSS by removing the slider image URL.
My action plan...
Add the script in functions.php
function wpb_adding_scripts() {
// Register and Enqueue a Script
wp_register_script('screensizemods', get_stylesheet_directory_uri() . '/js/screensizemods.js');
wp_enqueue_script('screensizemods');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
My script /js/screensizemods.js
function Resize() {
width = window.innerWidth;
height = window.innerHeight;
if(width < 622) {
// Adjust specific Stylesheet elements.
document.styleSheets[0].addRule('background-image: url("");}');
}
}
Despite all efforts, it appears my approach isn't yielding results. No console .js errors are reported, and the script is successfully loaded. Could there be an issue with my .js code?
Edit:
This is the element I'm attempting to modify, which seems to be rendered inline by the Theme...
element {
background-image: url("http://www.example.com/wp-content/uploads/2015/05/bgimage.jpg");
Edit 2:
Streamlining things with a media query watcher attempt...
The media query is triggering correctly upon screen resize. However, an error
reference error: style is not defined // Media Query Event Handler
if (matchMedia) {
var mq = window.matchMedia("(min-width: 622px)");
mq.addListener(screensizemods);
screensizemods(mq);
}
// Media Query Change
function screensizemods(mq) {
if (mq.matches) {
// Window width exceeds 622px
}
else {
// Window width less than 622px
// Apply a new rule to the top of my stylesheet
style.css.insertRule("background-image: url('') !important}", 0);
}
}