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
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
-
Read the question please, This css is located in pub/static. Its not a theme css, its preproccessed.– MarounJan 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
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