Hi Webflowers, it’s the Episode 2 of custom code snippets you would use in your projects. Check out the first episode if you missed it.
Let’s start with something simple but sometimes very useful. Working as a designer, I bump into custom bullet design requests pretty often. It’s used to highlight some points and attract users’ attention. Here are three situations when I need whether a custom bullet color, a shape, or an icon. I use the following for that.
Do some initial settings before applying custom bullets:
If you want to use a custom icon for your bullets, you will not even need a custom code. Use a background image with custom size and positioning for that.
I use these list icons. Feel free to duplicate them.
By default, textareas can be resized both horizontally and vertically. Resizing textareas horizontally usually breaks the markup layout. That's why I prefer to disable horizontal resizing. If needed, you can disable resizing completely — just add this little CSS snippet to your page:
It’s good to know that Webflow is working on the new feature allowing us to create custom breakpoints. You’ll be able to create styles for various screen resolutions out of Webflow standard list. You may find this feature especially useful for big screen resolutions like 27-inch 4K monitors.
At the moment if you want to apply custom CSS styles only for certain resolutions, use the following code snippets:
Styles will be applied for resolutions more than 1440px
Webflow default tablet breakpoint. Styles works on resolutions from 768px to 992px.
Webflow default mobile landscape breakpoint. Styles works on resolutions from 480px to 767px.
Webflow default mobile breakpoint. Styles works on resolutions up to 479px and covers all mobile devices in portrait orientation.
Sometimes, when you use a custom JS code, you would rather run that code only for certain resolutions. It works similar to the CSS example above but with different syntax.
You could notice that font type looks different in a design tool like Figma, Sketch, etc. and on-screen after implementation. Text looks very different, depending on whether subpixel rendering, standard antialiasing, or no smoothing at all is used. Unfortunately, various operating systems and even browsers have different smoothing settings. However, you can keep it under your control by adding the following code to your project. In most cases, the middle smoothing level antialiased works well, but you can play around with that property using the strong smoothing level subpixel-antialiased or disable it with the none value.
Follow us on the Web to get more code snippets and tricks! Feel free to share custom scripts you use, or let us know if you are having any issues with Webflow and we will do our best to help you!
See you in the next episode!