フォーラム

トピックを立てる前にチェック
  1. フォーラムガイドライン」に必ず目を通してください。
  2. バージョンアップデート後に表示がおかしくなった場合は、
    「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。
  3. フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
スマホの場合だけ、画像全幅(画面いっぱ...
 
通知
すべてクリア

[解決済] スマホの場合だけ、画像全幅(画面いっぱい)に出すにはどうすればいいでしょうか?

6 投稿
3 ユーザー
0 Likes
134 表示
ayanami650304
(@ayanami650304)
投稿: 3
メンバー
Topic starter
 

cocoonから乗り換えたばかりのものです。
cocoonでは以下のcssを追加して
スマホだけ画像を全幅させるということができていました。
しかし、SWELLに乗り換え
SWLLに同じcssを追加しても
スマホの場合画像の全幅ができませんでした。
(PCとスマホ両方で全幅しているという意味ではありません。)
どのように対処したらよいか
SWELLの先輩方にアドバイスいただきたいです。

以下cocoon時代に使っていたものです。

@media only screen and (max-device-width: 480px) {
.my-allwidth-image {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
}

 

確認項目
利用規約に同意します*, ガイドラインを読み、内容を把握しています*, よくある質問を先にチェック済みです*, 過去に同じようなトピックがないか検索済みです*
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.6.8.3
利用中のWordPressバージョン
6.0.2
利用中のプラグイン一覧

Akismet Anti-Spam (アンチスパム)
Youtube SpeedLoad
Contact Form 7
など

 
投稿済 : 14/09/2022 12:54 am
トピックタグ
了
 
(@loos_ryo)
投稿: 786
メンバー Admin
 

セレクタの詳細度を上げてみてください。

SWELL開発者です。

 
投稿済 : 14/09/2022 9:04 am
ayanami650304
(@ayanami650304)
投稿: 3
メンバー
Topic starter
 

返信くださりありがとうございます。

その後CSSを

/* スマホ画面いっぱいに画像を表示 */
@media only screen and (max-width: 480px){
my-allwidth-image {
position:relative;
left:-15px;
max-width: calc(100% + 30px)!important;
}
}

と"important"を入れて優先度を上げたのですが
反映されません。
ちなみに追加CSS内には他にコードを入れてません。
他に見るべき点があったらご教授いただけたら幸いです。

 
投稿済 : 15/09/2022 3:08 am
しらこ
(@96ssbike)
投稿: 513
メンバー
 

@ayanami650304 了さんの説明は読んで理解していただいておりますでしょうか?「詳細度」です。「優先度」ではありません。詳細度をGoogle検索などして対応してください。

SWELLカスタマイズ向けの非公式サイトを作りました。何か見つかるかも?→ https://tecchan.jp/swell-tips/
上記以外のWordPress全般向けのナレッジはこちら→ https://tecchan.jp/
疲れたら癒やされてくださいにゃーん (ΦωΦ)

 
投稿済 : 15/09/2022 11:47 pm
ayanami650304
(@ayanami650304)
投稿: 3
メンバー
Topic starter
 

詳細度を調べるうちに優先度が出てきたので同義だと理解してしまいました。
もう少し調べてみます。
ヒントがあれば教えてくださると嬉しいです。
力不足、理解不足ですみませんでした・・・。

 
投稿済 : 18/09/2022 1:20 am
了
 
(@loos_ryo)
投稿: 786
メンバー Admin
 

詳細度も優先度もまあ同じようなものだと思います。(どちらの呼び方が正解なのかとかはちょっと分かってないです。)

ただ、max-widthだけimportant付けて優先度強くしても意味ないので、「セレクタの」詳細度を上げてください。

 

.

(かなり雑な)例

.my-allwidth-image.my-allwidth-image.my-allwidth-image{...}

SWELL開発者です。

 
投稿済 : 20/09/2022 5:14 pm
共有: