Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How to add multiple presets to responsive design view without having to resize the screen each time

  • 3 replies
  • 8 have this problem
  • 11728 views
  • Last reply by cor-el

more options

I want to be able to add multiple screen size presets to the responsive design view capability but don't want to have to resize the screen and add each one individually via the custom preset function.

Have seen that some posts on the internet (http://g-liu.com/blog/2013/08/firefox-rdm-presets/) that say this can be done but cannot find where the config is held in ver 26.0?

Chosen solution

Hi,

Have now worked out how to do this. You first need to create an entry called "devtools.responsive.UI.presets" in the config file then add in the preset string:

So steps are:

1)Open a new Firefox tab or window, and type about:config

2)(If a warning message comes up, just click OK.)

3)create a new entry devtools.responsive.UI.presets - right click and chose 'new' then 'string' - under enter the preference name type "devtools.responsive.UI.presets" then hit OK. When the enter string box appears simply add the folllowing

[{"key": "CGA: 320x200", "width": 320, "height": 200}, {"key": "QVGA: 320x240", "width": 320, "height": 240}, {"key": "CIF: 352x288", "width": 352, "height": 288}, {"key": "SIF: 384x288", "width": 384, "height": 288}, {"key": "HVGA: 480x320", "width": 480, "height": 320}, {"key": "VGA (NTSC): 640x480", "width": 640, "height": 480}, {"key": "PAL: 768x576", "width": 768, "height": 576}, {"key": "WVGA: 800x480", "width": 800, "height": 480}, {"key": "SVGA: 800x600", "width": 800, "height": 600}, {"key": "WVGA (NTSC): 854x480", "width": 854, "height": 480}, {"key": "PAL: 1024x576", "width": 1024, "height": 576}, {"key": "WSVGA", "width": 1024, "height": 600}, {"key": "XGA: 1024x768", "width": 1024, "height": 768}, {"key": "1152x768", "width": 1152, "height": 768}, {"key": "XGA: 1152x864", "width": 1152, "height": 864}, { "key": "WXGA: 1280x600", "width": 1280, "height": 600}, {"key": "HD 720: 1280x720", "width": 1280, "height": 720}, {"key": "WXGA: 1280x768", "width": 1280, "height": 768}, { "key": "WXGA: 1280x800", "width": 1280, "height": 800}, { "key": "SXGA: 1280x1024", "width": 1280, "height": 1024}, { "key": "980x1280", "width": 980, "height": 1280}, {"key": "Microsoft Surface RT: 320x240", "width": 1366, "height": 768}, { "key": "1400x900", "width": 1400, "height": 900}, { "key": "1400x960", "width": 1400, "height": 960}, { "key": "SXGA+: 1400x1050", "width": 1400, "height": 1050}, { "key": "1400x1080", "width": 1400, "height": 1080}, { "key": "1600x900", "width": 1600, "height": 900}, { "key": "UXGA: 1600x1200", "width": 1600, "height": 1200}, { "key": "WSXGA+: 1680x1050", "width": 1680, "height": 1050}, { "key": "1920x900", "width": 1920, "height": 900}, { "key": "HD 1080: 1920x1080", "width": 1920, "height": 1080}, { "key": "WUXGA: 1920x1200", "width": 1920, "height": 1200}, { "key": "2K: 2048x1080", "width": 2048, "height": 1080}, { "key": "QXGA: 2048x1536", "width": 2048, "height": 1536}, { "key": "WQHD: 2560x1440", "width": 2560, "height": 1440}, { "key": "WQXGA: 2560x1600", "width": 2560, "height": 1600}, { "key": "QSXGA: 2560x2048", "width": 2560, "height": 2048}, { "key": "2160p: 3840x2160", "width": 3840, "height": 2160}, { "key": "4k: 4096x2160", "width": 4096, "height": 2160}, { "key": "4320p: 7680x4320", "width": 7680, "height": 4320}, { "key": "8k: 8192x4608", "width": 8192, "height": 4608}, { "key": "8640p: 15360x8340", "width": 15360, "height": 8640} ]

then hit OK

All of the new presets should now be in the responsive design view.

Worked for me!

Read this answer in context 👍 6

All Replies (3)

more options

Chosen Solution

Hi,

Have now worked out how to do this. You first need to create an entry called "devtools.responsive.UI.presets" in the config file then add in the preset string:

So steps are:

1)Open a new Firefox tab or window, and type about:config

2)(If a warning message comes up, just click OK.)

3)create a new entry devtools.responsive.UI.presets - right click and chose 'new' then 'string' - under enter the preference name type "devtools.responsive.UI.presets" then hit OK. When the enter string box appears simply add the folllowing

