Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Based on a previous thread I tried to use the following code to hide the site-builder component when a media device is used:
@media screen and (max-width: 960px) {
.widget_text { display: none !important; }
}
I’m using the following process to define the CSS: Edit (on the component)-> Widget Class (I entered a name for the class) -> Mobile CSS Declarations (Entered the CSS code above here).
Is this process correct, because the CSS does not take effect.
Any assistance regarding the matter will be greatly appreciated.
Kind regards,
Reinhard Behrens
Hi Reinhard
Thanks for reaching out.
A declaration is made up of a property and a value. For example,
coloris a property andredis a value.color: redhttps://www.w3schools.com/css/css_syntax.ASP
Your example above is a CSS rule or ruleset wrapped in a media query.
I wrote a short guide on this topic Post: A Custom CSS Guide to Page Builder Row, Cell & Widget Attributes.
The CSS in your question should be inserted at AppearanceCustom CSS if you’re using SiteOrigin CSS. Finally, edit the widget in question and insert
widget_textwithout a period in the CSS Class field.SiteOrigin Premium includes a Toggle Visibility addon to make this process easier, more on the Toggle Visibility addon at the following link Page: Toggle Visibility.
Thank you Andrew, I installed the SiteOrigin CSS editor and added the exact line of text in my original CSS and the component was disabled when I shrunk my browser. Thank you very much for the quick response and in-depth answer.
Have an awesome day!
Super, glad to hear you’re making progress. All the best with your website.