1. Support
  2. Knowledge Base
  3. FAQ
  4. How to align the widgets on the front page of MH Magazine

When you are using our popular MH Magazine WordPress theme, you can use the included widgetized “Homepage” template to create awesome magazine like front pages within a few minutes just by placing widgets via drag & drop in your WordPress dashboard under “Appearance => Widgets”. The widgets will appear automatically on your static front page and will be aligned within the specified widget locations on the “Homepage” template.

Alignment of Widgets in Widget Areas “Home 8, 9 and 10”

In most cases people like to use the widget areas “Home 8, 9 and 10” of the widgetized “Homepage” template to display articles based on categories. For this purpose you can use the “MH Custom Posts” widget and when you place one widget in each widget area, you don't have to take care of the alignment, as everything will be aligned automatically.

But when you decide to place multiple widgets in the widget locations “Home 8, 9 and 10”, the widgets in each widget location will be placed on top of each other and in case a widget is longer than the rest (e.g. because of long titles or excerpts), it will also affect the widgets that are placed below that widget and the widgets won't have a consistent alignment anymore.

Widget Alignment
Inconsistent Titles or Excerpts can affect the Widget Alignment

How to adjust the Widget Alignment?

The most common reasons why people usually have issues with the widget alignment are extensive post titles, inconsistent excerpt lengths or inconsistent images sizes. These things can easily be managed by the user when keeping a few things in mind:

  • Use short and effective titles (10-70 characters long, including spaces)
  • Make sure you have consistent excerpt lengths for your articles
  • Regenerate your thumbnails for consistent image sizes

You can manage the excerpt lengths in the widget settings of each “MH Custom Posts” widget to do some fine-tuning regarding the widget alignment. But actually most people like the way how the widgets are aligned out-of-the-box (see examples in our showcase). In case you have taken care of the mentioned steps and are not happy with the alignment of your widgets, you can either just place one widget in each of the widget areas “Home 8, 9 and 10” of MH Magazine or you can manually adjust your content (e.g. shorten titles, modify excerpts, etc…).

Shorten Titles of “MH Custom Posts” Widget with CSS

There are users who have 3-4 rows of widgets in the widget locations “Home 8, 9 and 10” and in that case it's actually almost impossible to 100% align everything. But as mentioned before, most people like the default alignment because when you have several rows of widgets, you will have a grid effect on your site (like e.g. Pinterest). But in case you don't like it, you could limit the post titles of the “MH Custom Posts” widget to one line with some custom CSS, for example:

.cp-xl-title { 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden;
}

You can add custom CSS code in your WordPress dashboard under “Appearance => Customize => Custom CSS”. All custom CSS that is added in the theme options panel of MH Magazine WordPress theme, won't be affected by theme updates.

Was this article helpful?

Related Articles