スライドショー画像の大きさが変わらない

Question

こんばんは。

スライドショー画像部分の大きさが変わりません。

レスポンシブ対応で、スマホ、アイパッド、PCサイズでWEBページを作成中ですが、
ページの途中にある三枚の画像スライドショーのサイズが変わってくれません。
PＣサイズのみ、小さくし、スマホやアイパッドではすぐ下に来ている文章を
横にもっていきたいです。
ちなみにどのデバイスサイズでも、スライドショー画像の大きさは変わってくれません。

どなたかご教授いただければ幸いです。

ＨＴＭＬ

    <ul class="slider_fade">
        <li><img src="./images/ohuse.png" alt="オフセット印刷機" class="ohu"></li>
        <li><img src="./images/onde.png" alt="オンデマンド印刷機" class="on"></li>
        <li><img src="./images/hei.png" alt="平圧印刷機" class="heia"></li>
    </ul>

<p class="slider_text">ああああああああああああああああああああああ
</p>

CSS

.slider_fade {
    height: 233px;
}

.slider_fade > li {
  position: absolute;
  list-style: none;
  visibility: hidden;
  animation: anime_slider_fade 12s 0s infinite;
  width: 70%;
  margin: 0 auto;
}
.slider_fade > li:nth-of-type(2) {
  animation-delay: 4s;
}
.slider_fade > li:nth-of-type(3) {
  animation-delay: 8s;
}

@keyframes anime_slider_fade {
  0% {
      visibility: visible;
      opacity: 0;
  }
  15% {
      opacity: 1;
  }
  33.3% {
      opacity: 1;
  }
  48.3% {
      opacity: 0;
  }
  100% {
      opacity: 0;
  }
}

色々widthの数値を入れてみましたが、変わりません＞＜
どなたかお願いいたします、、

Answer 1

PＣサイズのみ、小さくし、スマホやアイパッドではすぐ下に来ている文章を

横にもっていきたいです。

slider_textというクラス名から推測すると、スライダーとテキストは組になっているのですよね。
ならば、スライダーとテキストをdivで囲んで、それに display: flex; を設定して、メディアクエリで行方向に並べるか、列方向に並べるか切り替えたらどうでしょう。

<div class="slider_container">
  <ul class="slider_fade">
    <li><img src="./images/ohuse.png" alt="オフセット印刷機" class="ohu"></li>
    <li><img src="./images/onde.png" alt="オンデマンド印刷機" class="on"></li>
    <li><img src="./images/hei.png" alt="平圧印刷機" class="heia"></li>
  </ul>
  <p class="slider_text">ああああああああああああああああああああああ
  </p>
</div>

.slider_container {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 768px) {
  .slider_container {
     flex-direction: row;
  }
  .slider_fade {
    width: 70%;
  }
}

レスポンシブ対応で、スマホ、アイパッド、PCサイズでWEBページを作成中ですが、

ページの途中にある三枚の画像スライドショーのサイズが変わってくれません。

img要素のサイズを設定する必要があります。
例えば、

.slider_fade > li > img {
  width: 100%;
  height: 233px;
  object-fit: cover;
}

また、スライダーのサイズもPCとモバイルで変更する必要があります。
具体的にどのようなサイズなのか不明なので、適当に設定したサンプルです。（PCで幅70%、モバイルで幅!00%、高さは固定）
あとは、お好みで調整してください。

CodePenサンプル

Comments

[AyakaFujimoto]

hatena19様
コメントありがとうございます。
ご教授いただいた方法でやってみると、調整しながらできそうです！
本当にありがとうございました！＞＜