Skip to content

Instantly share code, notes, and snippets.

@jeremypetrequin
Created May 26, 2014 12:04
Show Gist options
  • Save jeremypetrequin/4f2f1690c40a4e85b5c7 to your computer and use it in GitHub Desktop.
Save jeremypetrequin/4f2f1690c40a4e85b5c7 to your computer and use it in GitHub Desktop.
Find what f***** DOM element break your responsive by adding a horz scrollbar
//put this in your console, and see the red elements
var breakpoint = 320;
$('*').each(function() {
($t = $(this)).outerWidth() + $t.offset().left > breakpoint && console.log($t.css('background', 'red'));
});
@azalys
Copy link

azalys commented Jun 17, 2020

// Without jquery
var breakpoint = 320;
document.querySelectorAll('*').forEach(function(el) {
($t = el.getBoundingClientRect().width + el.getBoundingClientRect().left > breakpoint && console.log(el.style.background = 'red'));
});

@jeremypetrequin
Copy link
Author

jeremypetrequin commented Jun 17, 2020

let breakpoint = 320;
document.querySelectorAll('*').forEach(function($el) {
    if($el.getBoundingClientRect().width + $el.getBoundingClientRect().left > breakpoint) {
        $el.style.background = 'red'
        console.log($el);
    }
});

With console.log working ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment