Preview height?

Hi,

I am actually just wondering how others are doing it:
When in preview-mode and wanting to see how it would look like on a phone, I of course have a much slimmer view (the phone’s width). But since i.e. I specifically choose the iPhone-view I have a very high preview, since the the preview is using the height of the browser, I can not really imagine how it would look like on the actual device…

Even Chrome does not have such an option.
Only the new Responsive Design Mode of Firefox seems to have it correctly implemented (not only with the iPhone-widht but also with its height)… See here for Info/Video.

So what are your tools to have a more accurate preview?

I also found the Whishlist-idea which you might want to vote for :slight_smile: : Ability to adjust height of the Designer Canvas for | Webflow Wishlist

Hey @berot3

I’m using this for chrome

Super nice, you can custom everything.

You can use my config, just put this in import

{“presets”:[{“title”:“Webflow”,“width”:“1500”,“height”:“1400”,“type”:“desktop”,“target”:“window”,“X”:“520”,“Y”:“0”,“pos”:“1”,“ID”:0},{“title”:“Full Screen”,“width”:“2560”,“height”:“1300”,“type”:“desktop”,“target”:“window”,“X”:“0”,“Y”:“0”,“pos”:“1”,“ID”:1},{“title”:“IMac 21’”,“width”:“1920”,“height”:“1080”,“type”:“desktop”,“target”:“window”,“X”:“”,“Y”:“”,“pos”:“3”,“ID”:2},{“title”:“MaBook Pro 15’”,“width”:“1920”,“height”:“1200”,“type”:“laptop”,“target”:“window”,“X”:“”,“Y”:“”,“pos”:“3”,“ID”:3},{“title”:“MacBook Pro 13’”,“width”:“1680”,“height”:“1050”,“type”:“laptop”,“target”:“window”,“X”:“”,“Y”:“”,“pos”:“3”,“ID”:4},{“title”:“MacBook “,“width”:“1024”,“height”:“640”,“type”:“laptop”,“target”:“window”,“X”:””,“Y”:“”,“pos”:“3”,“ID”:5},{“title”:“iPad”,“width”:“768”,“height”:“1024”,“type”:“tablet”,“target”:“viewport”,“X”:“”,“Y”:“”,“pos”:“3”},{“title”:“IPad 9,7’”,“width”:“1536”,“height”:“2048”,“type”:“tablet”,“target”:“viewport”,“X”:“”,“Y”:“”,“pos”:“3”},{“title”:“IPad 12,9’”,“width”:“1048”,“height”:“2732”,“type”:“tablet”,“target”:“viewport”,“X”:“”,“Y”:“”,“pos”:“3”},{“title”:“IPhone 6+”,“width”:“1242”,“height”:“2208”,“type”:“smartphone”,“target”:“viewport”,“X”:“”,“Y”:“”,“pos”:“3”,“ID”:9},{“title”:“IPhone 6”,“width”:“750”,“height”:“1134”,“type”:“smartphone”,“target”:“viewport”,“X”:“”,“Y”:“”,“pos”:“3”,“ID”:10},{“title”:“IPhone 5”,“width”:“640”,“height”:“1136”,“type”:“smartphone”,“target”:“viewport”,“X”:“”,“Y”:“”,“pos”:“3”,“ID”:11},{“title”:“IPhone 4”,“width”:“640”,“height”:“960”,“type”:“smartphone”,“target”:“viewport”,“X”:“”,“Y”:“”,“pos”:“3”,“ID”:12},{“title”:“HVGA (old iPhones, small Androids)”,“width”:320,“height”:480,“type”:“featurephone”,“target”:“viewport”,“ID”:13},{“title”:“WVGA - Low-end Windows Phone”,“width”:“480”,“height”:“800”,“type”:“featurephone”,“target”:“viewport”,“X”:“”,“Y”:“”,“pos”:“0”,“ID”:14},{“title”:“WXGA - High-end Windows Phone”,“width”:768,“height”:1280,“type”:“smartphone”,“target”:“viewport”,“ID”:15},{“title”:“WXGA - Tablet”,“width”:1366,“height”:768,“type”:“tablet”,“target”:“viewport”,“ID”:16},{“title”:“WXGA - Netbook”,“width”:1280,“height”:800,“type”:“laptop”,“target”:“window”,“ID”:17},{“title”:“WXGA - Ultrabook”,“width”:1366,“height”:768,“type”:“laptop”,“target”:“window”,“ID”:18},{“title”:“SXGA - Small desktop”,“width”:1280,“height”:1024,“type”:“desktop”,“target”:“window”,“ID”:19},{“title”:“WSXGA+ - Large desktop”,“width”:1680,“height”:1050,“type”:“desktop”,“target”:“window”,“ID”:20}],“settings”:{“popupWidth”:“250”,“tooltipDelay”:“2000”}}

1 Like

Hi @berot3, I added that wishlist idea, thanks for up-voting! I’m not sure if you’re on a mac or not but Safari has a good ‘responsive design mode’ too. @aeko has some more info in another post.

I find it very useful (much like the firefox version) – but in my experience, nothing ever beats an actual device – I hope webflow find a way to give us live preview syncing to phones etc at some point in the future…

1 Like

Hey Louis,

I tried using this code to import the preset settings into the plugin but it gives me the error of “invalid json object”

I wonder if you’re still using this and if you wouldn’t mind sharing the exported preset again?

Thanks