1

I'm on Magento 2.2.4 and I can't figure out how to edit the CSS for the catalog view page. I'm trying to edit

.page-layout-2columns-left .column.main

and

.page-layout-2columns-left .sidebar-additional

so that it's the same width as the layout when you login as a customer.

Sidebars being 22.3% and main content being 77.7%.

I tried adding this code to overwrite in my /Magento_Theme/web/css/source/_module.css but the column.main style is still reading 83.333333% somewhere.

.page-layout-2columns-left {
    .column.main {
        width: 77.7%;
    }

    .sidebar-additional,
    .sidebar-main {
        width: 22.3%;
    }
}

Any help is appreciated.

  • You can also add custom css and add your custom styles there. – Pawan Oct 9 '18 at 2:18
  • @Pawan yes, the code above is the CSS I put but like I said, the column.main is not reading it's width. It's still using the width of 83.333333% somewhere and I'm not sure where. So I was wondering if someone can help with that. – Amy Ling Oct 9 '18 at 16:22
  • I mean custom css in separate custom CSS file. – Pawan Oct 9 '18 at 16:23
  • @Pawan ah okies. Interesting, it worked once I moved it to a different css file. Thank you! – Amy Ling Oct 9 '18 at 16:43
  • Welcome @Amy, Please see my answer. – Pawan Oct 9 '18 at 16:59
0

You can add custom CSS by creating default_head_blocks.xml at :

app/design/frontend/[vendor]/[theme]/Magento_Theme/layout

With following code:

<?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" />
     </head>
</page>

Location of custom.css will be

app/design/frontend/[vendor]/[theme]/web/css/custom.css

Hope above will help

If found suitable, Please accept and Up vote:)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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