[kawa]

こんにちは。初めて質問させていただきます。

【お使いの Snow Monkey のバージョン】13.1.2
【お使いの Snow Monkey Blocks のバージョン】10.3.0
【お使いの Snow Monkey Editor のバージョン】4.0.1
【お使いのブラウザ】Google chrome

### 実現したいこと

TOPページに並んである記事一覧の日付の高さを揃えたいです。

### 発生している問題

現状、タイトルの長さが一行の場合と二行の場合で日付の位置がずれます。
これを二行の場合に揃えたいのですが、方法を教えて頂けますでしょうか。
追加CSSで試みましたが、分かりませんでした。

ご教示よろしくお願い致します。

♥ 0

いいねをした人: 居ません

[みしま]

こんにちわ！
自分だったら、こうするかなぁというものになりますが

.c-entry-summary {
	background-color: moccasin;
}
.c-entry-summary__content {
    display: none;
}

などのように、任意の背景色があり、タイトル下に文章がでていない状態であるなら

①まず、タイトルと日付が入っている部分の高さを決めます。
@media (min-width: 40em) {}はタブレット、@media (min-width: 64em) {}はPCでのCSSを指定するイメージです。
@media (min-width: ◯◯em)で囲まずに指定すれば、スマホサイズから適用できるCSSになります。今回はスマホサイズには指定していませんので、必要であれば追記してください。

@media (min-width: 40em) {
	.c-entry-summary__body {
		height: 95px;
	}
}
@media (min-width: 64em) {
	.c-entry-summary__body {
		height: 110px;
	}
}

②タイトルが本来可変の高さなのですが、日付の位置を合わせるために、２行分＋欲しい余白の高さを指定します。

@media (min-width: 40em) {
	.c-entry-summary__title {
		height: 3.5em;

	}
}
@media (min-width: 64em) {
	.c-entry-summary__title {
		height: 2.7em;

	}
}

デベロッパーツールで指定したCSSの数値を変更しながら、プレビューできますので、そこで微調整して得た数値を、追加CSSに指定されるのがいいかと思います。
もともとのレイアウトを変更する指定なので、スマホ、タブレット、PCの各画面サイズでの見え方をデベロッパーツールで確認が必要になるかとは思います。

レスポンシブデザインの確認が簡単に出来るChromeのデベロッパーツールの使い方 | ツール

レスポンシブでWebサイトを制作する際は色々なデバイスの画面幅を考慮し、それらのデバイスできちんとデザインが崩れていないか確認する必要があります。そんな時に使える…

www.site-convert.com

♥ 0

いいねをした人: 居ません

[kawa]

みしま様

ご親切に教えて頂きありがとうございます！
無事に出来ました。

まずタイトルと日付が入っている部分の高さを決めなければならなかったのですね。
それをせずに、別の部分をいじってしまっていたことが上手くいかない理由であったと理解出来ました。

もっと勉強させて頂きます！

また何かありましたらお世話になるかもしれませんが、よろしくお願い致します。

トピックを閉じさせて頂きます。

♥ 2

いいねをした人: 居ません

[キタジマ タカシ]

flex + space-between でもいけるかも？（未検証）

参考：

パネルブロックのリンクボタン位置を揃えたい

タグ: パネルブロック このトピックには4件の返信、3人の参加者があり、最後にtomohananoに…

snow-monkey.2inc.org

♥ 0

いいねをした人: 居ません

[投稿者]

投稿