@John_Merritt the Webflow team just released this in open beta!
To access CSS Preview go to the lower left corner of the Designer. Click the “?” and select CSS Preview.
@John_Merritt the Webflow team just released this in open beta!
To access CSS Preview go to the lower left corner of the Designer. Click the “?” and select CSS Preview.
Just noticed this, I’m already finding it really helpful for debugging and working with sites/apps that use exported Webflow code – I hope it stays…
This would be so cool.
Unfortunately, mine is just showing up blank - no css information.
Is anyone else experiencing this?
Teresa - Webflow Designer
Click any element on canvas and its properties will show in the css preview
Thank you.
I think it was just a temporary glitch, because it’s working great now.
Teresa - Webflow Designer
I’m wondering what the deal is with the seemingly custom pseudo-classes (:tiny, etc.).
I just started using Webflow, and am poking around the “Portfolio Starter” template.
Hi @Zeke8990 , Welcome to the forums!
Good eye for a first time poster!
They represent the default breakpoints in Webflow.
tiny: mobile portrait
small: mobile landscape
medium : tablet
large: main
They are initialized in the Webflow main JavaScript file.
"site": {
"mediaQueries": [{
"key": "main",
"min": 992,
"max": 10000
}, {
"key": "medium",
"min": 768,
"max": 991
}, {
"key": "small",
"min": 480,
"max": 767
}, {
"key": "tiny",
"min": 0,
"max": 479
}]
}
Ahhh, of course, thanks!
I love this, it’s already been very helpful.
I also love the pseudo class names via js idea. Smart.
I’ve just found this CSS Preview Beta today and it’s pretty sweet!
BUG
However, I can’t copy the text in the preview - which would be very handy!
Using Chrome on Windows 10 - What browser am I using?
@Diarmuid_Sexton yes, it’s been around for a while and unfortunately, that’s not a bug. It’s just the way the preview works. It’s confusing since you can select the text but it doesn’t do anything once you try to copy/paste.
Ok. Does it not seem logical to be able to copy and paste it? I’ve found a workaround but for others, it feels like copy should work natively.
@Diarmuid_Sexton yes, it does, it’s just not built-in at the moment, it’s in beta so maybe that will change?
The ability to copy from the CSS Preview panel just seems like a no-brainer to me, and would be SOO useful. Hoping they enable it soon!
You highlight the text, then right click and in chrome you can click “Search Google for…” And that will paste the css into the Google Search bar - and you can then copy it from there.
Hi
Can you demonstrate it with loom (video) for the rest of us?
You should take another look now
Yep - saw that’s there’s now a button to copy to clipboard - thanks Webflow!