[{"key": "CGA: 320x200", "width": 320, "height": 200}, {"key": "QVGA: 320x240", "width": 320, "height": 240}, {"key": "CIF: 352x288", "width": 352, "height": 288}, {"key": "SIF: 384x288", "width": 384, "height": 288}, {"key": "HVGA: 480x320", "width": 480, "height": 320}, {"key": "VGA (NTSC): 640x480", "width": 640, "height": 480}, {"key": "PAL: 768x576", "width": 768, "height": 576}, {"key": "WVGA: 800x480", "width": 800, "height": 480}, {"key": "SVGA: 800x600", "width": 800, "height": 600}, {"key": "WVGA (NTSC): 854x480", "width": 854, "height": 480}, {"key": "PAL: 1024x576", "width": 1024, "height": 576}, {"key": "WSVGA", "width": 1024, "height": 600}, {"key": "XGA: 1024x768", "width": 1024, "height": 768}, {"key": "1152x768", "width": 1152, "height": 768}, {"key": "XGA: 1152x864", "width": 1152, "height": 864}, { "key": "WXGA: 1280x600", "width": 1280, "height": 600}, {"key": "HD 720: 1280x720", "width": 1280, "height": 720}, {"key": "WXGA: 1280x768", "width": 1280, "height": 768}, { "key": "WXGA: 1280x800", "width": 1280, "height": 800}, { "key": "SXGA: 1280x1024", "width": 1280, "height": 1024}, { "key": "980x1280", "width": 980, "height": 1280}, {"key": "Microsoft Surface RT: 320x240", "width": 1366, "height": 768}, { "key": "1400x900", "width": 1400, "height": 900}, { "key": "1400x960", "width": 1400, "height": 960}, { "key": "SXGA+: 1400x1050", "width": 1400, "height": 1050}, { "key": "1400x1080", "width": 1400, "height": 1080}, { "key": "1600x900", "width": 1600, "height": 900}, { "key": "UXGA: 1600x1200", "width": 1600, "height": 1200}, { "key": "WSXGA+: 1680x1050", "width": 1680, "height": 1050}, { "key": "1920x900", "width": 1920, "height": 900}, { "key": "HD 1080: 1920x1080", "width": 1920, "height": 1080}, { "key": "WUXGA: 1920x1200", "width": 1920, "height": 1200}, { "key": "2K: 2048x1080", "width": 2048, "height": 1080}, { "key": "QXGA: 2048x1536", "width": 2048, "height": 1536}, { "key": "WQHD: 2560x1440", "width": 2560, "height": 1440}, { "key": "WQXGA: 2560x1600", "width": 2560, "height": 1600}, { "key": "QSXGA: 2560x2048", "width": 2560, "height": 2048}, { "key": "2160p: 3840x2160", "width": 3840, "height": 2160}, { "key": "4k: 4096x2160", "width": 4096, "height": 2160}, { "key": "4320p: 7680x4320", "width": 7680, "height": 4320}, { "key": "8k: 8192x4608", "width": 8192, "height": 4608}, { "key": "8640p: 15360x8340", "width": 15360, "height": 8640} ]

then hit OK

All of the new presets should now be in the responsive design view.

Worked for me!

more options

In FF26, at least, the entry should be "devtools.responsiveUI.presets"... and in addition to the "key" property you should add a "name" property with maybe the same value. The former is for Firefox to remember the last preset selected while the latter is to identify the preset.

Modified by bedex78

more options

You can also do the opposite and create custom settings in the responsive design mode window. You can hold down the Shift key and drag the borders via the (right border, bottom border, bottom right corner) resize icons to get specific dimensions and give the current custom setting a name to add them as a preset. This will add the preset to the devtools.responsiveUI.presets pref.

See also my post here for a bookmarklet.

You can paste the current value of the pref in the prompt to see a list of currently defined presets.
You can add a new preset by entering the width,height,name values in the prompt.
Copy the new preset list to the pref.

javascript:(function(){
function rdObj(w,h,n){with(this){key=w+"x"+h;if(n)name=n;width=w;height=h;}}
rdObj.prototype={key:"",name:"",width:"",height:""};
var n={},p='<width>x<height> <name> OR width,height,name',rd=[];
while(p!=null){
p=prompt(p,JSON.stringify(rd));
if(/^(\d{3,4})[,x](\d{3,4})([, ](.+))?$/.test(p)){
n=new rdObj(RegExp.$1,RegExp.$2,RegExp.$4);rd.push(n);
}else{try{rd=JSON.parse(p);}catch(e){}}
}})()

Modified by cor-el