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].
Hello.
I love your PageBuilder but there is one thing I would like to do and can’t find the way to do it.
I’d like to hide my background image when I view the page in a smaller resolution.
I’m using ‘Black Studio TinyMCE Widget’ to add a visual editor to each row (but I also tried with the default text editor widget)
and I tried adding under ‘Widget Styles->Attributes->CSS Styles’ this code:
@media (max-width:600px){
background-image:none !important;
}
But it doesn’t work.
This works:
background-image:none !important;
But not the media query, it just ignores it.
Any hints as to how to go about doing this?
Thanks.
Hi Luca,
Okay so the CSS Styles field you’re using only supports inline styles. So in other words, this will work:
But this won’t:
@media (max-width: 780px) { .content { color: #0f0; border-top: 2px solid #00f; } }Does that make sense? You’ll need to add the CSS via an alternative method. Please open the widget you would like to remove the CSS from on mobile and set the Widget class (Widget Styles Sidebar > Attribute > Widget Class) to mobile-remove_background and then save. Please navigate to WP AdminAppearanceCustom CSS and add the following CSS:
@media (max-width: 780px) { .mobile-remove_background { background-image:none !important; } }You might also need to install the SiteOrigin CSS Editor.
Hello Alex.
Thank you I did download the plugin SiteOrigin CSS Editor and was able to insert the code I wanted.
One question though, how does the CSS hierarchy work with the plugin? I’m using a child theme, so I’m guessing
plugin -> child -> Original theme?
Will I run into any problems if I update the original theme?
Hi Luca,
SiteOrigin CSS is always (outside of a few specific cases) output after the Theme and Child theme CSS so you don’t really need to worry updating the parent theme.