Designing Media Queries - want to nudge viewport by 1 px -- Solved --

Designing Media Queries - want to nudge viewport by 1 px -- Solved --
0.0 0

#1

Anyone know of a keyboard shortcut, or a tool/extension that would provide a keyboard shortcut, that can nudge a chrome viewport by one pixel?

I currently use Window Resizer to size my viewport, but I find it awkward. I do this kind of thing for hours on end when doing media queries for a website, and being able to tap a key to do the resize would be a real productivity boost.

Cheers…


#2

If you’re testing responsive sites, have you heard of Pinegrow editor? or Sizzy?

https://pinegrow.com/



Just point it to your test dev url, and it will display different sizes of your site all at the same time .


#3

You can focus on the dimension that you want to nudge an press Up or Down.


#4

Hi @owel thanks for the two suggestions. The second one, Sizzy looks like an excellent choice except I do all local development, not staged development, so it unfortunately will not work for me. Too bad to… The first one is really a full blown IDE and I already use PhpStorm, so I don’t see myself switching just to work around an irritant. But if you were still using just simple and free editor, Pinegrow looks like it might be a nice development tool.

Thanks a lot for replying though, I really appreciate it.

Rick


#5

Hi @kevcomedia thanks for your suggestion, I just could not get it to work. It is probably because I use a Windows enviroment, although I tried a MacBook Pro without any luck either.

Just to make sure I understand, your click on the chrome browser to make sure it is the active application, hover over an edge to get the resize cursor, and then tap the plus or minus keys to nudge the viewport larger or smaller?

Thanks a lot Kev for taking the time to reply,

Rick


#6

I meant focusing on the text box at the top itself

Once it has the focus, you can press the Up and Down keys.


#7

Thanks Kev - I finally got it. I was inside Windows Resizer app and you are inside chrome developer tools, responsive design tool set. Yep, that works - thanks a lot.

Time to give those break points hell!


#8

Sizzy will work even on a localhost server/domain, or internal dev server (with a private IP). – doesn’t have to be out there on the public internet, using the Chrome Sizzy plugin.

Yeah, I don’t use Pinegrow as an editor, only once in a while when checking stuff. I got it back when it was new and cheap at $25 or something, version 1.x


#9

Well I’ll be darned, that works! This will make a nice addition to the toolbox.

Thanks @owel