ここから本文です

既存のサイトでレスポンシブで作成しています。 パソコン・ipadでは同じレイアウ...

rup********さん

2018/8/3018:19:36

既存のサイトでレスポンシブで作成しています。
パソコン・ipadでは同じレイアウトで表示されますが、
スマホではレイアウトが崩れて表示されます。

前任者から引き継いだので、どこを変更すればよいかわかりません。
只今、WEBを勉強中です。助言いただけると助かります。
関連性があるソースを掲載しております。

「PHP」

<ul class="list mod_column01 cf">
<li>
<h3 class="tit"><span>たたたたたたたた</span></h3>
<img class="pic" src="<?php echo get_stylesheet_directory_uri(); ?>/img/img_01.png" alt="image">
<p class="txt">あああああああああああああああああああああああああああああ</p>
</li>
</ul>

「CSS」

/*! mod_column01
================================================ */
.mod_column01 { overflow: hidden; }
.mod_column01 li { display: block; float: left; width: 50%; border: solid 1px #e3e4e6; border-top: 0; background: #fff; }
.mod_column01 li:nth-of-type(1) , .mod_column01 li:nth-of-type(2) { border-top: solid 1px #e3e4e6; }
@media (min-width: 600px) { .mod_column01 li { width: 49.99%; } .mod_column01 li:nth-of-type(3) { border-top: solid 1px #e3e4e6; } }
@media (max-width: 599px) { .mod_column01 li:nth-of-type(even) { border-left: 0; } }
@media (min-width: 600px) { .mod_column01 li:not(:nth-of-type(3n+1)) { border-left: 0; } }
.mod_column01 li .tit { display: table; width: 100%; background: url(../img/bg01.png) repeat 50% 50%; background-size: 46px; text-align: center; }
@media (min-width: 600px) { .mod_column01 li .tit { min-height: 60px; } }
.mod_column01 li .tit span { display: table-cell; color: #fff; font-weight: 700; vertical-align: middle; letter-spacing: 0; }
@media (min-width: 600px) { .mod_column01 li .tit span { line-height: 1.39; font-size: 1.8rem; } }
@media (max-width: 599px) { .mod_column01 li .tit span { height: 30px; } .mod_column01 li .tit .lineTwo { height: 60px; } .mod_column01 li .tit .lineThree { height: 80px; } }
.mod_column01 li .txt { padding: 15px 10px; }
@media (min-width: 600px) { .mod_column01 li .txt { padding: 25px 30px; } }
/*
#styleguide
mod_column01

mod_column01 li,nth-of-type,tit span,min-width,e3e4e6,コンサル,解析依頼

閲覧数:
46
回答数:
1
お礼:
25枚

違反報告

ベストアンサーに選ばれた回答

por********さん

2018/8/3122:10:31

>助言いただけると助かります。

学習するか委託するかの2択しかないので必要性に合わせて、学習するかコンサルの有るWeb屋等で解析依頼をかけるかを選ぶといいと思います。

この回答は投票によってベストアンサーに選ばれました!

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる