画像とテキストの相互表示をレスポンシブ対応したいのですが、やり方がわかりません。

プログラミング初心者です。

▶︎やりたいこと
flexboxを使って左に画像、右にテキストと相互表示して、サイズ760以下の時に
上に画像、下にテキストが回るようにしたいのですが、やり方がわかりません。

初歩的な問題だと思われるのですが、どなたかお助けください。。。。

x_x

2018/11/27 09:09

おそらく「レスポンシブ」で検索したかと思いますが、どのあたりでつまずいているのでしょうか？

行動規範の内容に同意します

回答2件

自己解決

コード
/*css PC*/
.box-item {
  display: flex;
  width: 1080px;
  height: 100%;
  margin: auto;
  justify-content: center;
  margin-top: 100px;
  margin-bottom: 100px;
  opacity: 0;
  transition: all .5s ease;
  transform: translate(0, 100px);
}

コード
/*css sp*/
@media screen and (max-width:1080px){
.box-item {
    display: block;
    text-align: center;
  }
}

これで解決できました！

投稿2018/11/27 09:45

編集2018/11/27 09:46

hsd

総合スコア17

HTML
1<link rel="stylesheet" href="mobile.css" type="text/css"
2 media="screen and (max-width: 760px)">
3<link rel="stylesheet" href="pc.css" type="text/css"
4 media="screen and (min-width: 761px)">
5
6省略
7
8<div class="sample">
9<img>ほげほげ<div>あいうえお</div>
10</div>

でsp.cssとpc.cssで切り替えられます。

CSS
1/**sp.css**/
2img.クラス名 {
3width:100%;
4}

CSS
1/**pc.css**/
2/**私の解釈が間違ってなければ**/
3.sample {
4display: flex;
5}
6.sample div {
7display: inline-block;
8margin-right: auto;
9}
10.sample img {
11margin-left: auto;
12}