Responsive Design View with Firefox / Chrome Device Mode
Sooo you’re building a site; You make sure that it is going to be responsive, maybe you built it in bootstrap, maybe in wordpress & php and need to make sure that your team's work is being rendered across all mobile platforms and need a way to quickly look at it in it’s different break points Or, maybe you’re a project manager tasked with going the through the ‘customer journey’ and are tired of grabbing your phone or tablet to make sure that it is rendering correctly.
Well do I have (maybe) something you need!
It is called Responsive Design View in Firefox and Device Mode in Chrome! Here are the keyboard shortcuts to make this happen:
On Windows:
Chrome Ctrl + Shift + J and then Ctrl + Shift + M Firefox Ctrl + Shift + M
On Mac: Chrome Cmd + Shift + I and then Cmd + Shift + M Firefox Cmd + Opt + M