5

I want to adjust the entire width of the Luma or Blank theme (I prefer Blank theme).

What is the best way to do this?

enter image description here

4

Best way to increase width of the entire theme is by overriding value of @layout__max-width variable. Look into lib/web/css/source/lib/variables/_layout.less file which controls

//  Widths
@layout__width: ''; // for the fixed width layout
@layout__max-width: 1280px;
@layout-indent__width: 20px;
@layout__width-xs-indent: 15px;

you can override value e.g. @layout__max-width: 1400px; in theme override file e.g.

app/design/frontend/Vendor/theme/web/css/source/_theme.less

1
2

The best way to do this is create your own theme that inherits the luma theme.

You can create a theme like this (no point in copy/pasting that whole page , just follow it step by step):

Create own theme in Magento 2

Keep in mind that in your theme.xml you don't want to have the parent set to blank but to luma like this :

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
     <title>New theme</title> <!-- your theme's name -->
     <parent>Magento/luma</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
     <media>
         <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
     </media>
 </theme>

After you done so go to Content->Design->Configuration and choose your theme within the website/storefront that you want to implement it.

After you have done that you can make changes to the css of your theme.

Create a web/css/source folder. Within this folder you can create your own .less files that it will compile to css when you delete your /var folder and /pub/static folder and regenerate your static files.

Its a good practice to create a _extend.less when you want to make new css stylings that you added to your .pthml files

If you just want to edit the existing css of Magento you can just overwrite them in a _theme.less file.

These will be compiled within the styles-l.css and styles-m.css so your storefront still loads that 1 file (and thus reduces load time of your website because you didn't add files to load in).

In you case you want to create a '_theme.less' file within your created source directory and add the following code :

 #maincontent{
max-width : 100%;
}

You can create paddings (i suggest you create paddings for it) in that how you want to overwrite the settings of .page-main class.

Also i recommend people to use Bootstrap 4 and implement that in their sites to have some content management but that another topic.

I hope this is enough information for you

6
  • Hi thank you for your answer but #maincontent will adjust the width of main column, I need the entire theme width this include header, footer ...
    – Robert
    Oct 29 '17 at 7:49
  • Then you need to use the class page-wrapper Oct 29 '17 at 15:20
  • but thats already 100% width. If you want to delete the paddings on the nav menu and max-width you need to go over every class and overwrite the stylings like i said. There is no 1 thing for that. A good start is to have the class "content" its style set to width 100% and max-width 100% Oct 29 '17 at 15:23
  • If you feel like this helped you out don't forget to check it as an answer and give it a thumbs up ;) Oct 29 '17 at 15:32
  • of course, for sure
    – Robert
    Oct 29 '17 at 15:34

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.