質問編集履歴

1 誤字

ayako_sato

ayako_sato score 8

2019/09/16 02:50  投稿

scssでメディアクエリの記述だけが機能しない
### 前提・実現したいこと
メディアクエリの実行をしたい。
370px以下の表示条件を指定したい。
### 発生している問題・エラーメッセージ
メディアクエリが指定通りに反映しない。
同じscssファイル内にはメディアクエリ以外の記述もありますが、それらは問題なく反映されています。
エラー等は特に出ていません。
### 該当のソースコード
/* HTML */
<!DOCTYPE html>
<html lang="ja">
 <head>
   <title>株式会社ALT</title>
   <meta charset="utf-8">
   <meta name="description" content="株式会社ALT">
   <meta name="description" content="株式会社AAA">
   <meta name="viewport" content="width=device-width">
   <link rel="icon" href="favicon.ico">
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
   <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
   <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
 </head>
 <body>
   <%= render partial: "shared/header" %>
   <%= yield %>
   <%= render partial: "shared/footer" %>
 </body>
</html>
/* scss */
@media screen and (max-width: 370px ){
 .works {
   background: #f0f0f0;
   margin-bottom: 30px;
   .flex {
     width: 100%;
     justify-content: center;
   }
 }
 
 .work{
   position: relative;
   box-sizing: border-box;
   padding: 30px 10px;
 }
 .gallery{
   background: image-url("gallery.png");
   background-size: cover;
   height: 100px;
   background-position: 50% 50%;
   padding: 0px;
 }
 .contact-form-bg{
   color: #fff;
   background: image-url("Foamback.png");
   height: 480px;
   background-size: cover;
   background-position: 50% 50%;
   padding: 0px;
 }
 
 .contact-title{
   width: inherit;
   padding: 60px 0px 10px 0px;
   text-align: left;
 }
 
 .contact-form{
   width: 350px;
   margin: 0px auto;
   display: block;
 }
 
 input.form-space{
   width: 350px;
   height: 40px;
 }
 
 textarea.message-space{
   width: 350px;
   height: 100px;
   resize: none;
 }
 
 .button-position{
   width: inherit;
   text-align: right;
 }
 
 
}
### 試したこと
viewport記載済みです。
検証画面でレスポンシブに設定し、幅を369pxまで縮めて確認していますが反映されていない状態です。
過去の同じような回答を拝見しましたが、ほかにscssファイルに重複した記載等もなく困り果てております…。
### 補足情報(FW/ツールのバージョンなど)
VSCOODEを使用しています。
saucetreeを使用しています。
  • HTML

    24527 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    17523 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る