0

I am trying to modify some CSS files in my Porto theme in Magento 2.3.5pt-2. When modifying the CSS in pub/media/porto/web/css/custom.css I am not seeing any changes. I am in developer mode, I have run static content deploy and cleared cached but nothing shows on frontend until I clear my browser cache. Is there a better way to modify CSS in Magento2 with out having to clear browser cache every time?

I am modifying the CSS in pub/media/porto/web/css/custom.css. Should I be modifying these theme CSS files somewhere else like in app/design/frontend/Smartwave/porto? Where is the best place to add CSS to modify your theme?

Trying to add this CSS

.sidebar .product-items .product-item-info .product-item-photo { width: 100%; }
.sidebar .product-items .product-item-info .product-item-photo img { max-width: 100% !important; width: 100%; }
.block.related .owl-stage, 
.block.related .owl-stage .owl-item { width: 100% !important; }

.products.list .product-item-photo a { display: block; }

.page-products .product-image-photo.default_image {
    width: 100% !important;
}

.category-image img  {
    width: 100% !important;
}

Change in my dev environment are only reflected until clearing browser cache. Any help would be much appreciated.

Improve this question

1 Answer 1

Reset to default
1

First of all never modify files in Pub directory.

pub/media/porto/web/css/custom.css this file is autogenerated file if you modify anything here it will be reverted once you run setup:upgrade or setup:static-content:deploy

Yes you should modify css from here app/design/frontend/Smartwave/porto/web/css

if css not reflecting then please one run

php bin/magento setup:upgrade

I am not suggesting to use "php bin/magento setup:static-content:deploy" this command while on developer mode but if you can't se updates instantly then its something wrong with your symlink generation and you have to run "php bin/magento setup:static-content:deploy"

and after that whatever chaange you made in your theme will be autogenerate in pub directory.

Improve this answer
5
  • HI @Gohil Rajesh. Thank you for the help. I moved the CSS code to app/design/frontend/Smartwave/porto/Magento_Catalog/web/css/source/_module.less. I agree, thats a better place. I will say I am confused by pub/media/porto/web/css/custom.css file because this file came with my porto theme and I do not think its auto generated. However I agree, that it's better to put it in app/design folders. Also, making any changes to CSS on my site, it will not show the changes until browser cache is cleared. Even after running rm folders running static content deploy and clearing Magento cache.
    – Jonathan
    Commented May 27, 2021 at 3:40
  • Working on my localhost. The only way to make Css changes appear is clearing chrome browser cache. Which is slow. There has to be better way. I need to look into gulp. But I rm folders, then run all magento commands but nothing changes until I clear browser cache on computer. On my staging instance however which is on a Linux AWS Server. If I rm folders, run setup:upgrade and run all Magento commands. It will take CSS changes with out clearing browser cache. But the only way to see CSS changes on my Linux Server Instance is to rm folders and run all commands. Which is slow.
    – Jonathan
    Commented May 27, 2021 at 17:43
  • Should I Allow Symlinks from NO to YES and run bin/magento dev:source-theme:deploy? on my local host?
    – Jonathan
    Commented May 27, 2021 at 21:06
  • 1
    If you are on AWS then may be CLoudfare enabled on your server so Instant change not applying. please disable or set developer mode in cloudfare and check it
    – Gohil Rajesh
    Commented May 28, 2021 at 3:16
  • Thank you. I will check that.
    – Jonathan
    Commented May 28, 2021 at 15:00

Your Answer

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

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