For better and worse doing dynamic CSS is not the “WordPress way”. If you have a long list of CSS related options that the user may override, you should serve their defaults in a static CSS, and override when needed by inlined CSS.
This can be done with some Customized CSS, which you an insert via the Theme Customization, Additional CSS area. Use developer tools (press F12, or right-click the area and use Inspect Element) to see the CSS class used for the area you want to modify. Then use different margin or padding to position things.
I downloaded the theme and ran a grep on it. It turns out the styles are generated by /inc/scripts/style.php in a function called olivo_lite_get_custom_css. I suppose you could overwrite that function.
You have to put it like this: @media only screen and (min-width: 769px) { #carousel-hestia-generic span.sub-title { font-size: 24px; } } Notice how @media has a block {} which contains the CSS selector you want to work with.
The answer lied in the fact that not the article elements differ, but the body element. So, I added body.archive-jetpack-portfolio article { display: inline-block; width: 300px; vertical-align: top; } to my CSS, and it all looks fine now.
You can simply make your plugin css dependent upon the theme css and the child theme css dependent upon the plugin css. function wpdocs_custom_scripts() { // example theme style wp_enqueue_style( ‘theme-style’, ‘#’ ); // Plugin css wp_enqueue_style( ‘plugin-style’, ‘#’, array( ‘theme-style’ ) ); // see “theme-style” passed in $deps param, // Child theme css wp_enqueue_style( … Read more
Every block has a field for custom CSS classes in the ‘Advanced’ panel:
The <html> tag is probably written in your theme’s header.php file, but you should avoid editing it directly as any change you make will be overwritten if the theme is ever updated. The specific part you are asking to remove is CSS, but you don’t need to edit the theme to make CSS changes. Instead … Read more
You would need to know since when / which change it starts flickering. // you said since the content change. So try to change back step by step until you know which content component exactly causes this. Debug that change which caused that flickering. There are playing a lot of factors in here: Theme, Theme … Read more
What theme are you using? I would probably start with making a child theme. This will give you more control over when styles are loaded. Here is an example of loading the parent theme styles and then your child theme styles. function my_theme_enqueue_styles() { $parent_style=”parent-style”; // This is ‘twentyfifteen-style’ for the Twenty Fifteen theme. wp_enqueue_style( … Read more