Since a couple of months I am not developing Wordpress websites with Flatsome anymore but today, I have decided to put it togheter in a document many CSS tricks and fixes that I used most during the past year as a farewell gift for the Flatsome Community.
1. I will not be responsible for any broken website, you should be able to read and understand what you are going to paste into your editor before copying any snippet, this document is not intended to people first approaching CSS editing, it just wants to be an incentive to CSS basic properties editing.
2. I do not guarantee that those CSS snippets will work on your website, what I can tell you is that I took them from my Flatsome working websites. Sometimes you can find a note written below the snippet title, explaining which setting in Flatsome's options you will need to set in order to have the snippet working.
3. The snippets basically contain fixes and basic customization for the most important elements like menu, header, columns, slider... To edit the colours you will need to enter your custom color HEX codes (you can pick them from https://htmlcolorcodes.com/), to edit borders, spacings, font sizes you will need to enter the value in pixels or em. For some snippets you won't have to touch any property (e.g. snippets to disable some feature). To be sure that you know which snippets you have to modify the values, you will find on the right of the property a note saying e.g. "change color", if not you will just have to paste it as it is.
4. I have divided the document in two main sections, the first one: "All screens" contains all the snippets that apply to all the breakpoints, they should be pasted and edited in the first section of Flatsome Custom CSS, then the second one "Tablet and Below" contains all the snippets which will edit the tablet and mobile specific CSS and should be edited or pasted in the second or third section depending on where you want to apply the styles.
Just check for the snippet you are interested for, read it carefully, check which properties you will have to edit and paste it in the right CSS editor section. Then edit it and preview it in your browser. In case you are interested in more snippets, do the same, just read, past and edit it one by one. Why? Because in case you have issues, you know which snippet is responsibile and you can easily identify and remove it. You can also paste them directly in your broweser inspection and try them live without modifying your current theme settings.
Do not copy past the entire document in your text editor, you will break your design 100%.