DAWNのブログ記事のタイトルを中央寄せにする方法

Shopifyのテーマ「DAWN」のブログ記事セクションで、タイトルはデフォルトでは左寄せになっています。

カスタムCSSでh2要素に text-align: center; を適用しても中央寄せにはなりません。その理由は、親要素の.title-wrapper-with-linkに display: flex; が適用されているためです。

この問題を解決するために、カスタムCSSで親要素の display を block に上書きします。これにより、h2要素が中央寄せされるようになります。

.title-wrapper-with-link {
　　　display: block;
}

ただし、この変更をそのまま適用すると、モバイル表示でレイアウトが崩れる可能性があります。元々の display: flex; は、モバイル表示で「ブログ記事のタイトル」と「すべてを表示する」ボタンを横並びにするために設定されているためです。

モバイル表示でのレイアウト崩れを防ぐために、メディアクエリを使用して特定の画面幅以上でのみ display を block に変更するようにします。以下のように min-width を設定すると良いでしょう。

@media screen and (min-width: 990px) {
　.title-wrapper-with-link {
　　　　　display: block;
　　}
}

この設定により、画面幅が990px以上の場合のみ display: block; が適用され、それ以下の場合は元の display: flex; が維持されます。