検索結果の画像が小さいのをなんとかしたい

CSSなんもわからん

本職の人になんとかしてもらった

elz@6elz

↑ CSS はこれ

一番優先度高くなるようにケツについかすればいけるはず

一応セレクタで既存の CSS より優先度高くなってるはず

画像も大きくなって、文字もちゃんと読める

デザインも通常のタグ表示(grid)のときとあまり変わらず違和感がない

ｽｹﾞｪ！！！

表示倍率100%

https://gyazo.com/1c35e2c99be668084b3ec46bea5b11fe

表示倍率130%

拡大しても壊れないのしゅごい

https://gyazo.com/2b9e7668f7c6f879633d77ecdece4468

スマホでも崩れてないとか魔法では？

https://gyazo.com/492644c90afdd041b80c819e6c5c3a0a

以下自分で調査したけどあんまり約に立たなかったやつ

環境

firefox123.0.1のF12（dev-tools？）で確認

これ1つのサイズがwidth147px、height161pxに設定されている

https://gyazo.com/6948d7e4a01a6a5cb4d13f261924dde3

検索結果の画像は50pxしかなかった

https://gyazo.com/04ff18c328d424b695196a689267c536

上の検索結果にてセレクタや値を確認した

この辺に追加したり、調整したら良さそうというのがわかった

cssパスをコピーしただけなので、まだcssとしてフォーマットは正しくない

code:css

/* flexboxにする */

html body div#app-container div.app div.container div.search-result-list.clearfix ul.list

display: flex;

flex-wrap: wrap;

/* 幅 */

html body div#app-container div.app div.container div.search-result-list.clearfix ul.list li.page-list-item.list-style-item

width: 50%;

/* アイコン */

html body div#app-container div.app div.container div.search-result-list.clearfix ul.list li.page-list-item.list-style-item a div.icon

width: 150px;

max-height: 150px;

/* 内容の高さ */

html body div#app-container div.app div.container div.search-result-list.clearfix ul.list li.page-list-item.list-style-item a

min-height: 170px;

/* 文字開始位置 */

html body div#app-container div.app div.container div.search-result-list.clearfix ul.list li.page-list-item.list-style-item a div.content

margin-left: 170px;

上を適用すると

https://gyazo.com/d1b48bccd1d66ab1c97a2f93fc206d66

初期↓

https://gyazo.com/cf9102fdb9c32283039311e92e4ceb3d

適用後は間延びしてダサい

きっとプロがいい感じにしてくれる

あとスマホはわからん