This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

How can I add @media query on PageBuilder custom css

Open 3 replies customizationpluginplugin-page-builder
Luca Ponte Bove anónima
8 years ago · Last reply by Alex S 8 years ago

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.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

3
  1. Alex S Staff 8 years, 10 months ago

    Hi Luca,

    Okay so the CSS Styles field you’re using only supports inline styles. So in other words, this will work:

    color: #0f0;
border-top: 2px solid #00f;

    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.

  2. Luca Ponte Bove anónima 8 years, 10 months ago

    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?

  3. Alex S Staff 8 years, 10 months ago

    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.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread