Answers.Body: <p>Alternatively, use the custom CSS option.</p>
  <p>At <code>Administer &gt; System Settings &gt; Resource URLs &gt; Custom CSS URL</code> enter eg <code>[civicrm.files]/css/tweaks.css</code></p>
  <p>Create <code>tweaks.css</code> with content:</p>
  <pre><code>/* Make dashboard a single column */
  #civicrm-dashboard &gt; .crm-flex-box &gt; .crm-flex-2 {
    min-width: 100% !important;
  }
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-12T23:32:05.317Z
Answers.Text: Perfect! Nice and simple. In this case I'm only loading my custom CSS file on the front-end of the site courtesy of WP Admin Utilities so I'm using this simple extension to add styling to the dashboard: https://github.com/andyburnsco/smartbe.
Answers.UserDisplayName: Andy Burns
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-16T11:18:43.563Z
Answers.Text: Credit to Coleman for a version of this when I asked the same question previously!
Answers.UserDisplayName: Aidan
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-12T23:04:43.220Z
Answers.LastActivityDate: 2021-08-12T23:04:43.220Z
Answers.UserDisplayName: Aidan
Answers.Body: <p>Edit: this solution was to support the 2-columns for those who still wanted it. To force 1-column, Aidan's answer is much simpler indeed.</p>
  <p>You probably don't want to install this extension, because it also does questionable tweaks to contributions forms, but there is a JavaScript snippet that you might find useful:</p>
  <p><a href="https://github.com/coopsymbiotic/coop.symbiotic.symbioticux/blob/master/js/dashboard.js" rel="nofollow noreferrer">https://github.com/coopsymbiotic/coop.symbiotic.symbioticux/blob/master/js/dashboard.js</a></p>
  <p>It's loaded from the main php file:</p>
  <pre><code>
  /**
   * Implements hook_civicrm_dashboard().
   */
  function symbioticux_civicrm_dashboard($contactID, &amp;$contentPlacement) {
    Civi::resources()
      -&gt;addStyleFile('coop.symbiotic.symbioticux', 'css/dashboard.css')
      -&gt;addScriptFile('coop.symbiotic.symbioticux', 'js/dashboard.js');
  }
  </code></pre>
  <p>Although I'm pretty sure the CSS is not required. It's to hide things like the repeating pager in report dashlets, and other small tweaks.</p>
  <p>This dashboard bug has been a long time annoyance for me - the dashboard rarely looks good with two columns - but I'm not sure what a good fix might be.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-12T16:51:16.173Z
Answers.LastActivityDate: 2021-08-13T18:33:50.753Z
Answers.LastEditDate: 2021-08-13T18:33:50.753Z
Answers.UserDisplayName: bgm
Body: <p>This used to be achieved with the code linked but since the dashboard code was heavily revised in Civi 5.33+? the old code doesn't work. Ref: <a href="https://forum.civicrm.org/index.php%3Ftopic=24355.0.html" rel="nofollow noreferrer">https://forum.civicrm.org/index.php%3Ftopic=24355.0.html</a></p>
  <p>My admittedly hacky solution is to add this CSS, which does work cosmetically but if a user doesn't already have a dashlet in your dashboard, they won't be able to add one.</p>
  <pre><code>.crm-container .crm-flex-box {display: inherit;}
  </code></pre>
  <p>How can I make this work better?</p>
  <p>I don't particularly find the 2 columns useful to viewing many dashlets, but this would be a good feature improvement that could be a setting per site? Maybe per user?</p>
  <p>Related: <a href="https://civicrm.stackexchange.com/questions/38718/getting-a-two-column-dashboard-in-civicrm-5-33">Getting a two-column dashboard in CiviCRM 5.33+</a></p>
  
Tags: <dashboard><css><dashlet>
Title: Make CiviCRM dashboard full-width
ThreadText: # Make CiviCRM dashboard full-width
  
  (Asked by: username_0 on 2021-08-12)
  
  This used to be achieved with the code linked but since the dashboard code was heavily revised in Civi 5.33+? the old code doesn't work. Ref: <https://forum.civicrm.org/index.php%3Ftopic=24355.0.html>
  
  My admittedly hacky solution is to add this CSS, which does work cosmetically but if a user doesn't already have a dashlet in your dashboard, they won't be able to add one.
  
  ```
  .crm-container .crm-flex-box {display: inherit;}
  
  ```
  
  How can I make this work better?
  
  I don't particularly find the 2 columns useful to viewing many dashlets, but this would be a good feature improvement that could be a setting per site? Maybe per user?
  
  Related: [Getting a two-column dashboard in CiviCRM 5.33+](https://civicrm.stackexchange.com/questions/38718/getting-a-two-column-dashboard-in-civicrm-5-33)
  
  **Tags:** dashboard, css, dashlet
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_1 on 2021-08-12. Score: 2 | Accepted answer
  
  Alternatively, use the custom CSS option.
  
  At `Administer > System Settings > Resource URLs > Custom CSS URL` enter eg `[civicrm.files]/css/tweaks.css`
  
  Create `tweaks.css` with content:
  
  ```
  /* Make dashboard a single column */
  #civicrm-dashboard > .crm-flex-box > .crm-flex-2 {
    min-width: 100% !important;
  }
  
  ```
  
  > **Comments:**
  > **username_0**: Perfect! Nice and simple. In this case I'm only loading my custom CSS file on the front-end of the site courtesy of WP Admin Utilities so I'm using this simple extension to add styling to the dashboard: https://github.com/andyburnsco/smartbe.  
  > **username_1**: Credit to Coleman for a version of this when I asked the same question previously!  
  
  ---
  
  ### Answer by username_2 on 2021-08-12. Score: 2
  
  Edit: this solution was to support the 2-columns for those who still wanted it. To force 1-column, username_1's answer is much simpler indeed.
  
  You probably don't want to install this extension, because it also does questionable tweaks to contributions forms, but there is a JavaScript snippet that you might find useful:
  
  <https://github.com/coopsymbiotic/coop.symbiotic.symbioticux/blob/master/js/dashboard.js>
  
  It's loaded from the main php file:
  
  ```
  
  /**
   * Implements hook_civicrm_dashboard().
   */
  function symbioticux_civicrm_dashboard($contactID, &$contentPlacement) {
    Civi::resources()
      ->addStyleFile('coop.symbiotic.symbioticux', 'css/dashboard.css')
      ->addScriptFile('coop.symbiotic.symbioticux', 'js/dashboard.js');
  }
  
  ```
  
  Although I'm pretty sure the CSS is not required. It's to hide things like the repeating pager in report dashlets, and other small tweaks.
  
  This dashboard bug has been a long time annoyance for me - the dashboard rarely looks good with two columns - but I'm not sure what a good fix might be.
  
  
  ---
  
  