トップページcssに関して

Question

お世話になります。
現在作成している店舗トップページのcssの記述をご教授いただきたいです。

key_visual_wrapper内に、サムネイル画像を横並びにしているのですが、そのサムネイル画像の余白をなくし、その横のスライドバナー、その下のカラークーポンとぴったりくっつくようにするには、どのように記述したらよいでしょうか。
769px以下、520px以下の記述も併せて教えていただけますと幸いです。
520px以下のときはスライダー下にも余白が開いてしまうので、そこも余白0になるような記述を教えていただきたいです。

URLは以下のものになります。
https://intp.site/389/test/

Answer

ECマスターズの伊藤です。

> key_visual_wrapper内に、サムネイル画像を横並びにしているのですが、そのサムネイル画像の余白をなくし、その横のスライドバナー、その下のカラークーポンとぴったりくっつくようにするには、どのように記述したらよいでしょうか。

対象のimg に
display : block
を適用いただきますと、余白が消えるかと主ますので、
ご確認をお願いいたします。

Answer

imgにblockを入れたのですtが。消えない余白はどのようにしたらよいでしょうか。
また、769px以下のときにできる余白はどう消したらよいでしょうか。

Answer

ECマスターズの伊藤です。

> imgにblockを入れたのですtが。消えない余白はどのようにしたらよいでしょうか。

失礼しました
> その下のカラークーポンとぴったりくっつくようにするには、
こちらの部分を見落としておりました。

.key_visual_wrapper .key_left{
     flex: calc( 20% - 3px) 0 0;
}

の　3px　を -1px　にしていただくといかがでしょうか。


> また、769px以下のときにできる余白はどう消したらよいでしょうか。

https://ec-masters.gyazo.com/835e229194cb5e6755b74a73575a3cb4

こちらはimgタグにdisplay : blockを入れていただくことで
ご対応可能かと思いますので、ご確認くださいませ。

Answer

ありがとうございます。display:blockで解決したのですが、サムネイル画像が少し右にはみ出しているのはどのように調節したらよいでしょうか。

Answer

.key_visual_wrapper .key_left{
flex: calc( 20% - 3px) 0 0;
}

の　3px　を -1px　にしていただくといかがでしょうか。


こちらですが、-1pxだと間がまた空いているので+1pxにしたのですが、画面幅を小さくしていくとスライダー画像下に隙間ができてしまうのですがそちらはどうにもならないでしょうか。

Answer

ECマスターズの伊藤です。

> ありがとうございます。display:blockで解決したのですが、サムネイル画像が少し右にはみ出しているのはどのように調節したらよいでしょうか。
> こちらですが、-1pxだと間がまた空いているので+1pxにしたのですが、画面幅を小さくしていくとスライダー画像下に隙間ができてしまうのですがそちらはどうにもならないでしょうか。

何度も申し訳ありません。

.key_visual_wrapper .key_left 
.key_visual_wrapper :nth-child(2)

を、下記のとおりに修正でいかがでしょうか。

.key_visual_wrapper .key_left {
    width: initial;
    flex: calc( (100% / 5)) 0 0;

.key_visual_wrapper :nth-child(2) {
    flex: calc( (100% / 5) * 4 ) 0 0;

Answer

imgにdisplay: blockを入れるとaタグ(ホバー時にopacity: 0,7を入れている)内のimgがホバー時の記述が効かなくなってしまうのですが、………（省略）………
ログインして全文を読む

Answer

ECマスターズの伊藤です。

> imgにdisplay: blockを入れるとaタグ(ホバー時にopacity: 0,7を入れている)内のimgがホバー時の記述が効かなくなってしまうのですが、そちらはどのように対処したらよいでしょうか。

a:hover img{
    opacity: 0.7;
}

のようにしていただくといかがでしょうか。
(19:52 内容修正）

Answer

ありがとうございました。