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.

Improve this question
5
  • You can also add custom css and add your custom styles there.
    – Pawan
    Oct 9, 2018 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, 2018 at 16:22
  • I mean custom css in separate custom CSS file.
    – Pawan
    Oct 9, 2018 at 16:23
  • @Pawan ah okies. Interesting, it worked once I moved it to a different css file. Thank you!
    – Amy Ling
    Oct 9, 2018 at 16:43
  • Welcome @Amy, Please see my answer.
    – Pawan
    Oct 9, 2018 at 16:59

1 Answer 1

Reset to default
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:)

Improve this answer

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.