スポンサーリンク

[note風スタイル] モバイルサイトでのアイキャッチ画像を横一面にした

とりあえずのメモプログラミングホームページ運用追記予定の話

この記事はまだ検証中ですが、なにかのヒントになることを期待して、記録しています。

noteサイトの記事レイアウトを参考に、アイキャッチ画像の余白をなくすことにしました。

まず、メイン全体の余白(padding)をなくしてから、記事要素に余白(margin)を追加しました。

/** モバイルサイトでアイキャッチの写真を横一面にする*/

@media screen and (max-width: 1023px) {
	main.main {
		padding-right:0px;
		padding-left:0px;
	}
	.entry-content, .entry-footer, .under-entry-content{
		margin-right:16px;
		margin-left:16px;
	}
	.article .entry-title {
		padding-right:16px;
		padding-left:16px;
	}
	.eye-catch img {
		border-color: transparent;
	}
}

タイトル文のh1要素にも、余白(padding)を設定しています。PCで横幅を狭めて表示した場合は、ちゃんと余白が入っているのですが、AndroidのChromeではうまく表示されません。

ブラウザ依存なのでしょうか?要検討ですね。

QRコードを読み込むと、関連記事を確認できます。
[note風スタイル] モバイルサイトでのアイキャッチ画像を横一面にした
タイトルとURLをコピーしました