質問 > フロント機能 > スマホ サムネイル画像 |
フロント機能
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
luceo |
投稿日時: 2019/6/28 23:32
対応状況: −−−
|
一人前 登録日: 2019/5/20 居住地: 投稿: 133 |
Re: スマホ サムネイル画像 akiakihi様
アドバイスいただいた通り入力しましたら 直ぐにサムネイルが表示されました! 本当にありがとうございました! ドットの箇所までのアドバイスもありがとうございました! 私はhtmlとcssの知識が少しある程度なのに 今回ec-cubeにトライしてしまっています。 もっと勉強していきます! 今回の適格なアドバイス本当に 心より感謝しております! もしもし、もうひとつお尋ねできるのであれば 同じくスマホの商品画像なのですが、 スマホサイズで横幅一杯にしたくて 他いただいたアドバイスにより 以下cssを作成しました。 /* メインコンテンツ外枠の横幅固定を外す */ .ec-layoutRole .ec-layoutRole__contents{ max-width: none; /* 1150px; */ } 一瞬、できた気がしたのですが、戻ってしまってしまい。。 どこが間違っているのでしょうか。 引き続きあつましく、申し訳ありません。 |
akiakihi |
投稿日時: 2019/6/29 1:27
対応状況: −−−
|
一人前 登録日: 2014/7/17 居住地: 兵庫県 投稿: 91 |
Re: スマホ サムネイル画像 何度も言うようですが、ブラウザをGoogleChromeにして、F12でデベロッパーツールを使ったほうがいいですよ
htmlの構造がわかりやすいですし、 CSSを変更した結果が、リアルタイムで画面を見ながらわかるので。 .ec-layoutRole__contentsは、ヘッダー下のコンテンツ部分で、もともと幅が100%なので触る必要はないです。 商品詳細のコンテンツは {% block main %}直下 <div class="ec-productRole">の中に入っているんですが、 このdivは左右のpaddingが20pxあるので、この中に入っている限り、左右の空白はなくなりません。 でもだからといって、これのpaddingをなくしてしまうと、それ以下の本文も左右いっぱいに広がってしまって見にくいことになるので、画像部分のみ画面いっぱいに広げたければ、画像部分の記述を<div class="ec-productRole">から出してやればいいんです。 具体的には、画像部分、一個目の<div class="ec-grid2__cell">の中身を <div class="ec-productRole">より上に出してみてください。
で、CSSの記述に.ec-sliderItemRoleを付け足して、左右のpaddingを0にしてみてください。 私自身はEC-CUBE4系を使っていなくて、4系のデモサイトを見ながらデベロッパーツールで確認してみているだけですので、、もしかしたらこれではうまくいかないかもしれませんが、 ヒントにはなるかと思います。 |
luceo |
投稿日時: 2019/6/29 2:37
対応状況: 解決済
|
一人前 登録日: 2019/5/20 居住地: 投稿: 133 |
Re: スマホ サムネイル画像 akiakihi 様
本当にありがとうございました。 ブラウザはGoogleChrome使用していたのですが F12・デベロッパーツールは、初めてでしたので ドリームウエーバーにコピーして編集しておりました。 これからF12・デベロッパーツールに慣れていきたいと思います! アドバイス通り試させていただきました。 スマホは思い通りに! ご指摘通り、PC版は画像が大きすぎたので 最終的にはスマホサイズ表示を調整(以下などのcss追加)することにしました。 /* 画面サイズが770以下(スマホ)のときに適応されるCSS */ @media screen and (max-width:770px) { 今回、不躾にたくさんの質問をしてしまったにもかかわらず とても細かく、的確にアドバイスいただき 本当にありがとうございました。 今回のアドバイスを生かして頑張りたいと思います。 改めて御礼申し上げます。 おやすみなさい。 |
« 1 (2) |
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |