Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Overriding a CSS value in a WordPress website

Been creating a website recently with Elementor.

I have a line of code in the source code of the website saying

img 
{
    height:auto;
}

Is there any way to add custom css to the website to ignore this line of code and somehow override it?

Tags:

2

Answers


  1. 0

    Yes, via the customizer in WordPress you can.

    Navigate inside the wp-admin to:

    display -> customizer -> extra CSS

    Then inside the textarea just put

    img 
{
    height: 200px; // whatever you wanna overwrite it with
}

    Don’t forget to click publish!

    Or if you have access to the theme editor, you can edit the CSS file there, you can find it under

    wp-admin -> display -> Theme editor

    Then try to locate the source file where that line of code has been defined.

    You can locate the source file by looking in your element inspector using any browser. It will show you which file has that line of code and on which line you can find it.

    Login or Signup to reply.
  2. 0

    Following @Red instructions for adding extra CSS on WordPress, you can also override it by using !important, you can use it everywhere, also before the first declared css as i made in this snippet.

    img {
  height:50px !important;
}

img {
  height:auto;
}
    <html>
  <img src="https://www.adslzone.net/app/uploads/2019/04/borrar-fondo-imagen.jpg">
</html>

    Without !important you need to collocate your new css after the one you want to override.

    img {
  height:auto;
}

img {
  height:50px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search