0

The preprocessed css [/public_html/var/view_preprocessed/pub/static/frontend/Vendor/Theme_custom/en_US/css] is overriding my custom css file because it have !important. It happens only on the large screens. How to fix it?

2 Answers 2

1

You need to override the .less file that that is being compiled from, and either make the change there, or just remove the !important. Here are the Magento docs for that: https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/css-guide/css_quick_guide_approach.html

2
  • Read the question please, This css is located in pub/static. Its not a theme css, its preproccessed.
    – Maroun
    Jan 19, 2021 at 0:41
  • Right, I understand that. However, if it's being processed, it's coming from somewhere, and that's where the change would need to occur (if your goal was to remove the !important). Glad you figured it out! Jan 19, 2021 at 3:57
-1

I figured out. In case anyone need it:

I created xml file:

app/design/frontend/Vendor/Theme_custom/Magento_Theme/layout/default_head_blocks.xml

    <?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/custom.css" media="screen and (min-width: 768px)"/>
  </head>
</page>

And css file:

app/design/frontend/Vendor/Theme_custom/web/css/custom.css

This overrides the preprocessed css

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.